1、用vue-cli搭建起一个hello-world(名字随意)的工程,不做任何修改。
2、引入Axios。
在入口文件main.ts中引入Axios
import Axios from 'axios'
import VueAxios from 'vue-axios'
……
Vue.use(VueAxios, Axios);
……
3、在public文件夹中添加data.json文件
可能很多同学问题都出在这里,从网上搜索发现很多人说json文件应该放在assets目录或static目录下,但是我的却不行(我的vue版本是^2.6.11),一直报404错误,如果出现这样的问题,不妨跟我一样,把json文件放在public目录下
data.json文件内容
{
"users": [
{
"id": "1",
"code": "admin",
"name": "admin",
"nick": "超级管理员",
"pwd": "aaaaaa"
},
{
"id": "2",
"code": "Annie",
"name": "安妮",
"nick": "管理员一姐",
"pwd": "aaaaaa"
},
{
"id": "1",
"code": "jack002",
"name": "李力夫",
"nick": "jjjjj",
"pwd": "aaaaaa"
}
]
}
4、Home.vue修改调用axios
添加了一个按钮,去调用getUserInfo方法。
methods中添加getUserInfo,去请求data.json本地文件,请求的时候注意,不需要添加public目录名。
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<button @click="getUserInfo">获取用户信息</button>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
export default Vue.extend({
name: "Home",
components: {
HelloWorld,
},
mounted: function () {},
methods: {
getUserInfo() {
this.axios.get("/data.json")
.then((res) => {
console.log(res);
})
.catch((error) => {
console.log(res);
});
},
},
});
</script>
5、运行结果