Vue 中使用axios库访问Rest服务

Axios 是一个基于 Promise 的 HTTP 库（官网），可以用在浏览器和 node.js 中。在 Vue 中，使用 axios 访问后台的Rest服务是非常方便的。

安装 axios

在项目目录中执行:

1	yarn add axios

使用 axios

以post 方法为例:

instance.post(<path>
      , body
      , {})
      .then((result) => {
      // handle result.data
      }, (error) => {
        console.error(error)
      })

axios 可以使用默属性构造一个通用实例。

课程实验使用的 Rest API

在课程实验中，需要使用几个 Rest API, 简单描述如下:

登录接口

方法: POST

URL:

1	http://<主机名>:<端口>/api/login

参数，在Body中，JSON格式:

{
	"userId":"xxxx",
	"password":"xxxxx"
}

HTTP Heaer:

1	Content-Type: application/json

获取待办事项列表

方法: POST

URL:

1	https://<主机名>:<端口>/api/todos/list

参数：无

HTTP Heaer:

1 2	Content-Type: application/json --auth-token--: <your token>

your token指的是在登录时获取到的，服务端生成的token信息

更新一个待办事项

方法： POST

URL:

1	https://<主机名>:<端口>/api/todos/update

参数: 在Body中包含需要更新的待办事项信息(JSON格式):

{
  "id": 2,
  "title": "Todo 2",
  "desc": "This desc has been updated",
  "completed": true
}

HTTP Heaer:

1 2	Content-Type: application/json --auth-token--: <your token>

删除待办事项

方法: POST

URL：

1	https://<主机名>:<端口>/api/todos/del

参数: 在Body中包含需要更新的待办事项信息(JSON格式):

{
  "id": 2,
  "title": "Todo 2",
  "desc": "This desc has been updated",
  "completed": true
}

HTTP Heaer:

1 2	Content-Type: application/json --auth-token--: <your token>

新增待办事项

方法: POST

URL：

1	https://<主机名>:<端口>/api/todos/add

参数: 在Body中包含需要更新的待办事项信息(JSON格式):

{
  "title": "Todo 2",
  "desc": "This desc has been updated",
  "completed": true
}

注意: 在新增操作中，不用指定待办事项的id

HTTP Heaer:

1 2	Content-Type: application/json --auth-token--: <your token>