1.3 前端 1.3.1 页面
1、增加查询表单
[AppleScript] 纯文本查看 复制代码 <!‐‐查询表单‐‐>
<el‐form :model="params">
<el‐select v‐model="params.siteId" placeholder="请选择站点">
<el‐option
v‐for="item in siteList"
:key="item.siteId"
:label="item.siteName"
:value="item.siteId">
</el‐option>
</el‐select>
页面别名：<el‐input v‐model="params.pageAliase" style="width: 100px"></el‐input>
<el‐button type="primary" v‐on:click="query" size="small">查询</el‐button> </el‐form>
2、数据模型对象 增加siteList、pageAliase、siteId，如下：
[AppleScript] 纯文本查看 复制代码 data() {
return {
siteList:[],//站点列表
list:[],
total:50,
params:{
siteId:'',
pageAliase:'',
page:1,//页码
size:2//每页显示个数
}
}
3、在钩子方法中 构建siteList站点列表
[AppleScript] 纯文本查看 复制代码 mounted() {
//默认查询页面
this.query()
//初始化站点列表
this.siteList = [
{
siteId:'5a751fab6abb5044e0d19ea1',
siteName:'门户主站'
},
{
siteId:'102',
siteName:'测试站'
}
]
}
1.3.2 Api调用
1、向服务端传递查询条件，修改 cms.js，如下：
[AppleScript] 纯文本查看 复制代码 //public是对axios的工具类封装，定义了http请求方法
import http from './../../../base/api/public'
import querystring from '
querystring' let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;
export const page_list = (page,size,params) => {
//将json对象转成key/value对
let query = querystring.stringify(params)
return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size+'/?'+query) }
2、页面调用api方法
[AppleScript] 纯文本查看 复制代码 //查询 query:function () {
cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{
console.log(res)
this.total = res.queryResult.total
this.list = res.queryResult.list
})
}
测试如下：
| 
收藏
淘帖
踩
