Requirement: Request free weather interface data based on geographic location information, and display the data after getting it. Here I use two keys, one is the key of Gaode Weather and the key of knowing the weather. Why is it so troublesome? It's because I wrote a version before that I don't need to get the geographical location, I can directly request the weather to get the data, but after less than a month, it crashed, and I need to use the upgraded version..., so it's still a little troublesome.
The result is as follows
1. AutoNavi weather key needs to register as a developer and apply in the console
1. Obtain key from AutoNavi weather
Click the application management == "My application ==" to create an application in the console, as shown in the figure below, fill in the name at will, and select travel as the type
Click to add key
Just fill in the following and get the key
2. Know the weather to get the key
After registering and logging in in the upper right corner of Xinzhi Weather , click on the console in the upper right corner. After entering, you will be asked to choose a product == "choose free, and the selection is as follows:
Click on product management, get the public key and private key, just copy the key of the private key
3. Request the geographical location interface to obtain data and request the complete code of the weather interface
<template>
<div class="box">
<p class="boxTemperature">{
{ weatcherData.tem }}°</p>
<p class="boxWeather">{
{ weatcherData.wea }}</p>
<p class="boxCity">{
{ weatcherData.city }}市</p>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
weatcherData: {
tem: "",
wea: "",
city: ""
},
ipV: "",
city: ""
};
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
this.gettianiq();
},
methods: {
gettianiq() {
axios({
url: "/ws/location/v1/ip", //接口地址（代理把起码路径去掉）
params: { key: "高德地图的位置key", output: "jsonp" }, //参数格式必须用到output传参为jsonp，否则会报跨域问题
// responseType: "jsonp" //跨域，必须用到jsonp
}).then(res => {
var ip = res.data.replace("QQmap&&QQmap(", "").replace(");", "");
this.ipV = JSON.parse(ip);
let {result}=this.ipV;
this.city=result.ad_info.city;
console.log(this.city,this.ipV.result);
this.$nextTick(()=>{
this.weather()
})
});
},
weather() {
axios({
url: "https://api.seniverse.com/v3/weather/now.json", //接口地址（代理把起码路径去掉）
params: { key: "天气的私钥", location: this.city, unit: "c" } //参数格式必须用到
}).then(res => {
let { data } = res;
console.log(data, "获取到数据");
let { results } = data;
this.weatcherData.tem = results[0].now.temperature;
this.weatcherData.wea = results[0].now.text;
this.weatcherData.city = results[0].location.name;
console.log(results[0].now.temperature);
});
}
}
};
</script>
<style scoped>
.box {
display: flex;
align-items: center;
color: #5e5757;
margin-right: 20px;
}
.boxTemperature {
font-size: 18px;
}
.boxWeather {
font-size: 14px;
margin: 0 0 0 15px;
}
.boxCity {
margin-left: 10px;
font-size: 16px;
}
</style>
4. Proxy Problems
Direct requests directly cause cross-domain problems, and the solutions are as follows:
1. Configure cross-domain proxy proxy under the devServer of vue.config.js
module.exports = {
devServer: {
// 反向代理配置
proxy: {
'/ws': {
target: 'https://apis.map.qq.com/',
ws: true,
changOrigin: true,//允许跨域
pathRewrite: {
'^/ws': '/ws'
}
},
}
},
}5. Data realization
The location information obtained by the Gaode interface is as follows, and the city is proposed to request the weather interface
The format of the data obtained by the weather interface is as follows
That's it, the article ends here, I hope it can help you~