vue中配置axios教程-定稿版（三）——页面index.vue中引入和使用接口文件，network查看请求和响应

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

1、添加接口-POST请求

1.1、添加数据-接口文档

1.2、添加-请求

1

2

1.3、添加-响应

2、删除接口-DELETE请求

2.1、删除数据-接口文档

2.2、删除-请求

1

2

2.3、删除响应

3、获取接口-GET请求

3.1、获取数据-接口文档

3.2、获取请求

3.3、获取响应