阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_20-CMS前端页面查询开发-页面原型-页面内容完善

访问swaggerUI的接口 得到返回的json数据，就是我们页面上要显示的数据

复制到页面的数据这里

 

[
      {
        "siteId": "5a751fab6abb5044e0d19ea1",
        "pageId": "5a754adf6abb500ad05688d9",
        "pageName": "index.html",
        "pageAliase": "首页-1",
        "pageWebPath": "/index.html",
        "pageParameter": null,
        "pagePhysicalPath": "F:\\develop\\xc_portal_static\\",
        "pageType": "0",
        "pageTemplate": null,
        "pageHtml": null,
        "pageStatus": null,
        "pageCreateTime": "2018-02-03T05:37:53.256+0000",
        "templateId": "5a962b52b00ffc514038faf7",
        "pageParams": null,
        "htmlFileId": "5a7c1c54d019f14d90a1fb23",
        "dataUrl": null
      },
      {
        "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": null
      },
      {
        "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
      },
      {
        "siteId": "5a751fab6abb5044e0d19ea1",
        "pageId": "5a92141cb00ffc5a448ff1a0",
        "pageName": "10101.html",
        "pageAliase": "课程详情页面",
        "pageWebPath": "/course/",
        "pageParameter": null,
        "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
        "pageType": "1",
        "pageTemplate": null,
        "pageHtml": null,
        "pageStatus": null,
        "pageCreateTime": "2018-02-25T01:37:25.974+0000",
        "templateId": "5a925be7b00ffc4b3c1578b5",
        "pageParams": [
          {
            "pageParamName": "courseid",
            "pageParamValue": "4028e581617f945f01617f9dabc40000"
          }
        ],
        "htmlFileId": "5a94d6c6b00ffc3ab4bfa4f4",
        "dataUrl": null
      },
      {
        "siteId": "5a751fab6abb5044e0d19ea1",
        "pageId": "5a94d79cb00ffc3ab4bfa4f6",
        "pageName": "4028e581617f945f01617f9dabc40000.html",
        "pageAliase": "课程详情页面",
        "pageWebPath": "/course/",
        "pageParameter": null,
        "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
        "pageType": "1",
        "pageTemplate": null,
        "pageHtml": null,
        "pageStatus": null,
        "pageCreateTime": "2018-02-27T03:59:21.353+0000",
        "templateId": "5a925be7b00ffc4b3c1578b5",
        "pageParams": [
          {
            "pageParamName": "courseid",
            "pageParamValue": "4028e581617f945f01617f9dabc40000"
          }
        ],
        "htmlFileId": "5aed94530e66185b64804c12",
        "dataUrl": null
      },
      {
        "siteId": "5a751fab6abb5044e0d19ea1",
        "pageId": "5a96114fb00ffc4b44f63e06",
        "pageName": "4028e58161bcf7f40161bcf8b77c0000.html",
        "pageAliase": "课程详情页面",
        "pageWebPath": "/course/",
        "pageParameter": null,
        "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
        "pageType": "1",
        "pageTemplate": null,
        "pageHtml": null,
        "pageStatus": null,
        "pageCreateTime": "2018-02-28T02:17:45.785+0000",
        "templateId": "5a925be7b00ffc4b3c1578b5",
        "pageParams": [
          {
            "pageParamName": "courseid",
            "pageParamValue": "4028e58161bcf7f40161bcf8b77c0000"
          }
        ],
        "htmlFileId": "5a962a07b00ffc514038faef",
        "dataUrl": null
      },
      {
        "siteId": "5a751fab6abb5044e0d19ea1",
        "pageId": "5a961ff6b00ffc5a9cdebaea",
        "pageName": "4028e58161bd22e60161bd23672a0001.html",
        "pageAliase": "课程详情页面",
        "pageWebPath": "/course/",
        "pageParameter": null,
        "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
        "pageType": "1",
        "pageTemplate": null,
        "pageHtml": null,
        "pageStatus": null,
        "pageCreateTime": "2018-02-28T03:20:20.988+0000",
        "templateId": "5a925be7b00ffc4b3c1578b5",
        "pageParams": [
          {
            "pageParamName": "courseid",
            "pageParamValue": "4028e58161bd22e60161bd23672a0001"
          }
        ],
        "htmlFileId": "5a962a0eb00ffc514038faf1",
        "dataUrl": null
      },
      {
        "siteId": "5a751fab6abb5044e0d19ea1",
        "pageId": "5a9620b9b00ffc5a9cdebaed",
        "pageName": "4028e58161bd3b380161bd3bcd2f0000.html",
        "pageAliase": "课程详情页面",
        "pageWebPath": "/course/",
        "pageParameter": null,
        "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
        "pageType": "1",
        "pageTemplate": null,
        "pageHtml": null,
        "pageStatus": null,
        "pageCreateTime": "2018-02-28T03:28:02.459+0000",
        "templateId": "5a925be7b00ffc4b3c1578b5",
        "pageParams": [
          {
            "pageParamName": "courseid",
            "pageParamValue": "4028e58161bd3b380161bd3bcd2f0000"
          }
        ],
        "htmlFileId": "5afc0e250e661870603bc0ed",
        "dataUrl": null
      },
      {
        "siteId": "5a751fab6abb5044e0d19ea1",
        "pageId": "5abefd525b05aa293098fca6",
        "pageName": "index2.html",
        "pageAliase": "ccc",
        "pageWebPath": "//fdsfs",
        "pageParameter": "",
        "pagePhysicalPath": "d:/html/",
        "pageType": "1",
        "pageTemplate": null,
        "pageHtml": null,
        "pageStatus": null,
        "pageCreateTime": "2018-03-31T03:14:49.771+0000",
        "templateId": "5abf57965b05aa2ebcfce6d1",
        "pageParams": null,
        "htmlFileId": "5abf5ce45b05aa073c7e5172",
        "dataUrl": "http://localhost:31001/cms/user/get/1"
      },
      {
        "siteId": "5a751fab6abb5044e0d19ea1",
        "pageId": "5ad92e9068db52404cad0f79",
        "pageName": "preview_402885816243d2dd016243f24c030002.html",
        "pageAliase": "课程预览页面",
        "pageWebPath": "/coursepre/",
        "pageParameter": null,
        "pagePhysicalPath": "F:/eduprojects/xc-edu-snapshotv1.0/xc-ui-pc-static-portal/course/preview/",
        "pageType": "1",
        "pageTemplate": null,
        "pageHtml": null,
        "pageStatus": null,
        "pageCreateTime": "2018-05-26T08:49:27.909+0000",
        "templateId": "5aec5dd70e661808240ab7a6",
        "pageParams": null,
        "htmlFileId": "5b091f97c5e9b7070c94a2bb",
        "dataUrl": "http://localhost:40200/portalview/course/getpre/402885816243d2dd016243f24c030002"
      }
    ]

 

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

 

加分页

Pagination组件

https://element.eleme.io/#/zh-CN/component/pagination

复制到table的下面

 

 <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>

 

分页显示的效果

分页显示在右边

让分页组件起作用

看文档


这里的total前面有冒号，相当于是v-bind的形式，这里省略的写法 ，前面只加一个冒号

在数据里面定义一个total


把这个total绑定在分页的属性上。


单独定义一个params属性



当前页的属性

查询按钮事件

methods下定义单击事件


改变当前页的事件


不知道怎么用可以在文档的页面全局的搜索一下


定义changePage的方法

<template>
  <div>
    <el-button type="primary" 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="180">
      </el-table-column>
      <el-table-column
        prop="pageWebPath"
        label="访问路径">
      </el-table-column>
      <el-table-column
        prop="pagePhyisicalPath"
        label="物理路径">
      </el-table-column>
      <el-table-column
        prop="pageCreateTime"
        label="创建时间">
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="param.size"
      @current-change="changePage"
      style="float: right;">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            "siteId": "5a751fab6abb5044e0d19ea1",
            "pageId": "5a754adf6abb500ad05688d9",
            "pageName": "index.html",
            "pageAliase": "首页-1",
            "pageWebPath": "/index.html",
            "pageParameter": null,
            "pagePhysicalPath": "F:\\develop\\xc_portal_static\\",
            "pageType": "0",
            "pageTemplate": null,
            "pageHtml": null,
            "pageStatus": null,
            "pageCreateTime": "2018-02-03T05:37:53.256+0000",
            "templateId": "5a962b52b00ffc514038faf7",
            "pageParams": null,
            "htmlFileId": "5a7c1c54d019f14d90a1fb23",
            "dataUrl": null
          },
          {
            "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": null
          },
          {
            "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
          },
          {
            "siteId": "5a751fab6abb5044e0d19ea1",
            "pageId": "5a92141cb00ffc5a448ff1a0",
            "pageName": "10101.html",
            "pageAliase": "课程详情页面",
            "pageWebPath": "/course/",
            "pageParameter": null,
            "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
            "pageType": "1",
            "pageTemplate": null,
            "pageHtml": null,
            "pageStatus": null,
            "pageCreateTime": "2018-02-25T01:37:25.974+0000",
            "templateId": "5a925be7b00ffc4b3c1578b5",
            "pageParams": [
              {
                "pageParamName": "courseid",
                "pageParamValue": "4028e581617f945f01617f9dabc40000"
              }
            ],
            "htmlFileId": "5a94d6c6b00ffc3ab4bfa4f4",
            "dataUrl": null
          },
          {
            "siteId": "5a751fab6abb5044e0d19ea1",
            "pageId": "5a94d79cb00ffc3ab4bfa4f6",
            "pageName": "4028e581617f945f01617f9dabc40000.html",
            "pageAliase": "课程详情页面",
            "pageWebPath": "/course/",
            "pageParameter": null,
            "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
            "pageType": "1",
            "pageTemplate": null,
            "pageHtml": null,
            "pageStatus": null,
            "pageCreateTime": "2018-02-27T03:59:21.353+0000",
            "templateId": "5a925be7b00ffc4b3c1578b5",
            "pageParams": [
              {
                "pageParamName": "courseid",
                "pageParamValue": "4028e581617f945f01617f9dabc40000"
              }
            ],
            "htmlFileId": "5aed94530e66185b64804c12",
            "dataUrl": null
          },
          {
            "siteId": "5a751fab6abb5044e0d19ea1",
            "pageId": "5a96114fb00ffc4b44f63e06",
            "pageName": "4028e58161bcf7f40161bcf8b77c0000.html",
            "pageAliase": "课程详情页面",
            "pageWebPath": "/course/",
            "pageParameter": null,
            "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
            "pageType": "1",
            "pageTemplate": null,
            "pageHtml": null,
            "pageStatus": null,
            "pageCreateTime": "2018-02-28T02:17:45.785+0000",
            "templateId": "5a925be7b00ffc4b3c1578b5",
            "pageParams": [
              {
                "pageParamName": "courseid",
                "pageParamValue": "4028e58161bcf7f40161bcf8b77c0000"
              }
            ],
            "htmlFileId": "5a962a07b00ffc514038faef",
            "dataUrl": null
          },
          {
            "siteId": "5a751fab6abb5044e0d19ea1",
            "pageId": "5a961ff6b00ffc5a9cdebaea",
            "pageName": "4028e58161bd22e60161bd23672a0001.html",
            "pageAliase": "课程详情页面",
            "pageWebPath": "/course/",
            "pageParameter": null,
            "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
            "pageType": "1",
            "pageTemplate": null,
            "pageHtml": null,
            "pageStatus": null,
            "pageCreateTime": "2018-02-28T03:20:20.988+0000",
            "templateId": "5a925be7b00ffc4b3c1578b5",
            "pageParams": [
              {
                "pageParamName": "courseid",
                "pageParamValue": "4028e58161bd22e60161bd23672a0001"
              }
            ],
            "htmlFileId": "5a962a0eb00ffc514038faf1",
            "dataUrl": null
          },
          {
            "siteId": "5a751fab6abb5044e0d19ea1",
            "pageId": "5a9620b9b00ffc5a9cdebaed",
            "pageName": "4028e58161bd3b380161bd3bcd2f0000.html",
            "pageAliase": "课程详情页面",
            "pageWebPath": "/course/",
            "pageParameter": null,
            "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
            "pageType": "1",
            "pageTemplate": null,
            "pageHtml": null,
            "pageStatus": null,
            "pageCreateTime": "2018-02-28T03:28:02.459+0000",
            "templateId": "5a925be7b00ffc4b3c1578b5",
            "pageParams": [
              {
                "pageParamName": "courseid",
                "pageParamValue": "4028e58161bd3b380161bd3bcd2f0000"
              }
            ],
            "htmlFileId": "5afc0e250e661870603bc0ed",
            "dataUrl": null
          },
          {
            "siteId": "5a751fab6abb5044e0d19ea1",
            "pageId": "5abefd525b05aa293098fca6",
            "pageName": "index2.html",
            "pageAliase": "ccc",
            "pageWebPath": "//fdsfs",
            "pageParameter": "",
            "pagePhysicalPath": "d:/html/",
            "pageType": "1",
            "pageTemplate": null,
            "pageHtml": null,
            "pageStatus": null,
            "pageCreateTime": "2018-03-31T03:14:49.771+0000",
            "templateId": "5abf57965b05aa2ebcfce6d1",
            "pageParams": null,
            "htmlFileId": "5abf5ce45b05aa073c7e5172",
            "dataUrl": "http://localhost:31001/cms/user/get/1"
          },
          {
            "siteId": "5a751fab6abb5044e0d19ea1",
            "pageId": "5ad92e9068db52404cad0f79",
            "pageName": "preview_402885816243d2dd016243f24c030002.html",
            "pageAliase": "课程预览页面",
            "pageWebPath": "/coursepre/",
            "pageParameter": null,
            "pagePhysicalPath": "F:/eduprojects/xc-edu-snapshotv1.0/xc-ui-pc-static-portal/course/preview/",
            "pageType": "1",
            "pageTemplate": null,
            "pageHtml": null,
            "pageStatus": null,
            "pageCreateTime": "2018-05-26T08:49:27.909+0000",
            "templateId": "5aec5dd70e661808240ab7a6",
            "pageParams": null,
            "htmlFileId": "5b091f97c5e9b7070c94a2bb",
            "dataUrl": "http://localhost:40200/portalview/course/getpre/402885816243d2dd016243f24c030002"
          }
        ],
        total: 50,
        param: {
          page: 1,
          size: 10
        }
      }
    },
    methods: {
      query: function () {
        alert('查询')
      },
      changePage: function () {
        this.query()
      }
    }
  }
</script>