VUE练习2 - 使用axios模块

2023-04-16

Word count: 374 | Reading time≈ 1 min

1 安装axios

1 2	项目根目录下执行如下指令 npm install -S axios --registry https://registry.npm.taobao.org

2 修改模块代码

在开发过程中，我们可能经常会在前端项目的业务里面使用到某些变量，我们可以添加到配置文件中，比如我们在src目录下创建一个settings.js文件：

/settings.js

1
2
3

export default { // 注意，对象要抛出后，其他文件中才能引入使用
    host: 'http://api.yunminitools.cn:8000' // 我们的后台项目将来就通过这个域名和端口来启动
}

为了方便后面其他页面组件使用settings中的配置变量，我们在main.js文件中引入封装成vue对象的全局属性.

/main.js，代码：

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import settings from "@/settings"

const app = createApp(App)
app.use(router).mount('#app')
app.config.globalProperties.$settings = settings

views/ShowCenter.vue ：

<template>
  <div class="showcenter">
    <h1>Show center</h1>
  </div>
</template>

<script>

<script>
import axios from 'axios'

export default {
  name: 'ShowCenter',
  mounted() {
    console.log(this.$settings.host)  
    axios.get("https://devapi.qweather.com/v7/weather/7d?location=101020100&key=xxx").then((response) => {
         console.log("response", response.data.daily)})
  }
}
</script>

其中key=xxx 是需要去网站和风天气开发服务申请的，目前是免费的。

3 效果

当点击到展示中心后，浏览器的控制台可以返回数据：