xm

页面条件查询接口 需求分析 在页面输入查询条件，查询符合条件的页面信息。 查询条件如下： 站点Id：精确匹配 模板Id：精确匹配 页面别名：模糊匹配 服务端 Dao 使用 CmsPageRepository中的findAll(Example<S> var1, Pageable var2)方法实现，无需定义。 下边测试fifindAll方法实现自定义条件查询： //页面条件查询测试dao @Test public void testFindAllByExample() { Pageable pageable = PageRequest.of(0, 10); //创建条件匹配器,注意匹配器每返回一个引用,在创建就是一个新对象了 //可以链式调用实现多条件 ExampleMatcher exampleMatcher = ExampleMatcher.matching() //要匹配的字段,和查询方式 //contains:模糊匹配 startWith:开头匹配 等等 .withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains()); // .withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.startsWith()); CmsPage cmsPage = new CmsPage(); cmsPage.setPageAliase("分类导航"); Example<CmsPage> example = Example.of(cmsPage,exampleMatcher); Page<CmsPage> all = cmsPageRepository.findAll(example, pageable); System.out.println(all); } Service 由于前面编写了普通查询,也将封装的条件查询类QueryPageRequest也传入参数中 ​ 因此,对之前的进行改造: 定义条件查询对象Example,在定义条件值类型对象,cmsPage 由于只有页面别名为条件匹配,其他为精确匹配,因此定义ExampleMacher条件匹配器,传入匹配字段,和查询方式 使用lang3工具类公的isNotEmpty方法判断三个查询参数,存在就设置进去 在findAll方法中将example对象传入,测试 »

创建组件 页面效果 ​ 创建page_add.vue页面 配置路由 在cms模块的路由文件中配置“添加页面”的路由： {path:'/cms/page/add',name:'新增页面',component: page_add,hidden:true} 注意：由于“添加页面”不需要显示为一个菜单，这里hidden设置为true隐藏菜单。 测试，在浏览器地址栏输入http://localhost:11000/#/cms/page/add 在页面列表添加“添加页面”的按钮 实际情况是用户进入页面查询列表，点击“新增页面”按钮进入新增页面窗口。 在查询按钮的旁边添加： <router-link :to="{path:'/cms/page/add'}" > <el-button type="primary" size="small">新增页面</el-button> </router-link> :to为点击后跳转到相应路由 说明：router-link是vue提供的路由功能，用于在页面生成路由链接，最终在html渲染后就是标签。 page_add页面 <!-- pageForm就是page绑定的数据对象的名称--> <el-form :model="pageForm" label-width="80px" > <el-form-item label="所属站点" prop="siteId"> <el-select v-model="pageForm.siteId" placeholder="请选择站点"> <el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId"> </el-option> </el-select> </el-form-item> <el-form-item label="选择模板" prop="templateId"> <el-select v-model="pageForm.templateId" placeholder="请选择模板"> <el-option v-for="item in templateList" :key="item.templateId" :label="item.templateName" :value="item.templateId"> </el-option> </el-select> </el-form-item> <el-form-item label="页面名称" prop="pageName"> <el-input v-model="pageForm.pageName" auto-complete="off" ></el-input> </el-form-item> <el-form-item label="别名" prop="pageAliase"> <el-input v-model="pageForm. »

新增页面接口 定义响应模型 /** * 继承通用的responseResult响应类, * 在构造方法中添加模型类参数 */ @Data public class CmsPageResult extends ResponseResult { CmsPage cmsPage; public CmsPageResult(ResultCode resultCode,CmsPage cmsPage) { super(resultCode); this.cmsPage = cmsPage; } } 加上CmsPage参数是因为前端可能或使用到返回的数据对象 定义Api接口 /** * 新增页面 */ @ApiOperation("新增页面接口") public CmsPageResult addPage(CmsPage cmsPage); Service /** * 页面新增 * @param cmsPage * @return */ public CmsPageResult addPage(CmsPage cmsPage) { //校验页面名称,webPath,页面名称唯一性 //根据上述去页面查询集合,查到就说明已存在,查询不到就可以添加 CmsPage cmsPage1 = cmsPageRepository.findByPageNameAndSiteIdAndPageWebPath(cmsPage.getPageName(), cmsPage.getSiteId(), cmsPage.getPageWebPath()); if (cmsPage1 == null) { //调用dao,新增页面 /** * 这里因为cms_page页面pageId为主键,所以避免人为设置, * 不管有没有都将其置为空,让mongoDB的自增长自动生成主键 */ cmsPage. »

修改页面前端开发 修改页面用户操作流程： 1、用户进入修改页面，在页面上显示了修改页面的信息 2、用户修改页面的内容，点击“提交”，提示“修改成功”或“修改失败” 页面处理流程 页面的处理流程如下： 1、进入页面，通过钩子方法请求服务端获取页面信息，并赋值给数据模型对象 2、页面信息通过数据绑定在表单显示 3、用户修改信息点击“提交”请求服务端修改页面信息接口 编写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上添加“操作”列 <!-- 操作列,跳转到修改界面--> <el-table-column label="操作" width="80"> <!--slot-scope:插槽,取得当前行数据,命名为page 拿到行数据,从行中取出pageid--> <template slot-scope="page"> <el-button size="small"type="text" @click="edit(page.row.pageId)">编辑 </template> </el-table-column> 编写edit方法 //路由跳转 edit:function (pageId) { //打开修改页面 this.$router.push({ path:'/cms/page/edit/'+pageId, }) }, 页面内容显示 本功能实现：进入修改页面立即显示要修改的页面信息。 1、定义api方法 export const page_get=(id) => { //定义方法,请求服务端站点根据id查询接口,返回结果 return http.requestQuickGet(apiUrl + '/cms/page/get/' +id); } export const page_edit=(id,params) => { //定义方法,请求服务端站点修改页面接口,返回结果 return http. »

修改页面 修改页面用户操作流程： 1、用户进入修改页面，在页面上显示了修改页面的信息 2、用户修改页面的内容，点击“提交”，提示“修改成功”或“修改失败” 修改页面接口定义 /** * 根据页面id查询页面信息 */ @ApiOperation("根据id查询页面接口") public CmsPage findPageById(String pageId); /** * 修改页面 */ @ApiOperation("修改页面接口") public CmsPageResult editPage(String pageId,CmsPage cmsPage); 说明：提交数据使用post、put都可以，只是根据http方法的规范，put方法是对服务器指定资源进行修改，所以这里使用put方法对页面修改进行修改。 修改页面服务端开发 Dao 使用 Spring Data提供的fifindById方法完成根据主键查询 。 使用 Spring Data提供的save方法完成数据保存 。 Service /** * 根据id查询页面 * @param pageId * @return */ public CmsPage findPageById(String pageId) { Optional<CmsPage> optional = cmsPageRepository.findById(pageId); if (optional.isPresent()) { CmsPage cmsPage = optional.get(); return cmsPage; } return null; } /** * 修改页面 * @param pageId * @param cmsPage * @return */ public CmsPageResult editPage(String pageId, CmsPage cmsPage) { // 调用方法查询是否存在 CmsPage pageById = this. »

删除页面前端开发 Api方法 /*页面删除*/ export const page_del = id => { return http.requestDelete(apiUrl+'/cms/page/del/'+id) } 编写页面 1、在page_list.vue页面添加删除按钮 <el-table-column label="操作" width="80"> <!--slot-scope:插槽,取得当前行数据,命名为page 拿到行数据,从行中取出pageid--> <template slot-scope="page"> <el-button size="small"type="text" @click="edit(page.row.pageId)">编辑 </el-button> <el-button size="small"type="text" @click="del(page.row.pageId)">删除 </el-button> </template> </el-table-column> 在原来,修改页面按钮的插槽中直接再加一个按钮 删除事件 del:function (pageId) { //调用接口 this.$confirm('确认删除吗？', '提示', {}).then(() => { cmsApi.page_del(pageId).then(res=>{ if (res.success) { this.$message.success("删除成功") //刷新页面 this.query() }else { this.$message.success("删除失败") } }); }) } }, »

删除页面 用户操作流程： 1、用户进入用户列表，点击“删除” 2、执行删除操作，提示“删除成功”或“删除失败” 删除页面接口定义 @ApiOperation("通过ID删除页面") public ResponseResult delete(String id); 删除页面服务端开发 Dao 使用 Spring Data提供的deleteById方法完成删除操作 。 Service //删除页面 public ResponseResult delete(String id){ CmsPage one = this.getById(id); if(one!=null){ //删除页面 cmsPageRepository.deleteById(id); return new ResponseResult(CommonCode.SUCCESS); } return new ResponseResult(CommonCode.FAIL); } Controller @DeleteMapping("/del/{id}") //使用http的delete方法完成岗位操作 public ResponseResult delete(@PathVariable("id") String id) { return pageService.delete(id); } »

消息队列 GridFS 页面发布 需求分析 业务流程如下： 1、管理员进入管理界面点击“页面发布”，前端请求cms页面发布接口。 2、cms页面发布接口执行页面静态化，并将静态化页面(html文件)存储至GridFS中。 3、静态化成功后，向消息队列发送页面发布的消息。 页面发布的最终目标是将页面发布到服务器。 通过消息队列将页面发布的消息发送给各各服务器。 3、消息队列负责将消息发送给各各服务器上部署的Cms Client(Cms客户端)。 在服务器上部署Cms Client(Cms客户端)，客户端接收消息队列的通知。 4、每个接收到页面发布消息的Cms Client从GridFS获取Html页面文件，并将Html文件存储在本地服务器。 CmsClient根据页面发布消息的内容请求GridFS获取页面文件，存储在本地服务器。 整个流程就是,基于前面的页面静态化工作之后,在进行页面预览之后,符合要求的页面需要发布到服务器端存一份,由于服务器是分布式的,所以要用到消息队列,发送消息请求发布,服务器接收到消息,从数据库中拿页面存到自己的服务器文件夹中,完成页面发布工作. RabbitMQ研究 要实现上边页面发布的功能，有一个重要的环节就是由消息队列将页面发布的消息通知给各各服务器。 本节的教学目标是对MQ的研究： 1、理解MQ的应用场景 2、理解MQ常用的工作模式 RabbitMQ相关知识参考Rabbitmq笔记模块 »

新增课程 需求分析 用户操作流程如下： 1、用户进入“我的课程”页面，点击“新增课程”，进入新增课程页面 2、填写课程信息，选择课程分类、课程等级、学习模式等。 3、信息填写完毕，点击“提交”，课程添加成功或课程添加失败并提示失败原因。 需要解决的是在新增页面上输入的信息： 1、课程分类 多级分类，需要方便用户去选择。 2、课程等级、学习模式等这些选项建议是可以配置的。 课程分类查询 介绍 在新增课程界面需要选择课程所属分类， 分类信息是整个项目非常重要的信息，课程即商品，分类信息设置的好 坏直接影响用户访问量。 分类信息在哪里应用？ 1、首页分类导航 2、课程的归属地 添加课程时要选择课程的所属分类。 数据结构 分类表category的结构如下： 分类查询 数据格式 在添加课程时需要选择课程所属的分类，这里需要定义课程分类查询接口。 接口格式要根据前端需要的数据格式来定义，前端展示课程分类使用elemenet-ui的cascader（级联选择器）组 件。 数据格式例子如下： [ { value: 'zhinan', label: '指南', children: [{ value: 'shejiyuanze', label: '设计原则', children: [{ value: 'yizhi', label: '一致' }, { value: 'fankui', label: '反馈' }, { value: 'xiaolv', label: '效率' }, { value: 'kekong', label: '可控' }] }] } ] 数据模型 1）定义category的模型 »

我的课程 需求分析 课程添加完成后可通过我的课程进入课程修改页面，此页面显示我的课程列表，如下图所示，可分页查询。 上边的查询要实现分页、会存在多表关联查询，所以建议使用mybatis实现我的课程查询。 API接口 输入参数： 页码、每页显示个数、查询条件 输出结果类型： QueryResponseResult<自定义类型> 在api工程创建course包，创建CourseControllerApi接口。 //查询课程列表 @ApiOperation("查询我的课程列表") public QueryResponseResult<CourseInfo> findCourseList( int page, int size, CourseListRequest courseListRequest ); 课程管理服务 PageHelper PageHelper是mybatis的通用分页插件，通过mybatis的拦截器实现分页功能，拦截sql查询请求，添加分页语句， 最终实现分页查询功能。 我的课程具有分页功能，本项目使用Pagehelper实现Mybatis分页功能开发，由于本项目使用springboot开发，在 springboot上集成pagehelper（https://github.com/pagehelper/pagehelper-spring-boot） PageHelper的使用方法及原理如下： 在调用dao的service方法中设置分页参数：PageHelper.startPage(page, size)，分页参数会设置在ThreadLocal中 PageHelper在mybatis执行sql前进行拦截，从ThreadLocal取出分页参数，修改当前执行的sql语句，添加分页 sql。 最后执行添加了分页sql的sql语句，实现分页查询。 1）添加依赖 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.4</version> </dependency> 2）配置pageHelper 在application.yml中配置pageHelper操作的数据库类型： pagehelper: helper-dialect: mysql Dao 1）mapper 接口 CourseListRequest加上这个是为了后面如果有条件查询更方便 package com.xuecheng.manage_course.dao; import com.github.pagehelper.Page; import com.xuecheng.framework.domain.course.CourseBase; import com.xuecheng.framework.domain.course.ext.CourseInfo; import com.xuecheng.framework.domain.course.request.CourseListRequest; import org.apache.ibatis.annotations.Mapper; import org.springframework.stereotype.Component; /** * Created by Administrator. »