阶段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中提供服务注册中 心来管理微服务信息. 为什么 要用注册中心 ...
随机推荐
- Windows工作原理
Windows工作原理中心思想 Windows工作原理的中心思想就是“动态链接”概念.Windows自身带有一大套函数,应用程序就是通过调用这些函数来实现它的用户界面和在屏幕上显示文本与图形的.这些函 ...
- OpenCV VideoCapture.get()参数详解
转自https://blog.csdn.net/u011436429/article/details/80604590 方便查阅
- 火狐新版移除developer Toolbar和无法关闭自动更新的解决
随着火狐的不断更新已经更新到66版本了,近期注意到有个问题是火狐经常提示更新,更新了没多久,又时不时跳出更新的提示,不胜其烦. 在火狐的前期的版本中(大概4年之前吧)在Options菜单里是可以设置从 ...
- mysql全量和增量备份详解（带脚本）
在日常运维工作中,对mysql数据库的备份是万分重要的,以防在数据库表丢失或损坏情况出现,可以及时恢复数据. 下面对这种备份方案详细说明下:1.MySQLdump增量备份配置执行增量备份的前提条件是M ...
- [原创]VSCode debug jest的配置
重拾JS的路从修改JS源码开始,修改JS源码从源码自带的test code开始.源码的test code使用了jtest框架,从test code刚好可以看到要修改部分的 多种传值方式,以及函数输出结 ...
- 开发中少不了的Fun -- 前端本地存储
存储sessionStorage function setSessionStore (name, content) { if (!name) return if (typeof content !== ...
- 简单的JAVAWeb选课系统
该系统管理员可以添加和删除学生.教师,教师可以修改自己信息.添加课程.浏览自己课程,学生可以修改自己的信息.选课.浏览全部课程. 首先展示文件: 然后就是一次展示代码: Guanli包中代码: pac ...
- Java8-ConcurrentUtils
import java.util.concurrent.ExecutorService; import java.util.concurrent.TimeUnit; public class Conc ...
- Python3之使用Crypto
pip3 install pycryptodome 快速方式:pip3 install -i https://pypi.douban.com/simple pycryptodome PyCrypto ...
- axios并行请求
有些操作需要在几个异步请求都完成之后再执行,虽然一个Ajax可以放到另一个Ajax完成的回调里面,但这样很容易导致回调地狱,且代码也极其不美观. 幸运的是axios提供了并行请求的方法, 使用方法: ...