Java的新项目学成在线笔记-day2(三）

3.1.3页面内容完善
根据需求完善页面内容，完善列表字段，添加分页组件。

<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:{
//分页查询

changePage:function () {
this.query()
},
//查询
query:function () {
alert("查询")
}
}
} </script
3323
>

2、测试

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

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

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

在query方法中调用 page_list方法

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