vue vite+axios初体验制作天气预报

本节使用vue+axios制作一个七日的天气预报

首先去vue的官网以及axios官网安装vite以及axios

这里我们使用的是天气api   https://www.tianqiapi.com

去注册自己的开发账号即可获得

注册之后，请求示例里面的就是等下我们需要访问的api

第一种方法

安装完axios之后再main.js中引入

import axios from 'axios'
app.config.globalProperties.$http = axios

 然后再src下面创建utils文件夹，新建request.js

 里面的内容如下：

 

import axios from 'axios'

const request = axios.create({
	// 基础路径 url = base url + request url
	baseURL: 'https://v0.yiketianqi.com/api?unescape=1&version=v9&vue=1&appid=你的接口id&appsecret=你自己的',
	// 请求超时
	timeout: 5000 
})

//配置请求拦截器
request.interceptors.request.use(
	config => config
)

//配置响应拦截器
request.interceptors.response.use(
	response => {
		return response.data;
	}
)

export default request

之后在要显示的页面中

 

 

 全部代码

<template>
    <h2> {{ cityInfo.city }}</h2>
    <p>今天：{{ cityInfo.data.date }}</p>
    {{ cityInfo.data.wea }}
    <div class="list">
        <ul  v-for="item in cityInfo.case">
            <li>
                {{ item.date }}
                <img :src="get(item.wea_img)">
                <p><img :src="Img(item.wea_img)"></p>
                {{ item.wea }}
                <p>{{ item.tem }}摄氏度</p>
            </li>
        </ul>
    </div>
</template>

<style>
.list {
    display: flex;
    flex-wrap: wrap;
}

ul {
    list-style: none;
    height: 200px;
    width: 200px;
    border: solid 1px;
}
</style>

<script setup>
import {  onMounted, reactive} from "vue";
import request from '../utils/request'
const cityInfo = reactive({
    city: '',
    data: [],
    case: [],
})
const get =(sky) =>{
    return "https://xintai.xianguomall.com/skin/pitaya/" + sky + ".png"
}
onMounted(() => {
    get()
    request.get(`https://v0.yiketianqi.com/api?unescape=1&version=v9&vue=1&appid=yoursid&appsecret=yourssecret
    `)
        .then((result) => {
            console.log(result);
            cityInfo.city = result.city;
            cityInfo.data = result.data[0];
            cityInfo.case = result.data;

            console.log("test", cityInfo.city, cityInfo.data);
        })
    console.log(`the component is now mounted.`)
})
</script>

最后的效果图

第二种方法 

这种方法是用的网上的一个图片地址，如果想要自定义图片（引用本地图片）其他的都和上面的内容一样唯一不同的就是在xxx.vue里面的写法不一样

首先引入图片资源

 script标签里面写入要引入的标签

定义图片

 

 onMounted里面

 页面上

最后效果图：

（就会好看很多） 

注：如果有跨域问题官方说的（把这个设置为1，就可以了）