7，vue利用axios调用后台api接口

通常我们的vue项目是前后分离的，vue前端通过后台api提供的接口(url)操作数据库，这里我们通过axios来实现。
可以使用我的在线API的URL进行测试
和使用swagger构造的API描述文档

我们后台有这样一个接口：http://localhost:8081/api/projectInfo/GetAll（如果使还没有后台接口，可以先使用http://112.125.90.247:81/api/Data/GetAll这个地址），它的作用是获取projectInfo表的所有数据。在地址栏输入上述地址，看一下结果：

很明显，只要我们vue前台访问这个地址，就可以拿到这些数据了。下面我们来一步步做：

1，安装axios：

和安其它包一样：npm install axios

2，新建接口文件:

在src文件夹中新建api文件夹，在api文件夹中新建api.js文件（在里面将后台的接口地址稍微修饰，变成前台可以调用的方法）：

// 引入axios
import axios from 'axios'
// 请求延时（毫秒数，如果请求话费超过了'timeout'的时间，请求将被中断）
axios.defaults.timeout = 100000
1
2
3
4

3，写方法：

我们写一个getAllData 方法
这里的params 用来传参，虽然这里还没用到

export const getAllData = params => {
  return axios.get(`http://localhost:8081/api/projectInfo/GetAll`,{ params: params });
};
1
2
3

4，调用方法：

比如我们要在xxx.vue文件里使用这个getAllData 方法：
①先引入方法：

import { getAllData } from '../api/api'
1

②然后就可以使用getAllData 方法了：

 getAllData().then((res) => {
      console.log(res)
    })
1
2
3

5，运行，看一下是否获取到数据，结果一运行就报错了。

原来是跨域的错误。

6，跨域修改：

首先我们把在api.js写的方法改一下，改成：

export const getAllData = params => {
  return axios.get(`api/projectInfo/GetAll`,{ params: params });
};
1
2
3

然后为url加一个基础前缀：

axios.defaults.baseURL="/api"
1

之后，做代理配置：

 proxyTable: {
      // 配置多个代理
      "/api": {
        target: "http://localhost:8081",
        secure:true,
        changeOrigin: true,
        pathRewrite: {
          // 路径重写，
          "^/api": "" // 替换target中的请求地址
        }
      },
    },
1
2
3
4
5
6
7
8
9
10
11
12

现在来说一下上述修改起到了什么作用：
我们get.axios里的初始url为api/projectInfo/GetAll，经过axios.defaults.baseURL="/api"，要访问的url变为api/api/projectInfo/GetAll。
代理配置中的

"/api": {
        target: "http://localhost:8081",
1
2

表示，当碰到以/api为前缀的地址时，将/api替换为http://localhost:8081，所以我们现在要访问的地址就是http://localhost:8081/api/projectInfo/GetAll

7，再运行，发现有结果了

返回的格式不用去管，这是后台配置的，我们只需要看到response里有9011条数据，说明获取数据成功了。

8，新增、编辑、删除的写法

对应在线文档的这三个方法

/**
 * 数据管理页面新增一条数据
 * @param {*} params
 * qs.stringify()将对象 序列化成URL的形式，以&进行拼接，来传递参数
 * @returns
 */
export const addData = params => {
    return axios.post(`${base}/api/Data/post`, qs.stringify(params), {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
    }); // 这里是跨域的写法
};

/**
 * 数据管理页面编辑一条数据
 * @param {*} params
 * @returns
 */
export const editData = params => {
    return axios.post(`${base}/api/Data/put`, qs.stringify(params), {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
    }); // 这里是跨域的写法
};

/**
 * 数据管理页面根据id删除一条数据
 * @param {*} id
 * @returns
 */
export const DeleteDataById = id => {
    return axios.get(`${base}/api/Data/DeleteById/${id}`);
};
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

其对应的后台代码为：

/// 

		/// 新增数据
		/// 
		///一条数据
		[HttpPost]
		public MessageModel Post([FromBody] Data request)
		{
			var data = new MessageModel();
			request.Id = Guid.NewGuid().ToString();
			request.CreateTime = DateTime.Now;
			//插入数据
			var id = DbContext.Insertable(request).ExecuteCommand();
			//查询是否添加成功
			var success1 = DbContext.Queryable().Where(it => it.Id == request.Id)
				.ToList();
			data.success = success1.Count > 0;
			if (data.success)
			{
				data.response = id.ToString();
				data.msg = "添加成功";
				log4net.ILog log = log4net.LogManager.GetLogger("MyLogger");
				log.Info("Data" + "-" + "Add" + "-" + request.Id);
			}
			return data;
		}

		/// 

		/// 编辑数据
		/// 
		///一条数据
		[HttpPost]
		public MessageModel Put([FromBody] Data request)
		{
			var data = new MessageModel();
			request.UpdateTime = DateTime.Now;
			if (request.Id != null)
			{
				var id = DbContext.Updateable(request).ExecuteCommand();
				data.success = (id > 0);
				if (data.success)
				{
					data.msg = "更新成功";
					data.response = id.ToString();
					log4net.ILog log = log4net.LogManager.GetLogger("MyLogger");
					log.Info("Data" + "-" + "Edit" + "-" + request.Id);
				}
			}
			return data;
		}

		/// 

		/// 根据主键Id删除一条数据
		/// 
		///编号
		[HttpGet]
		public MessageModel DeleteById(string Id = "")
		{
			var data = new MessageModel();
			var id = DbContext.Deleteable().In(Id).ExecuteCommand();
			data.success = (id > 0);
			if (data.success)
			{
				data.msg = "删除成功";
				data.response = id.ToString();
				log4net.ILog log = log4net.LogManager.GetLogger("MyLogger");
				log.Info("Data" + "-" + "Delete" + "-" + Id);
			}
			return data;
		}
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

可能会出现put请求和delete请求不被允许的情况（报405之类的错误），一种解决方法是将put请求改成post请求，将delete请求改成get请求（例如上面的编辑和删除方法）

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦