页面内容完善
启动java的cms项目
打开swagger
复制结果集的列表数据,放入page_list.vue
<template>
<div>
<el-button type="primary" size="small">查询</el-button>
<el-table
:data="tableData"
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>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5a795ac7dd573c04508f3a56",
"pageName": "index_banner.html",
"pageAliase": "轮播图",
"pageWebPath": "/include/index_banner.html",
"pageParameter": null,
"pagePhysicalPath": "F:\\develop\\xc_portal_static\\include\\",
"pageType": "0",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-02-06T07:34:21.255+0000",
"templateId": "5a962bf8b00ffc514038fafa",
"pageParams": null,
"htmlFileId": "5a795bbcdd573c04508f3a59",
"dataUrl": "http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f"
},
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5a7be667d019f14d90a1fb1c",
"pageName": "index_category.html",
"pageAliase": "分类导航",
"pageWebPath": "/include/index_category.html",
"pageParameter": null,
"pagePhysicalPath": "F:\\develop\\xc_portal_static\\include\\",
"pageType": "0",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-02-08T05:55:07.590+0000",
"templateId": "5a962c16b00ffc514038fafd",
"pageParams": null,
"htmlFileId": "5a7be8e4d019f14d90a1fb21",
"dataUrl": null
},]
}
}
}
</script>
<style>
</style>
根据需求完善页面内容,完善列表字段,添加分页组件。
预览效果如下:
添加分页
<template>
<div>
<el-button type="primary" size="small" v-on:click="query">查询</el-button>
<el-table
:data="tableData"
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-col :span="24" class="toolbar">
<el-pagination background layout="prev, pager, next" @current-change="changePage" :page-size="params.size"
:total="total" :current-page="params.page"
style="float:right;">
</el-pagination>
</el-col>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5a795ac7dd573c04508f3a56",
"pageName": "index_banner.html",
"pageAliase": "轮播图",
"pageWebPath": "/include/index_banner.html",
"pageParameter": null,
"pagePhysicalPath": "F:\\develop\\xc_portal_static\\include\\",
"pageType": "0",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-02-06T07:34:21.255+0000",
"templateId": "5a962bf8b00ffc514038fafa",
"pageParams": null,
"htmlFileId": "5a795bbcdd573c04508f3a59",
"dataUrl": "http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f"
},
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5a7be667d019f14d90a1fb1c",
"pageName": "index_category.html",
"pageAliase": "分类导航",
"pageWebPath": "/include/index_category.html",
"pageParameter": null,
"pagePhysicalPath": "F:\\develop\\xc_portal_static\\include\\",
"pageType": "0",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-02-08T05:55:07.590+0000",
"templateId": "5a962c16b00ffc514038fafd",
"pageParams": null,
"htmlFileId": "5a7be8e4d019f14d90a1fb21",
"dataUrl": null
},
],
total:50,
params:{
page:1,//页码
size:2,//每页显示个数
},
}
}
,
methods:{
changePage(){
this.query()
},
query(){
alert('查询列表');
}
},
}
</script>
<style>
</style>
不会写的时候,可以搜索关键词进行模仿学习