阶段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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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="">
</el‐table‐column>
<el‐table‐column prop="pageName" label="页面名称" width="">
</el‐table‐column>
<el‐table‐column prop="pageAliase" label="别名" width="">
</el‐table‐column>
<el‐table‐column prop="pageType" label="页面类型" width="">
</el‐table‐column>
<el‐table‐column prop="pageWebPath" label="访问路径" width="">
</el‐table‐column>
<el‐table‐column prop="pagePhysicalPath" label="物理路径" width="">
</el‐table‐column>
<el‐table‐column prop="pageCreateTime" label="创建时间" width="" >
</el‐table‐column>
</el‐table>
加分页
Pagination组件
https://element.eleme.io/#/zh-CN/component/pagination
复制到table的下面
<el-pagination
layout="prev, pager, next"
:total="">
</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="">
</el-table-column>
<el-table-column
prop="pageName"
label="页面名称"
width="">
</el-table-column>
<el-table-column
prop="pageAliase"
label="别名"
width="">
</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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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: ,
param: {
page: ,
size:
}
}
},
methods: {
query: function () {
alert('查询')
},
changePage: function () {
this.query()
}
}
}
</script>
完整代码
阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_20-CMS前端页面查询开发-页面原型-页面内容完善的更多相关文章
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_16-页面静态化-模板管理-模板制作
这是轮播图的原始文件 运行门户需要把 nginx启动起来 单独运行轮播图.把里面的css的引用都加上网址的url 这就是单独访问到的轮播图的效果 轮播图模板的地址: 阶段5 3.微服务项目[学成在线] ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程
提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_03-用户认证技术方案-Oauth2协议
2.2 Oauth2认证 2.2.1 Oauth2认证流程 第三方认证技术方案最主要是解决认证协议的通用标准 问题,因为要实现 跨系统认证,各系统之间要遵循一定的 接口协议. OAUTH协议为用户资源 ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_01-用户认证需求分析
1.1 用户认证与授权 截至目前,项目已经完成了在线学习功能,用户通过在线学习页面点播视频进行学习.如何去记录学生的学习过程 呢?要想掌握学生的学习情况就需要知道用户的身份信息,记录哪个用户在什么时间 ...
- 阶段5 3.微服务项目【学成在线】_day18 用户授权_10-前端集成认证授权-需求分析
4 前端集成认证授权 4.1 需求分析 截至目前认证授权服务端的功能已基本完成,本章实现前端集成认证授权功能. 前端集成认证授权功能需要作如下工作: 1.前端页面校验用户的身份,如果用户没有登录则跳转 ...
- 微服务项目开发学成在线_day02 CMS前端开发
1 Vue.js与Webpack研究 开发版的浏览器:https://www.google.cn/intl/zh-CN/chrome/dev/ 前端的开发框架:微服务项目开发学成在线_Vue.js与W ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_05-Feign远程调用-客户端负载均衡介绍
2 Feign远程调用 在前后端分离架构中,服务层被拆分成了很多的微服务,服务与服务之间难免发生交互,比如:课程发布需要调用 CMS服务生成课程静态化页面,本节研究微服务远程调用所使用的技术. 下图是 ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_02-Eureka注册中心-搭建Eureka单机环境
我们先搭建单机环境 govern是治理的意思, 这样就把工程创建好了 创建包 创建SpringBoot的启动类. 在父工程里面已经确定了Spring Cloud的版本了.相当于锁定了版本 接下里只需要 ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_04-Eureka注册中心-将服务注册到Eureka Server
cms相当于客户端 配置客户端的信息 后面加逗号分隔开 50102表示向两台eureka服务上报服务,如果有一台死掉了 那么还可以上另外的一台去注册服务 直接把ip注册到eureka 启动类加注解 重 ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_01-Eureka注册中心-Eureka介绍
1 Eureka注册中心 1.1 需求分析 在前后端分离架构中,服务层被拆分成了很多的微服务,微服务的信息如何管理?Spring Cloud中提供服务注册中 心来管理微服务信息. 为什么 要用注册中心 ...
随机推荐
- runtime环境下的jade
jade除了支持服务器端,jade也支持客户端 runtime.jade div h3 jade runtime call p this is from jade pre compile 命令行执 ...
- mongodb模式模型设计及编码-Mongoose
走到这一步,我们的网站还不能称为动态的网站,因为所要的数据都是伪造的,所以现在要对数据库的模型进行设计 Mongoose 我们用到的工具模块是Mongoose,他能对Mongodb进行建模的这样一 ...
- tensorflow实战笔记（20）----textRNN
https://www.cnblogs.com/jiangxinyang/p/10208227.html https://www.cnblogs.com/jiangxinyang/p/10241243 ...
- MySQL进阶 9: 联合查询 - 查询语句1 union 查询语句2 union ...
#进阶 : 联合查询 /* union 联合 合并: 将多条查询语句的结果合并成一个结果 语法: 查询语句1 union 查询语句2 union ... 应用语境: 要查询的结果来自多个表,但查询的列 ...
- Struts2入门2
五.Struts2的工作原理及文件结构 Struts2过滤与自己相关的请求,比如.action后缀的请求,Struts2会进行过滤和处理,但如果是.html或者.jsp,Struts2不会对其进行处理 ...
- AutoMapper 的简单使用
var config = new MapperConfiguration( cfg => cfg.CreateMap<SYS_Menu, MenuTreeNode>() .ForMe ...
- ES6-21.class基本语法
1.简介(详情参考) class是构造函数的语法糖. class的constructor方法内的实现,就是原来构造函数的实现. class内的所有方法都是在prototype上的,就是原来构造函数的p ...
- 客户端xml
package lct.conference.common; import java.io.IOException;import java.io.PrintWriter;import java.net ...
- 使List<userClass>.Contains可以查找重復的對象
List.Contains实现对比 http://blog.csdn.net/yswucn/article/details/4091469
- OSI七层协议模型
OSI七层模型详解 TCP/IP协议 链接:https://www.nowcoder.com/questionTerminal/b2ccf60bbb13483b94b4bffe200b4f3c 来源: ...