喜欢养狗,不爱洗头!

CMS 什么是CMS 1、CMS是什么 ？ CMS （Content Management System）即内容管理系统，不同的项目对CMS的定位不同，比如：一个在线教育网 站，有些公司认为CMS系统是对所有的课程资源进行管理，而在早期网站刚开始盛行时很多公司的业务是网站制 作，当时对CMS的定位是创建网站，即对网站的页面、图片等静态资源进行管理。 2、CMS有哪些类型？ 上边也谈到每个公司对每个项目的CMS定位不同，CMS基本上分为：针对后台数据内容的管理、针对前端页面的 管理、针对样式风格的管理等 。比如：一个给企业做网站的公司，其CMS系统主要是网站页面管理及样式风格的 管理。 3、本项目CMS的定位是什么？ 本项目作为一个大型的在线教育平台，对CMS系统的定位是对各各网站（子站点）页面的管理，主要管理由于运营 需要而经常变动的页面，从而实现根据运营需要快速进行页面开发、上线的需求。 静态工程搭建 1、安装Nginx 下载nginx：http://nginx.org/en/download.html 本教程下载nginx-1.14.0.zip(http://nginx.org/download/nginx-1.14.0.zip) 解压nginx-1.14.0.zip到自己的计算机，双击nginx.exe即可运行。 访问 ：http://localhost 2、导入门户工程 将课程资料中的门户工程拷贝到代码目录。 使用WebStorm打开门户工程目录，目录的结构如下，后期会根据开发的推进进行扩充。 配置虚拟主机 server{ listen 80; server_name www.xuecheng.com; //要映射的域名 ssi on; ssi_silent_errors on; location / { alias F:/teach/xcEdu/xcEduUI/xc‐ui‐pc‐static‐portal/; //自己的静态工程目录 index index.html; } } F:/teach/xcEdu/xcEduUI/xc-ui-pc-static-portal/ 本目录即为门户的主目录。 5、配置hosts文件 本教程的开发环境使用Windows 7，修改C:\Windows\System32\drivers\etc\hosts文件 127.0.0.1 www.xuecheng.com 进入浏览器，输入http://www.xuecheng.com CMS页面管理需求 1、这些页面的管理流程是什么？ 1）创建站点： 一个网站有很多子站点，比如：学成在线有主门户、学习中心、问答系统等子站点。具体的哪个页面是归属于具体 的站点，所以要管理页面，先要管理页面所属的站点。 2）创建模板： 页面如何创建呢？比如电商网站的商品详情页面，每个页面的内容布局、板式是相同的，不同的只是内容，这个页 面的布局、板式就是页面模板，模板+数据就组成一个完整的页面，最终要创建一个页面文件需要先定义此页面的 模板，最终拿到页面的数据再结合模板就拼装成一个完整的页面。 3）创建页面： 创建页面是指填写页面的基本信息，如：页面的名称、页面的url地址等。 »

1.CMS概述 学成在线借鉴了MOOC（大型开放式网络课程，即MOOC（massive open online courses））的设计思想，是一个提供IT职业课程在线学习的平台 当前市场的在线教育模式多种多样，包括：B2C、C2C、B2B2C等业务模式，学成在线采用B2B2C业务模式，即向 企业或个人提供在线教育平台提供教学服务，老师和学生通过平台完成整个教学和学习的过程，市场上类似的平台 有：网易云课堂、腾讯课堂等，学成在线的特点是IT职业课程在线教学。 功能模块 学成在线包括门户、学习中心、教学管理中、社交系统、系统管理等功能模块。 技术架构 技术栈 开发步骤 项目是基于前后端分离的架构进行开发，前后端分离架构总体上包括前端和服务端，通常是多人协作并行开发，开 发步骤如下： 1、需求分析 梳理用户的需求，分析业务流程 2、接口定义 根据需求分析定义接口 3、服务端和前端并行开发 依据接口进行服务端接口开发。 前端开发用户操作界面，并请求服务端接口完成业务处理。 4、前后端集成测试 最终前端调用服务端接口完成业务。 »

Api请求及响应规范 为了严格按照接口进行开发，提高效率，对请求及响应格式进行规范化。 1、get 请求时，采用key/value格式请求，SpringMVC可采用基本类型的变量接收，也可以采用对象接收。 2、Post请求时，可以提交form表单数据（application/x-www-form-urlencoded）和Json数据（Content Type=application/json），文件等多部件类型（multipart/form-data）三种数据格式，SpringMVC接收Json数据 使用@RequestBody注解解析请求的json数据。 4、响应结果统一信息为：是否成功、操作代码、提示信息及自定义数据。 ​ 本项目,统一采用成功信息,相应代码,相应结果组成,并且最终返回结果为QueryResponseResult类型 5、响应结果统一格式为json。 Api定义约束 Api定义使用SpringMVC来完成，由于此接口后期将作为微服务远程调用使用，在定义接口时有如下限制： 1、@PathVariable 统一指定参数名称，如：@PathVariable(“id”) ​ 方法内参数要使用@PathVariable来映射路径上的参数 2、@RequestParam统一指定参数名称，如： @RequestParam（”id”） public String getDetails( @RequestParam(value="param1", required=true) String param1, @RequestParam(value="param2", required=false) String param2){ ... } »

异常处理 异常处理的问题分析 从添加页面的service方法中找问题： //添加页面 public CmsPageResult add(CmsPage cmsPage){ //校验页面是否存在，根据页面名称、站点Id、页面webpath查询 CmsPage cmsPage1 = cmsPageRepository.findByPageNameAndSiteIdAndPageWebPath(cmsPage.getPageName(), cmsPage.getSiteId(), cmsPage.getPageWebPath()); if(cmsPage1==null){ cmsPage.setPageId(null);//添加页面主键由spring data 自动生成 cmsPageRepository.save(cmsPage); //返回结果 CmsPageResult cmsPageResult = new CmsPageResult(CommonCode.SUCCESS,cmsPage); return cmsPageResult; } return new CmsPageResult(CommonCode.FAIL,null); } 问题： 1、上边的代码只要操作不成功仅向用户返回“错误代码：11111，失败信息：操作失败”，无法区别具体的错误信 息。 2、service方法在执行过程出现异常在哪捕获？在service中需要都加try/catch，如果在controller也需要添加 try/catch，代码冗余严重且不易维护。 解决方案： 1、在Service方法中的编码顺序是先校验判断，有问题则抛出具体的异常信息，最后执行具体的业务操作，返回成 功信息。 2、在统一异常处理类中去捕获异常，无需controller捕获异常，向用户返回统一规范的响应信息。 代码模板如下： //添加页面 public CmsPageResult add(CmsPage cmsPage){ //校验cmsPage是否为空 if(cmsPage == null){ //抛出异常，非法请求 //... } //根据页面名称查询（页面名称已在mongodb创建了唯一索引） CmsPage cmsPage1 = cmsPageRepository.findByPageNameAndSiteIdAndPageWebPath(cmsPage.getPageName(), cmsPage.getSiteId(), cmsPage.getPageWebPath()); //校验页面是否存在，已存在则抛出异常 if(cmsPage1 !=null){ //抛出异常，已存在相同的页面名称 //... } cmsPage. »

在module中创建CMS页面原型 定义cms目录,创建相应接口 在page目录中创建page_list页面 在router页面中创建index.js路由组件 import Home from '@/module/home/page/home.vue'; import page_list from "../page/page_list"; export default [{ path: '/', component: Home, name: 'CMS', hidden: false, children:[ {path: '/cms/page/list',name:'页面列表',component: page_list } ] } ] 这样在home组件中,就可以获取到路与信息,并渲染成树状列表显示 仿照home路由组件,创建cms路由默认显示,并且设置管理页面的子路由 在base工程中合并路由组件 import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); // 定义路由配置 let routes = [] let concat = (router) => { routes = routes.concat(router) } // // 导入路由规则 import HomeRouter from '@/module/home/router' import CmsRouter from '@/module/cms/router' // 合并路由规则 concat(HomeRouter) concat(CmsRouter) export default routes; 开发page_list. »

页面查询接口定义 定义模型 需求分析 在梳理完用户需求后就要去定义前后端的接口，接口定义后前端和后端就可以依据接口去开发功能了。 本次定义页面查询接口，本接口供前端请求查询页面列表，支持分页及自定义条件查询方式。 具体需求如下： 1、分页查询CmsPage 集合下的数据 2、根据站点Id、模板Id、页面别名查询页面信息 3、接口基于Http Get请求，响应Json 模型类介绍 接口的定义离不开数据模型，根据前边对需求的分析，整个页面管理模块的数据模型如下： CmsSite：站点模型 CmsTemplate：页面模板 CmsPage：页面信息 @Data @ToString @Document(collection = "cms_page") public class CmsPage { /** * 页面名称、别名、访问地址、类型（静态/动态）、页面模版、状态 */ //站点ID private String siteId; //页面ID @Id private String pageId; //页面名称 private String pageName; //别名 private String pageAliase; //访问地址 private String pageWebPath; //参数 private String pageParameter; //物理路径 private String pagePhysicalPath; //类型（静态/动态） private String pageType; //页面模版 private String pageTemplate; //页面静态化内容 private String pageHtml; //状态 private String pageStatus; //创建时间 private Date pageCreateTime; //模版id private String templateId; //参数列表，暂不用 private List<CmsPageParam> pageParams; //模版文件Id // private String templateFileId; //静态文件Id private String htmlFileId; //数据Url private String dataUrl; } 属性说明： »

页面条件查询接口 需求分析 在页面输入查询条件，查询符合条件的页面信息。 查询条件如下： 站点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. »