Vue - Post类型接口步骤

本篇文章是关于Post类型接口怎么接。全篇基于Vue-element-admin框架。
关于Get类型详见上一篇文章：
https://www.jianshu.com/p/b7343ef0090b
以表格el-table的数据导入为例。先看效果：

HTML

1、在user.js目录下写一个请求方法 "getPage"

url同样是由接口文档给出

Post接口文档示例.jpg

// 床位信息分页查询接口
export function getPage_5(data) {
  return request({
    url: '/admin/sysDept/getPage',
    method: 'post',
    data
  })
}

因为是Post类型接口所以getPage_6(data)要传入参数，具体需要对应接口文档中的内容，这里我选择把全部参数传过来。

2、在需要接接口的页面×××.vue下面引入该方法

import { getPage_5 } from '@/api/user'

3、在data的retrun中定义一个list接收数据

data() {
    return {
      tableKey: 0,
      list: null,//定义一个list
      total: 0,
      listLoading: true,
      listQuery: {
        pageIndex: 1,//页码
        pageSize: 10,//控制每页条数
        title: undefined,
        type: undefined,
        sort: '+id'
      }
   }
}

4、在methods中写一个getList()方法获取数据

 getList() {
      this.listLoading = false
      getPage_5(this.listQuery).then(response => {
        this.list = response.data.list//将读取到的数据存入事先定义的list中
        this.total = response.data.count//读取记录总条数
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    }

5、在el-table中绑定该数据

:data="list"
将每一项的prop值对应接口文档中相应的变量值

6、总结重点

• 请求方法
• 引入请求方法
• 定义接收变量
• 写方法调用接口
• 修改el-table中对应的:data绑定值和prop对应变量名。
  其他关于复杂的表格详见官方文档
  表格：https://element.eleme.cn/#/zh-CN/component/table
  分页：https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/pagination.html