VUE框架CLI组件调用天气接口实现天气界面动态实现------VUE框架

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

旧约Alatus

1294人浏览 · 2023-12-13 14:22:43

旧约Alatus · 2023-12-13 14:22:43 发布

// 这句话就等同于我们写的<script src="vue.js">
// 这就是在引入vue
import Vue from 'vue';
// 然后下一步是导入我们的根组件
import App from './App.vue';
// 导入混入
import {mix1} from './mixin.js';
import {mix2} from './mixin.js';
import {mix3} from './mixin.js';
// 导入插件
import {p1} from './plugins';
import VueResource from 'vue-resource';

//全局混入
Vue.mixin(mix1);
Vue.mixin(mix2);
Vue.mixin(mix3);

// 插件的使用通常放在创建Vue对象之前
// 插上插件
Vue.use(p1,1,2,3,4);
// 使用这个插件后,所有的vm和vc都会多一个叫$http的属性
Vue.use(VueResource);

// 这是关闭生产提示信息
Vue.config.productionTip = false

// 创建一个共享的VueComponent构造函数
// const VueComponentConstructor = Vue.extend({});
// 创建一个共享的VC对象
// const globalvc = new VueComponentConstructor();


// 创建VUE实例对象VM
const vm = new Vue({
  // 删除render函数就会导致报错
  // 因为没有可用的模板翻译器
  // 使用完整的vue.js或使用render函数才能解决这个问题
  // 为什么采用模板编译器的Vue.js放到脚手架呢?
  // 目的是减小体积,VUE.js包括两类,核心和模板编译器
  // 模板编译器可能占用vue.js体积的三分之一
  // 将来打包的时候,模板编译器没有存在的必要了
  // 体积大就会影响速度
  // render函数被自动调用,且会自动传过来一个参数
  // 这个参数是一个函数,createElement是一个函数
  // 这个函数可以用来创建元素
  // 用这个来创建元素就可以省掉我们的vue模板编译器了
  // render(createElement)
  // {
  //   return createElement(App);
  // }
  // 简写就是这个箭头函数
  render: h => h(App),
  // 利用生命周期机制,在对象创建时把我们的vm作为这个对象
  beforeCreate(){
    Vue.prototype.$bus = this;
  }
}).$mount('#app');
// 这里用的是$mount的方式绑定和el的方式是一样的
// 这句话就等同于我们写的<script src="vue.js">

// 这就是在引入vue

import Vue from 'vue';

// 然后下一步是导入我们的根组件

import App from './App.vue';

// 导入混入

import {mix1} from './mixin.js';

import {mix2} from './mixin.js';

import {mix3} from './mixin.js';

// 导入插件

import {p1} from './plugins';

import VueResource from 'vue-resource';

//全局混入

Vue.mixin(mix1);

Vue.mixin(mix2);

Vue.mixin(mix3);

// 插件的使用通常放在创建Vue对象之前

// 插上插件

Vue.use(p1,1,2,3,4);

// 使用这个插件后,所有的vm和vc都会多一个叫$http的属性

Vue.use(VueResource);

// 这是关闭生产提示信息

Vue.config.productionTip = false

// 创建一个共享的VueComponent构造函数

// const VueComponentConstructor = Vue.extend({});

// 创建一个共享的VC对象

// const globalvc = new VueComponentConstructor();

// 创建VUE实例对象VM

const vm = new Vue({

// 删除render函数就会导致报错

// 因为没有可用的模板翻译器

// 使用完整的vue.js或使用render函数才能解决这个问题

// 为什么采用模板编译器的Vue.js放到脚手架呢?

// 目的是减小体积,VUE.js包括两类,核心和模板编译器

// 模板编译器可能占用vue.js体积的三分之一

// 将来打包的时候,模板编译器没有存在的必要了

// 体积大就会影响速度

// render函数被自动调用,且会自动传过来一个参数

// 这个参数是一个函数,createElement是一个函数

// 这个函数可以用来创建元素

// 用这个来创建元素就可以省掉我们的vue模板编译器了

// render(createElement)

// {

// return createElement(App);

// }

// 简写就是这个箭头函数

render: h => h(App),

// 利用生命周期机制,在对象创建时把我们的vm作为这个对象

beforeCreate(){

Vue.prototype.$bus = this;

}

}).$mount('#app');

// 这里用的是$mount的方式绑定和el的方式是一样的

<template>
	<div class="card">
		<Search></Search>
		<Weather></Weather>
	</div>
</template>

<script>
import Weather from "./components/Weather.vue";
import Search from "./components/Search.vue";
export default {
	name : "App",
	components : {Search,Weather}
}
</script>

<style lang="css">
/*公共样式*/
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

body {
    background : #222;
}

.card {
    width: 70%;
    max-width: 470px;
    background: linear-gradient(135deg, #00feba, #5b548a);
    color: #fff;
    margin: 100px auto 0;
    border-radius: 20px;
    padding: 40px 35px;
    text-align: center;
}
</style>
<template>

<div class="card">

<Search></Search>

<Weather></Weather>

</div>

</template>

<script>

import Weather from "./components/Weather.vue";

import Search from "./components/Search.vue";

export default {

name : "App",

components : {Search,Weather}

}

</script>

<style lang="css">

/*公共样式*/

*{

margin: 0;

padding: 0;

font-family: 'Poppins', sans-serif;

box-sizing: border-box;

}

body {

background : #222;

}

.card {

width: 70%;

max-width: 470px;

background: linear-gradient(135deg, #00feba, #5b548a);

color: #fff;

margin: 100px auto 0;

border-radius: 20px;

padding: 40px 35px;

text-align: center;

}

</style>

<template>
    <div class="weather">
        
        <div v-show="isNotFound">对不起,请检查您输入的城市信息</div>
        <div v-show="weather.isShow">
            <img :src="weather.imgPath" class="weather-icon">
            <h1 class="temp">{{ weather.temp }}°c</h1>
            <h2 class="city">{{ weather.city }}</h2>
            <div class="details">
                <div class="col">
                    <img src="../assets/images/humidity.png" />
                    <div>
                        <p class="humidity">{{ weather.humidity }}%</p>
                        <p>湿度</p>
                    </div>
                </div>
                <div class="col">
                    <img src="../assets/images/wind.png">
                    <div>
                        <p class="wind">{{ weather.windSpeed }}米/秒</p>
                        <p>风速</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name : "Weather",
    data(){
        return {
            isNotFound : false,
            weather : {}
        }
    },
    methods : {
        displayWeather(weather,isNotFound){
            this.weather = weather;
            this.isNotFound = isNotFound;
        },
        disPlayNotFound(){

        }
    },
    mounted(){
        this.$bus.$on("displayWeather",this.displayWeather);
        this.$bus.$on("isNotFound",this.isNotFound);
    }
}
</script>

<style lang="css" scoped>
/*天气样式*/
.weather-icon {
    width: 170px;
    margin-top: 30px;
}

.weather h1 {
    font-size: 80px;
    font-weight: 500;
}

.weather h2 {
    font-size: 45px;
    font-weight: 400;
    margin-top: -10px;
}

.details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-top: 50px;
}

.col {
    display: flex;
    align-items: center;
    text-align: left;
}

.col img {
    width: 40px;
    margin-right: 10px;
}

.humidity, .wind {
    font-size: 28px;
    margin-top: -6px;
}
</style>
<template>

<div class="weather">



<div v-show="isNotFound">对不起,请检查您输入的城市信息</div>

<div v-show="weather.isShow">

<img :src="weather.imgPath" class="weather-icon">

<h1 class="temp">{{ weather.temp }}°c</h1>

<h2 class="city">{{ weather.city }}</h2>

<div class="details">

<div class="col">

<img src="../assets/images/humidity.png" />

<div>

<p class="humidity">{{ weather.humidity }}%</p>

<p>湿度</p>

</div>

</div>

<div class="col">

<img src="../assets/images/wind.png">

<div>

<p class="wind">{{ weather.windSpeed }}米/秒</p>

<p>风速</p>

</div>

</div>

</div>

</div>

</div>

</template>

<script>

export default {

name : "Weather",

data(){

return {

isNotFound : false,

weather : {}

}

},

methods : {

displayWeather(weather,isNotFound){

this.weather = weather;

this.isNotFound = isNotFound;

},

disPlayNotFound(){

}

},

mounted(){

this.$bus.$on("displayWeather",this.displayWeather);

this.$bus.$on("isNotFound",this.isNotFound);

}

}

</script>

<style lang="css" scoped>

/*天气样式*/

.weather-icon {

width: 170px;

margin-top: 30px;

}

.weather h1 {

font-size: 80px;

font-weight: 500;

}

.weather h2 {

font-size: 45px;

font-weight: 400;

margin-top: -10px;

}

.details {

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 20px;

margin-top: 50px;

}

.col {

display: flex;

align-items: center;

text-align: left;

}

.col img {

width: 40px;

margin-right: 10px;

}

.humidity, .wind {

font-size: 28px;

margin-top: -6px;

}

</style>

<template>
    <div class="search">
        <input type="text" placeholder="请输入城市名字" spellcheck="false" v-model="cityName"/>
        <button @click="search()"><img src="../assets/images/search.png"/></button>
    </div>
</template>

<script>
import axios from "axios";
export default {
    name : "Search",
    data(){
        return {
            cityName : "深圳"
        }
    },
    mounted(){
        this.search();
    },
    methods : {
        search(){
            if(!this.cityName.trim()){
                return;
            }
            const apiKey = "78asczxcasdasdasa6f82bf";
            // 使用ES6的模板语法
            const LatLOn = `http://api.openweathermap.org/geo/1.0/direct?q=${this.cityName}&appid=${apiKey}`;
            // 发送AJAX请求,根据城市名字获取纬度和经度
            axios.get(LatLOn).then(
                response => {
                    if(!response.data.length){
                        alert("无法查询您寻找的城市信息");
                        this.$bus.$emit("displayNotFound",true);
                        return;
                    }
                    else{
                        const lat = response.data[0].lat;
                        const lon = response.data[0].lon;
                        axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`).then(
                            response => {
                                const weather = {
                                    // 天气图片路径
                                    imgPath : `https://openweathermap.org/img/wn/${response.data.weather[0].icon}@2x.png`,
                                    // 温度
                                    temp : response.data.main.temp,
                                    // 湿度
                                    humidity : response.data.main.humidity,
                                    // 风速
                                    windSpeed : response.data.wind.speed,
                                    // 城市名
                                    city : this.cityName,
                                    // 是否展示
                                    isShow : true
                                };
                                this.$bus.$emit("displayWeather",weather,false);
                            },
                            error => {
                                alert("网络异常");
                            }
                        );
                    }
                },
                error => {
                    alert("网络异常");
                }
            )
        }
    },
    mounted(){

    }
}
</script>

<style lang="css" scoped>
/*搜索框样式*/
.search {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search input {
    border: 0;
    outline: 0;
    background: #ebfffc;
    color: #555;
    padding: 10px 25px;
    height: 60px;
    border-radius: 30px;
    flex: 1;
    margin-right: 16px;
    font-size: 18px;
}

.search button{
    border: 0;
    outline: 0;
    background: #ebfffc;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
}

.search button img {
    width: 16px;
}
</style>
<template>

<div class="search">

<input type="text" placeholder="请输入城市名字" spellcheck="false" v-model="cityName"/>

<button @click="search()"><img src="../assets/images/search.png"/></button>

</div>

</template>

<script>

import axios from "axios";

export default {

name : "Search",

data(){

return {

cityName : "深圳"

}

},

mounted(){

this.search();

},

methods : {

search(){

if(!this.cityName.trim()){

return;

}

const apiKey = "7asdxzd791asdzczxasdaa6f82bf";

// 使用ES6的模板语法

const LatLOn = `http://api.openweathermap.org/geo/1.0/direct?q=${this.cityName}&appid=${apiKey}`;

// 发送AJAX请求,根据城市名字获取纬度和经度

axios.get(LatLOn).then(

response => {

if(!response.data.length){

alert("无法查询您寻找的城市信息");

this.$bus.$emit("displayNotFound",true);

return;

}

else{

const lat = response.data[0].lat;

const lon = response.data[0].lon;

axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`).then(

response => {

const weather = {

// 天气图片路径

imgPath : `https://openweathermap.org/img/wn/${response.data.weather[0].icon}@2x.png`,

// 温度

temp : response.data.main.temp,

// 湿度

humidity : response.data.main.humidity,

// 风速

windSpeed : response.data.wind.speed,

// 城市名

city : this.cityName,

// 是否展示

isShow : true

};

this.$bus.$emit("displayWeather",weather,false);

},

error => {

alert("网络异常");

}

);

}

},

error => {

alert("网络异常");

}

)

}

},

mounted(){

}

}

</script>

<style lang="css" scoped>

/*搜索框样式*/

.search {

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

}

.search input {

border: 0;

outline: 0;

background: #ebfffc;

color: #555;

padding: 10px 25px;

height: 60px;

border-radius: 30px;

flex: 1;

margin-right: 16px;

font-size: 18px;

}

.search button{

border: 0;

outline: 0;

background: #ebfffc;

border-radius: 50%;

width: 60px;

height: 60px;

cursor: pointer;

}

.search button img {

width: 16px;

}

</style>

GitHub 加速计划 / vu / vue

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：4 个月前 )

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前

e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m