1
VUE框架CLI组件调用天气接口实现天气界面动态实现------VUE框架
source link: https://blog.51cto.com/u_16322355/10513044
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
VUE框架CLI组件调用天气接口实现天气界面动态实现------VUE框架
精选 原创// 这句话就等同于我们写的<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(){
}
},
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>- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK