vue中配置axios教程-定稿版(三)——页面index.vue中引入和使用接口文件,network查看请求和响应
备注-查看文件
1、src/main.js——引入axios
2、vue.config.js——配置跨域和基准路径
3、src/api/index.js——配置axios-响应拦截、请求拦截、请求方式、基准路径
4、.env——配置基准路径
5、src/api/knowledge/entityType.js——配置接口文档集合
6、src/views/knowledge/index.vue——引入接口文档、请求接口进行验证
第四步:在页面index.vue中进行引入
完整代码-src/views/knowledge/index.vue
<script>
import { getListAll, add, deletes } from "@/api/knowledge/entityType";
export default {
data(){
return{
}
},
created() {
this.getAllTable();
},
methods: {
getAllTable() {
//3、获取所有数据
getListAll().then((res) => {
console.log(res);
});
//2、删除数据
deletes("1AEC586D40444D3F86996FC2B503A1B7").then((res) => {
console.log(res);
});
//1、添加数据
add({
createTime: "2012-05-03",
entityContentTooltip: "string",
entityDictionaries: "喝咖啡是大家回复开始",
entityName: "华夏",
reviser: "string",
rtime: "string",
rtimeMS: "string",
serialNumber: "string",
}).then((res) => {
console.log(res);
});
},
},
}
</script>
1、添加接口-POST请求
1.1、添加数据-接口文档
1.2、添加-请求
1
2
1.3、添加-响应
2、删除接口-DELETE请求
2.1、删除数据-接口文档
2.2、删除-请求
1
2