阶段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中提供服务注册中 心来管理微服务信息. 为什么 要用注册中心 ...
随机推荐
- 队列（queue）和堆栈（stack）的学习
队列 1 . 先进先出 .队列尾进行插入,队列头进行删除,获取,修改. -----first come ,first served . --first in .first out ...
- mongodb的基本操作之数据创建索引
在数据量较少时,不使用索引,查询是很快的,但是在数据量较大时,查询将会变得非常缓慢,在mongodb中 查看索引 > db.test_collection.getIndexes() [ { &q ...
- tp5 sum某个字段相加得到总数
方法 说明count 统计数量,参数是要统计的字段名(可选)max 获取最大值,参数是要统计的字段名(必须)min 获取最小值,参数是要统计的字段名(必须)avg 获取平均值,参数是要统计的字段名(必 ...
- Nginx的简单了解与使用
一.产生背景 我们日常生活中经常遇到的问题 这是几年前的12306,现在的12306基本上不会出现这样的问题了 上述场景产生的主要 2 大原因:1.巨大流量2.单台服务器资源和能力有限在海量并发的环境 ...
- 前端笔记-html
前端笔记html 前端三大利器,html(本源),css(着装),js(动作) html 学习html就是学习一套规则能够被浏览器识别,在页面中展示,一个页面只能运行一个html 标签 <> ...
- 利用Js的console对象，在控制台打印调式信息测试Js
一次偶然的机会,打开百度的时候按下了F12,然后就见控制台里面输出了百度的招聘广告,感觉挺帅气的,再然后就有了这篇博文. 既然可以这样在控制台输出信息,那以后再调试Js的时候不就可以省去很多麻烦了嘛! ...
- Python操作MySQL数据库，插入重复数据
sql = "INSERT INTO test_c(id,name,sex)values(%s,%s,%s)" param = (1,'AJ','MAN') n = cursor ...
- 题解 [ZJOI2010]基站选址
题解 [ZJOI2010]基站选址 题面 解析 首先考虑一个暴力的DP, 设\(f[i][k]\)表示第\(k\)个基站设在第\(i\)个村庄,且不考虑后面的村庄的最小费用. 那么有\(f[i][k] ...
- P3474 [POI2008]KUP-Plot purchase
思路:单调栈 提交:>5次 错因:单调栈写法有问题+前缀和写错 题解: 若有\(>=k\ \&\&\ <=2\times k\)的点,显然直接选他就行了. 否则,我们 ...
- 034_非交互自动生成 SSH 密钥文件
#!/bin/bash#-t 指定 SSH 密钥的算法为 RSA 算法;-N 设置密钥的密码为空;-f 指定生成的密钥文件存放在哪里 rm -rf ~/.ssh/{known_hosts,id_rsa ...