Java的新项目学成在线笔记-day3(二）

1.3 前端 1.3.1 页面
1、增加查询表单

<!‐‐查询表单‐‐>
<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，如下：

data() {
 return {
    siteList:[],//站点列表  
   list:[], 
   total:50, 
   params:{ 
     siteId:'', 
     pageAliase:'', 
     page:1,//页码  
     size:2//每页显示个数 
    } 
 }

3、在钩子方法中 构建siteList站点列表

mounted() {  
//默认查询页面  
 this.query()
  //初始化站点列表  
 this.siteList = [   
  {   
   siteId:'5a751fab6abb5044e0d19ea1',
      siteName:'门户主站'  
   },  
  {  
    siteId:'102',    
  siteName:'测试站'
     }
  ] 
}

1.3.2 Api调用
1、向服务端传递查询条件，修改 cms.js，如下：

//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方法

//查询 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 
 })
 }

测试如下：