黑马程序员技术交流社区

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

---

作者: 谷粒姐姐    时间: 2018-12-24 16:13
标题: 【郑州校区】Java的新项目学成在线笔记-day2(三）
3.1.3页面内容完善
根据需求完善页面内容，完善列表字段，添加分页组件。

[AppleScript] 纯文本查看 复制代码

 <template>  

 <div>   

  <el‐button type="primary" v‐on:click="query"  size="small">查询</el‐button>   

<el‐table    

 :data="list"   

  stripe   

  style="width: 100%">    

 <el‐table‐column type="index" width="60">   

  </el‐table‐column>  

   <el‐table‐column prop="pageName" label="页面名称" width="120">  

   </el‐table‐column>    

 <el‐table‐column prop="pageAliase" label="别名" width="120">  

   </el‐table‐column>   

  <el‐table‐column prop="pageType" label="页面类型" width="150">   

  </el‐table‐column>    

 <el‐table‐column prop="pageWebPath" label="访问路径" width="250">  

   </el‐table‐column>  

   <el‐table‐column prop="pagePhysicalPath" label="物理路径" width="250">  

   </el‐table‐column>   

  <el‐table‐column prop="pageCreateTime" label="创建时间" width="180" > 

    </el‐table‐column>  

 </el‐table>    

 <el‐pagination  

     layout="prev, pager, next"   

    :page‐size="this.params.size"   

    v‐on:current‐change="changePage"   

    :total="total" :current‐page="this.params.page" style="float:right;">    

 </el‐pagination>   

</div> </template>  

 <script> 

  export default {  

   data() {    

   return {   

      list:[],   

      total:50,   

     params:{    

       page:1,//页码  

         size:2//每页显示个数      

   }   

    }  

   },  

   methods:{

      //分页查询

[AppleScript] 纯文本查看 复制代码

 changePage:function () {    

     this.query()

       },   

    //查询    

   query:function () {   

      alert("查询")    

   }  

   }

   } </script> 

2、测试


3.2 Api调用
3.2.1 Api方法定义
在cms模块的api目录定义cms.js， 在cms.js中定义如下js方法，此方法实现http请求服务端页面查询接口。

[AppleScript] 纯文本查看 复制代码

//public是对axios的工具类封装，

定义了http请求方法 import http from './../../../base/api/public' export const page_list = (page,size,params) => {   return http.requestQuickGet('http://localhost:31001/cms/page/list/'+page+'/'+size) }

axios实现了http方法的封装，vue.js官方不再继续维护vue-resource,推荐使用 axios。   3.2.2 Api调用
前端页面导入cms.js，调用js方法请求服务端页面查询接口。 1）导入cms.js

[AppleScript] 纯文本查看 复制代码

  import * as cmsApi from '../api/cms'

在query方法中调用 page_list方法

[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