A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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  
 })
 }

测试如下:

1545897631(1).jpg

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马