黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day3(二） [打印本页]

---

作者: 谷粒姐姐    时间: 2018-12-27 16:00
标题: 【郑州校区】Java的新项目学成在线笔记-day3(二）
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  

 })

 }

测试如下：

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2