[TOC]
使⽤按条件分⻚查询资源接⼝,接⼝地址。
Postman 测试时注意,所有参数可选:
⽆参数时需要传⼊空对象,这时响应数据的 data.records 为第⼀⻚的多条数据。
传⼊参数⽤于按条件筛选,如传⼊name 或 url,这时响应数据的 data.records 为筛选后数据(多为⼀条)
接⼝⽀持模糊查询,例如传⼊ “url”: “menu” ,这时会响应多条满⾜条件的资料信息。
测试完毕,封装接⼝到新模块 services/resource.js 中。
// services/resource.js
import request from ‘@/utils/request’
// 资源请求
export const getResourcePages = data => {
return request({
method: ‘POST’,
url: ‘/boss/resource/getResourcePages’,
data
})
}
引⼊调⽤,发送请求:
// resource/components/list.vue
…
成功后,将数据存储到 data.resources 中,并绑定到 Table 组件
// resource/components/list.vue
…
:data=“resources”
style=“width: 100%”>
type=“index”
label=“编号”
width=“100”>
prop=“name”
label=“资源名称”>
prop=“url”
label=“资源路径”>
prop=“description”
label=“描述”>
<!—
时间通过过滤器处理:
Table 组件数据要使⽤过滤器,
需要通过⾃定义列模板⽅式设置插值表达式
—>
label=“添加时间”>
slot-scope=“scope”>
{{ scope.row.createdTime | dateFormat }}
</el-table-column>
label=“操作”
width=“150”>
slot-scope=“scope”>
size=“mini”
@click=“handleEdit(scope.$index, scope.row)”>编辑
size=“mini”
type=“danger”
@click=“handleDelete(scope.$index, scope.row)”>删除
button>
</el-table>
…
</template>