VUE框架CLI组件调用天气接口实现天气界面动态实现和完整工程------VUE框架
精选
原创
©著作权归作者所有：来自51CTO博客作者旧约Alatus的原创作品，请联系作者获取转载授权，否则将追究法律责任
// 这句话就等同于我们写的<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="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(isNotFound){
this.isNotFound = isNotFound;
}
},
mounted(){
this.$bus.$on("displayWeather",this.displayWeather);
this.$bus.$on("displayNotFound",this.disPlayNotFound);
}
}
</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 = "7xcasdasdxczadasda6f82bf";
// 使用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>
