vue窗口的类型_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中绑定该数据

:key="tableKey"

v-loading="listLoading"

:data="list"//重点

border

:height="tableHeight"

fit

highlight-current-row

stripe

style="width: 100%;"

:header-cell-style="{background:'#F0F5F7'}"

@sort-change="sortChange"

>

:total="total"

:page.sync="listQuery.pageIndex"

:limit.sync="listQuery.pageSize"

@pagination="getList"

/>

:data="list"

将每一项的prop值对应接口文档中相应的变量值

6、总结重点