20-CMS前端页面查询开发-页面原型-页面内容完善

页面内容完善

启动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>

不会写的时候，可以搜索关键词进行模仿学习