【 CMS页面管理开发】文章

1 MognoDB 自定义条件查询 1.1 需求分析在页面输入查询条件，查询符合条件的页面信息。
查询条件如下：
站点Id：精确匹配
模板Id：精确匹配
页面别名：模糊匹配
…
1.2 服务端 1.2.1 Dao
使用 findAll(Example var1, Pageable var2)方法实现，无需定义。
下边测试 findAll 方法实现自定义条件查询：

//自定义条件查询测试 @Test public void testFindAll() { //条件匹配器 ExampleMatcher exampleMatcher = ExampleMatcher.matching(); exampleMatcher = exampleMatcher.withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains()); //页面别名模糊查询，需要自定义字符串的匹配器实现模糊查询 //ExampleMatcher.GenericPropertyMatchers.contains() 包含 //ExampleMatcher.GenericPropertyMatchers.startsWith()//开头匹配//条件值 CmsPage cmsPage = new CmsPage(); //站点ID cmsPage.setSiteId("5a751fab6abb5044e0d19ea1"); //模板ID cmsPage.setTemplateId("5a962c16b00ffc514038fafd"); // cmsPage.setPageAliase("分类导航"); //创建条件实例 Example example = Example.of(cmsPage, exampleMatcher); Pageable pageable = new PageRequest(0, 10); Page all = cmsPageRepository.findAll(example, pageable); System.out.println(all); }

1.2.2 Service
在 PageService 的 findlist 方法中增加自定义条件查询代码

/** * 页面查询方法 * @param page 页码，从1开始记数; 但是调用dao时是从0开始 * @param size 每页记录数 * @param queryPageRequest 查询条件 * @return */ public QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest){ if(queryPageRequest == null){ queryPageRequest = new QueryPageRequest(); } //自定义条件查询 //定义条件匹配器 ExampleMatcher exampleMatcher = ExampleMatcher.matching() .withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains()); //条件值对象 CmsPage cmsPage = new CmsPage(); //设置条件值（站点id） if(StringUtils.isNotEmpty(queryPageRequest.getSiteId())){ cmsPage.setSiteId(queryPageRequest.getSiteId()); } //设置模板id作为查询条件 if(StringUtils.isNotEmpty(queryPageRequest.getTemplateId())){ cmsPage.setTemplateId(queryPageRequest.getTemplateId()); } //设置页面别名作为查询条件 if(StringUtils.isNotEmpty(queryPageRequest.getPageAliase())){ cmsPage.setPageAliase(queryPageRequest.getPageAliase()); } //定义条件对象Example Example example = Example.of(cmsPage,exampleMatcher); //分页参数 if(page <=0){ page = 1; } page = page -1; if(size<=0){ size = 10; } Pageable pageable = PageRequest.of(page,size); Page all = cmsPageRepository.findAll(example, pageable); // 实现自定义条件查询并且分页查询 QueryResult queryResult = new QueryResult(); queryResult.setList(all.getContent()); // 数据列表 queryResult.setTotal(all.getTotalElements()); // 数据总记录数 QueryResponseResult queryResponseResult = new QueryResponseResult(CommonCode.SUCCESS,queryResult); return queryResponseResult; }

1.2.3 Controller
无需修改
1.2.4 测试
使用SwaggerUI测试

文章图片

文章图片

1.3 前端直接打开资料中的即可

文章图片

1.3.1 页面
1、增加查询表单

页面别名：查询

2、数据模型对象
增加siteList、pageAliase、siteId，如下：

data() { return { siteList:[],//站点列表 list: [], total:0, params:{siteId:'', pageAliase:'', page:1, size:10 } } }

3、在钩子方法中构建siteList站点列表

mounted(){ //当DOM元素渲染完成后调用query this.query() //初始化站点列表 this.siteList = [ { siteId:'5a751fab6abb5044e0d19ea1', siteName:'门户主站' }, { siteId:'102', siteName:'测试站' } ] }

1.3.2 Api调用
1、向服务端传递查询条件，修改 cms.js，如下：

import http from './../../../base/api/public' import querystring from 'querystring' let sysConfig = require('@/../config/sysConfig') let apiUrl = sysConfig.xcApiUrlPre; //页面查询 export const page_list = (page,size,params) =>{ //将params对象数据拼装成key/value串 let queryString =querystring.stringify(params); //请求服务端的页面查询接口 return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size+"?"+queryString); }

2、页面调用api方法

//页面查询 query:function(){ // alert('查询') //调用服务端的接口 cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{ //将res结果数据赋值给数据模型对象 this.list = res.queryResult.list; this.total = res.queryResult.total; })}

测试如下：

文章图片

文章图片

2 新增页面 2.1 新增页面接口定义 1、定义响应模型

/** * Created by mrt on 2018/3/31. */ @Data public class CmsPageResult extends ResponseResult { CmsPage cmsPage; public CmsPageResult(ResultCode resultCode,CmsPage cmsPage) { super(resultCode); this.cmsPage = cmsPage; } }

文章图片

2、定义添加Api
在api工程中添加接口：

//新增页面 @ApiOperation("新增页面") public CmsPageResult add(CmsPage cmsPage);

2.2 新增页面服务端开发 2.2.1 页面唯一索引
在 cms_page集合上创建页面名称、站点Id、页面webpath为唯一索引

文章图片

文章图片

2.2.2 Dao
1、添加根据页面名称、站点Id、页面webpath查询页面方法，此方法用于校验页面是否存在

public interface CmsPageRepository extends MongoRepository {//根据页面名称、站点Id、页面webpath查询 CmsPage findByPageNameAndSiteIdAndPageWebPath(String pageName, String siteId, String pageWebPath); }

2、使用 CmsPageRepository 提供的 save 方法。
2.2.3 Service

// 新增页面 public CmsPageResult add(CmsPage cmsPage){ //校验页面名称、站点Id、页面webpath的唯一性 //根据页面名称、站点Id、页面webpath去cms_page集合，如果查到说明此页面已经存在，如果查询不到再继续添加 CmsPage cmsPage1 = cmsPageRepository.findByPageNameAndSiteIdAndPageWebPath(cmsPage.getPageName(), cmsPage.getSiteId(), cmsPage.getPageWebPath()); if(cmsPage1==null){ //调用dao新增页面 cmsPage.setPageId(null); cmsPageRepository.save(cmsPage); return new CmsPageResult(CommonCode.SUCCESS,cmsPage); } //添加失败 return new CmsPageResult(CommonCode.FAIL,null); }

2.2.4 Controller

// 添加页面 @Override @PostMapping("/add") public CmsPageResult add(@RequestBody CmsPage cmsPage) { return pageService.add(cmsPage); }

2.2.5 接口测试

文章图片

成功响应结果：

文章图片

失败响应结果：

文章图片

2.3 新增页面前端开发 2.3.1 新增页面
2.3.1.1 编写page_add.vue页面使用Element-UI的form组件编写添加表单内容，页面效果如下：

文章图片

1、创建page_add.vue页面
2、配置路由
在cms模块的路由文件中配置“添加页面”的路由：

{path:'/cms/page/add',name:'新增页面',component: page_add,hidden:true}

注意：由于“添加页面”不需要显示为一个菜单，这里hidden设置为true隐藏菜单。
测试，在浏览器地址栏输入http://localhost:11000/#/cms/page/add
3、在页面列表添加“添加页面”的按钮
实际情况是用户进入页面查询列表，点击“新增页面”按钮进入新增页面窗口。
在查询按钮的旁边添加：

新增页面

说明：router-link是vue提供的路由功能，用于在页面生成路由链接，最终在html渲染后就是 to：目标路由地址
4、完善页面内容
代码如下：

Form Attributes说明：

model 表单数据对象
rules 表单验证规则

Form-Item Attributes说明：

prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
label 标签文本

详情属性及事件参考http://element.eleme.io/#/zh-CN/component/form
5、数据对象

data() { return { siteList:[], templateList:[], pageForm:{ siteId:'', templateId:'', pageName: '', pageAliase: '', pageWebPath: '', pageParameter:'', pagePhysicalPath:'', pageType:'', pageCreateTime: new Date() } } }, methods:{ addSubmit:function(){ alert("提交") } }

6、站点及模板数据（先使用静态数据）
在created钩子方法中定义，created是在html渲染之前执行，这里推荐使用created。

created:function(){ //初始化站点列表 this.siteList = [ { siteId:'5a751fab6abb5044e0d19ea1', siteName:'门户主站' }, { siteId:'102', siteName:'测试站' } ] //模板列表 this.templateList = [ { templateId:'5a962b52b00ffc514038faf7', templateName:'首页' }, { templateId:'5a962bf8b00ffc514038fafa', templateName:'轮播图' } ] }

7、测试预览
新增页面按钮：

文章图片

2.3.1.2 添加返回进入新增页面后只能通过菜单再次进入页面列表，可以在新增页面添加“返回”按钮，点击返回按钮返回到页面列表。

新增页面按钮带上参数

新增页面

说明：query表示在路由url上带上参数
2）定义返回方法
在page_add.vue上定义返回按钮

返回

在page_add.vue上定义返回方法

//返回 go_back:function () { this.$router.push({ path:'/cms/page/list', query:{ page:this.$route.query.page,//取出路由中的参数 siteId:this.$route.query.siteId } }) }

说明：this.$route.query 表示取出路由上的参数列表，有两个取路由参数的方法：

a、通过在路由上添加key/value串使用this.$route.query来取参数，例如：/router1?id=123 ,/router1?id=456 可以通过this.$route.query.id获取参数id的值。 b、通过将参数作为路由一部分进行传参数使用this.$route.params来获取，例如：定义的路由为/router1/:id ，请求/router1/123时可以通过this.$route.params.id来获取，此种情况用this.$route.query.id是拿不到的。

3）查询列表支持回显
进入查询列表，从url中获取页码和站点id并赋值给数据模型对象，从而实现页面回显。
url例子：http://localhost:12000/#/cms/page/list?page=2&siteId=5a751fab6abb5044e0d19ea1

created() { //从路由上获取参数 this.params.page = Number.parseInt(this.$route.query.page||1); this.params.siteId = this.$route.query.siteId||''; .....

小技巧：使用 ||返回第一个有效值
2.3.1.3 表单校验 1、配置校验规则：
Element-UI 的 Form 组件提供表单校验的方法：
在 form 属性上配置 rules（表单验证规则）

在数据模型中配置校验规则：

pageFormRules: { siteId:[ {required: true, message: '请选择站点', trigger: 'blur'} ], templateId:[ {required: true, message: '请选择模版', trigger: 'blur'} ], pageName: [ {required: true, message: '请输入页面名称', trigger: 'blur'} ], pageWebPath: [ {required: true, message: '请输入访问路径', trigger: 'blur'} ], pagePhysicalPath: [ {required: true, message: '请输入物理路径', trigger: 'blur'} ] }

更多的校验规则参考 http://element.eleme.io/#/zh-CN/component/form 中“表单验证”的例子。
2、点击提交按钮触发校验
1)在form表单上添加 ref属性（ref=“pageForm”）在校验时引用此表单对象

2）执行校验

this.$refs.pageForm.validate((valid) => { if (valid) { alert('提交'); } else { alert('校验失败'); return false; } })

2.3.2 Api调用
1、在cms.js中定义page_add方法。

//新增页面 export const page_add = params =>{ return http.requestPost(apiUrl+'/cms/page/add',params) }

2、添加事件
本功能使用到两个UI组件：
1、使用element-ui的message-box组件弹出确认提交窗口（http://element.eleme.io/#/zhCN/component/message-box）。

this.$confirm('确认提交吗？', '提示', {}).then(() => {｝）

2、使用 message组件提示操作结果（http://element.eleme.io/#/zh-CN/component/message）

this.$message({ message: '提交成功', type: 'success' })

完整的代码如下：

addSubmit:function(){ this.$refs['pageForm'].validate((valid) => { if (valid) {//表单校验成功 //确认提示 this.$confirm('您确认提交吗?', '提示', { }).then(() => { //调用page_add方法请求服务端的新增页面接口 cmsApi.page_add(this.pageForm).then(res=>{ //解析服务端响应内容 if(res.success){ /*this.$message({ message: '提交成功', type: 'success' })*/ this.$message.success("提交成功") //将表单清空 this.$refs['pageForm'].resetFields(); }else if(res.message){ this.$message.error(res.message) }else{ this.$message.error("提交失败") } }); })} }); }

下边是测试：
1、进入页面列表页面

文章图片

2、点击“增加页面”按钮

文章图片

3、输入页面信息点击“提交”
测试：

文章图片

文章图片

再次提交：

文章图片

3 修改页面修改页面用户操作流程：
1、用户进入修改页面，在页面上显示了修改页面的信息
2、用户修改页面的内容，点击“提交”，提示“修改成功”或“修改失败”
3.1 修改页面接口定义 【【 CMS页面管理开发】】修改页面需要定义的API如下：

//根据页面id查询页面信息 @ApiOperation("根据页面id查询页面信息") public CmsPage findById(String id); //修改页面 @ApiOperation("修改页面") public CmsPageResult edit(String id, CmsPage cmsPage);

说明：提交数据使用post、put都可以，只是根据http方法的规范，put方法是对服务器指定资源进行修改，所以这里使用put方法对页面修改进行修改。
3.2 修改页面服务端开发 3.2.1Dao
使用 Spring Data提供的findById方法完成根据主键查询。
使用 Spring Data提供的save方法完成数据保存。
3.2.2Service

//根据页面id查询页面 public CmsPage getById(String id){ Optional optional = cmsPageRepository.findById(id); if(optional.isPresent()){ CmsPage cmsPage = optional.get(); return cmsPage; } return null; }//修改页面 public CmsPageResult update(String id,CmsPage cmsPage){ //根据id从数据库查询页面信息 CmsPage one = this.getById(id); if(one != null){ //准备更新数据 //设置要修改的数据 //更新模板id one.setTemplateId(cmsPage.getTemplateId()); //更新所属站点 one.setSiteId(cmsPage.getSiteId()); //更新页面别名 one.setPageAliase(cmsPage.getPageAliase()); //更新页面名称 one.setPageName(cmsPage.getPageName()); //更新访问路径 one.setPageWebPath(cmsPage.getPageWebPath()); //更新物理路径 one.setPagePhysicalPath(cmsPage.getPagePhysicalPath()); //提交修改 cmsPageRepository.save(one); return new CmsPageResult(CommonCode.SUCCESS,one); } //修改失败 return new CmsPageResult(CommonCode.FAIL,null); }

3.2.3Controller
1、根据id查询页面

@Override @GetMapping("/get/{id}") public CmsPage findById(@PathVariable("id") String id) { return pageService.getById(id); }

2、保存页面信息

@Override @PutMapping("/edit/{id}")//这里使用put方法，http 方法中put表示更新 public CmsPageResult edit(@PathVariable("id")String id, @RequestBody CmsPage cmsPage) { return pageService.update(id, cmsPage); }

测试：使用 Swagger UI 测试
3.3 修改页面前端开发 3.3.1 页面处理流程
页面的处理流程如下：
1、进入页面，通过钩子方法请求服务端获取页面信息，并赋值给数据模型对象
2、页面信息通过数据绑定在表单显示
3、用户修改信息点击“提交”请求服务端修改页面信息接口
3.3.3 修改页面
3.3.3.1 编写page_edit页面修改页面的布局同添加页面，可以直接复制添加页面，在添加页面基础上修改。
下边编写页面内容：
1、编写page_edit.vue
页面布局同添加页面，略。
2、配置路由
进入修改页面传入pageId

import page_edit from '@/module/cms/page/page_edit.vue'; { path: '/cms/page/edit/:pageId', name:'修改页面',component: page_edit,hidden:true},

3、在页面列表添加“编辑”链接
参考table组件的例子，在page_list.vue上添加“操作”列

编写edit方法

edit:function(pageId){ //打开修改页面 this.$router.push({ path:'/cms/page/edit/'+pageId }) }

4、测试预览

文章图片

点击“编辑”打开修改页面窗口。
3.3.3.2 页面内容显示本功能实现：进入修改页面立即显示要修改的页面信息。
1、定义api方法

//根据id查询页面 export const page_get = id =>{ return http.requestQuickGet(apiUrl+'/cms/page/get/'+id) }

2、定义数据对象
进入修改页面传入pageId参数，在数据模型中添加pageId

data(){ return { ...... //页面id pageId:'', ...... } }

3、在created钩子方法中查询页面信息

created: function () { this.pageId=this.$route.params.pageId; //根据主键查询页面信息 cmsApi.page_get(this.pageId).then((res) => { console.log(res); if(res){ this.pageForm = res; } }); }

7、预览页面回显效果

文章图片

3.3.4 Api调用
1、定义api方法

//修改页面提交 export const page_edit = (id,params) =>{ return http.requestPut(apiUrl+'/cms/page/edit/'+id,params) }

2、提交按钮方法
添加提交按钮事件：

提交

3、提交按钮事件内容：

editSubmit(){ this.$refs.pageForm.validate((valid) => {//表单校验 if (valid) {//表单校验通过 this.$confirm('确认提交吗？', '提示', {}).then(() => { this.addLoading = true; //修改提交请求服务端的接口 cmsApi.page_edit(this.pageId,this.pageForm).then((res) => { console.log(res); if(res.success){ this.addLoading = false; this.$message({ message: '提交成功', type: 'success' }); //返回 this.go_back(); }else{ this.addLoading = false; this.$message.error('提交失败'); } }); }); } }); }}

4、测试
修改页面信息，点击提交。
4 删除页面用户操作流程：
1、用户进入用户列表，点击“删除”
2、执行删除操作，提示“删除成功”或“删除失败”
4.1 删除页面接口定义

//删除页面 @ApiOperation("删除页面") public ResponseResult delete(String id);

4.2 删除页面服务端开发 4.2.1Dao
使用 Spring Data提供的deleteById方法完成删除操作。
4.2.2 Service

//根据id删除页面 public ResponseResult delete(String id){ //先查询一下 Optional optional = cmsPageRepository.findById(id); if(optional.isPresent()){ cmsPageRepository.deleteById(id); return new ResponseResult(CommonCode.SUCCESS); } return new ResponseResult(CommonCode.FAIL); }

4.2.3 Controller

@Override @DeleteMapping("/del/{id}") public ResponseResult delete(@PathVariable("id") String id) { return pageService.delete(id); }

4.3 删除页面前端开发 4.3.1 Api方法

/*页面删除*/ export const page_del = id => { return http.requestDelete(apiUrl+'/cms/page/del/'+id) }

4.3.2编写页面
1、在page_list.vue页面添加删除按钮

2、删除事件

//删除 del:function (pageId) { this.$confirm('您确认删除吗?', '提示', { }).then(() => {//调用服务端接口 cmsApi.page_del(pageId).then(res=>{if(res.success){ this.$message.success("删除成功") //刷新页面 this.query() }else{ this.$message.error("删除失败") } }) })} },

5 实战此部分为自学内容，根据今天所学知识完成下边的任务。
5.1 查询条件完善页面查询条件增加：页面名称、页面类型。
页面名称对应CmsPage模型类中的pageName属性。
页面类型对应CmsPage模型类中的pageType属性。
查询要求：
页面名称：模糊查询
页面类型：精确匹配，页面类型包括：静态和动态，在数据库中静态用“0”表示，动态用“1”表示。
5.2 页面属性增加DataUrl 在CmsPage.java模型类型中有一个dataUrl属性，此属性在页面静态化时需要填写。
本需求要求：
1、在新增页面增加dataUrl输入框，并支持添加。
2、在修改页面增加dataUrl输入框，并支持修改