阶段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中提供服务注册中 心来管理微服务信息. 为什么 要用注册中心 ...
随机推荐
- FTP下载文件和操作系统的关系
标题不知道该怎么写了. 最近调试AGPS,嵌入式设备需要从FTP服务器上下载星历数据,星历数据是二进制数据.嵌入式设备下载完数据后和原始数据对比,发现数据量变大了(但是通过pc端的FTP软件下载下来的 ...
- IntelliJ IDEA常用快捷键整合
一.视图查看 Ctrl+F12 查看file,method结构图.类继承机构图 (不知道方法结构,Ctrl+F12一下,方法,参数,返回值,一清二楚的展现出来) Ctrl+shift+Alt+U ...
- 用js刷剑指offer(替换空格)
题目描述 请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 牛客网链接 js代码 func ...
- Kinect for Windows SDK开发入门(三)：基础知识 下
原文来自:http://www.cnblogs.com/yangecnu/archive/2012/04/02/KinectSDK_Application_Fundamentals_Part2.htm ...
- Java字节码方法表结构深度剖析
继续上一次[https://www.cnblogs.com/webor2006/p/9459681.html]的字节码分析,这次来分析一下最为复杂的方法表的信息,如下: 而上一次分析到了属性表的位置在 ...
- php中unserialize 返回false的解决方法
serialize 序列化 unserialize 反序列化 $content = 'a:5:{s:4:"img1";s:5:"35568";s:4:" ...
- linux实操_shell读取控制台输入
基本语法: read [选项] [参数] 选项: -p 指定读取值时的提示符 -t 指定读取值时等待的时间(秒),如果没有在指定的时间内输入,就不再等待了 参数: 变量:指定读取值的变量名 实例1:读 ...
- Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- 13、Spring Boot 2.x 多数据源配置
1.13 Spring Boot 2.x 多数据源配置 完整源码: Spring-Boot-Demos
- Node.js 调试小技巧
小技巧--使用 supervisor如果你有 PHP 开发经验,会习惯在修改 PHP 脚本后直接刷新浏览器以观察结果,而你在开发 Node.js 实现的 HTTP 应用时会发现,无论你修改了代码的哪一 ...