喜欢养狗,不爱洗头!

我的课程 需求分析 课程添加完成后可通过我的课程进入课程修改页面，此页面显示我的课程列表，如下图所示，可分页查询。 上边的查询要实现分页、会存在多表关联查询，所以建议使用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. »

课程营销 需求分析 课程营销信息包括课程价格、课程有效期等信息。 数据模型 课程营销信息使用course_market表存储。 数据模型如下： package com.xuecheng.framework.domain.course; import lombok.Data; import lombok.ToString; import org.hibernate.annotations.GenericGenerator; import javax.persistence.*; import java.io.Serializable; import java.util.Date; /** * 课程营销管理实体类 * Created by admin on 2018/2/10. */ @Data @ToString @Entity @Table(name="course_market") @GenericGenerator(name = "jpa-assigned", strategy = "assigned") public class CourseMarket implements Serializable { private static final long serialVersionUID = -916357110051689486L; @Id @GeneratedValue(generator = "jpa-assigned") @Column(length = 32) private String id; private String charge; private String valid; private String qq; private Float price; private Float price_old; // private Date expires; @Column(name = "start_time") private Date startTime; @Column(name = "end_time") private Date endTime; } API 1) 查询课程营销信息 »

上传图片开发 需求分析 在很多系统都有上传图片/上传文件的需求，比如：上传课程图片、上传课程资料、上传用户头像等，为了提供系 统的可重用性专门设立文件系统服务承担图片/文件的管理，文件系统服务实现对文件的上传、删除、查询等功能 进行管理。 各 各子系统不再开发上传文件的请求，各各子系统通过文件系统服务进行文件的上传、删除等操作。文件系统服务 最终会将文件存储到fastDSF文件系统中。 下图是各各子系统与文件系统服务之间的关系： 说明:上述简而言之就是,搭建好fastdfs图片服务器后,由于本项目有多个系统,每个系统都可能要使用文件上传和下载功能,但是每个系统具体的业务明细又不同,比如:课程图片只用一张,各系统可能要传递额外的一些参数 说明:上图就是上述问题的的解决办法,创建一个通用的文件上传和下载工程,实体类包含了上传文件的必要信息,以及各系统可能要传的额外数据组建一个实体类,设置通用的上传和下载方法,对外暴露接口 这样,课程管理系统可以调用通用接口上传,之后在调用方法将图片信息存到自己的数据库中供以后使用 也就是通用文件系统和其他文件系统没有关联,只是提供服务 执行流程如下： 1、管理员进入教学管理前端，点击上传图片 2、图片上传至文件系统服务，文件系统请求fastDFS上传文件 3、文件系统将文件入库，存储到文件系统服务数据库中。 4、文件系统服务向前端返回文件上传结果，如果成功则包括文件的Url路径。 5、课程管理前端请求课程管理进行保存课程图片信息到课程数据库。 6、课程管理服务将课程图片保存在课程数据库。 创建文件系统服务工程 导入xc-service-base-fifilesystem.zip工程。 1）工程目录结构 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <parent> <artifactId>xc-framework-parent</artifactId> <groupId>com.xuecheng</groupId> <version>1.0-SNAPSHOT</version> <relativePath>../xc-framework-parent/pom.xml</relativePath> </parent> <modelVersion>4.0.0</modelVersion> <artifactId>xc-service-base-filesystem</artifactId> <dependencies> <dependency> <groupId>com.xuecheng</groupId> <artifactId>xc-service-api</artifactId> <version>1.0-SNAPSHOT</version> </dependency> <dependency> <groupId>com.xuecheng</groupId> <artifactId>xc-framework-model</artifactId> <version>1.0-SNAPSHOT</version> </dependency> <dependency> <groupId>com.xuecheng</groupId> <artifactId>xc-framework-common</artifactId> <version>1.0-SNAPSHOT</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>net.oschina.zcx7878</groupId> <artifactId>fastdfs-client-java</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org. »

课程计划 需求分析 什么是课程计划？ 课程计划定义了课程的章节内容，学生通过课程计划进行在线学习，下图中右侧显示的就是课程计划。 课程计划包括两级，第一级是课程的大章节、第二级是大章节下属的小章节，每个小章节通常是一段视频，学生点 击小章节在线学习。 教学管理人员对课程计划如何管理？ 功能包括：添加课程计划、删除课程计划、修改课程计划等。 课程计划查询接口 需求分析 课程计划查询是将某个课程的课程计划内容完整的显示出来，如下图所示： 左侧显示的就是课程计划，课程计划是一个树型结构，方便扩展课程计划的级别。 在上边页面中，点击“添加课程计划”即可对课程计划进行添加操作。 点击修改可对某个章节内容进行修改。 点击删除可删除某个章节。 页面原型 tree组件介绍 本功能使用element-ui 的tree组件来完成 在course_plan.vue文件中添加tree组件的代码，进行测试： 1、组件标签 <el-tree :data="teachplanList" :props="defaultProps" node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent"> </el-tree> 2、数据对象 teachplanList : [{ id: 1, pname: '一级 1', children: [{ id: 4, pname: '二级 1-1', children: [{ id: 9, pname: '三级 1-1-1' }, { id: 10, pname: '三级 1-1-2' }] }] }], webstorm配置JSX 本组件用到了JSX语法，如下所示： JSX 是Javascript和XML结合的一种格式，它是React的核心组成部分，JSX和XML语法类似，可以定义属性以及子元 素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签（以 < 开头），就用 HTML 规则解析； »

课程管理 需求分析 在线教育平台的课程信息相当于电商平台的商品。课程管理是后台管理功能中最重要的模块。本项目为教学机构提 供课程管理功能，教学机构可以添加属于自己的课程，供学生在线学习。 课程管理包括如下功能需求： 1、分类管理 2、新增课程 3、修改课程 4、预览课程 5、发布课程 用户的操作流程如下： 1、进入我的课程 2、点击“添加课程”，进入添加课程界面 3、输入课程基本信息，点击提交 4、课程基本信息提交成功，自动进入“管理课程”界面，点击“管理课程”也可以进入“管理课程”界面 5、编辑图片 上传课程图片。 6、编辑课程营销信息 营销信息主要是设置课程的收费方式及价格。 7、编辑课程计划 添加课程计划： 环境搭建 搭建数据库环境 1) 创建数据库 课程管理使用MySQL数据库，创建课程管理数据库：xc_course。 导入xc_course.sql脚本 2) 数据表介绍 课程信息内容繁多，将课程信息分类保存在如下表中 数据表结构如下： 导入课程管理服务工程 1）持久层技术介绍： 课程管理服务使用MySQL数据库存储课程信息，持久层技术如下： 1、spring data jpa：用于表的基本CRUD。 2、mybatis：用于复杂的查询操作。 3、druid：使用阿里巴巴提供的spring boot 整合druid包druid-spring-boot-starter管理连接池。 druid-spring-boot-starter地址：https://github.com/alibaba/druid/tree/master/druid-spring-boot-starter 2）导入工程 导入资料下的“xc-service-manage-course.zip”。 注意:后端dao框架采用jpa和mybatis共同开发 ,在复杂查询或面向sql较多的时候用mybatis,简单查询yongjpa更加方便 导入课程管理前端工程 课程管理属于教学管理子系统的功能，使用用户为教学机构的管理人员和老师，为保证系统的可维护性，单独创建 一个教学管理前端工程。 教学管理前端工程与系统管理前端的工程结构一样，也采用vue.js框架来实现。 从课程资料目录拷贝xc-ui-pc-teach.zip到工程，使用webstorm打开，启动工程： 注意:前端node-sass有错误,要npm rebuild node-sass重新编译一下 »

页面发布 技术方案 本项目使用MQ实现页面发布的技术方案如下： 技术方案说明： 1、平台包括多个站点，页面归属不同的站点。 2、发布一个页面应将该页面发布到所属站点的服务器上。 3、每个站点服务部署cms client程序，并与交换机绑定，绑定时指定站点Id为routingKey。 指定站点id为routingKey就可以实现cms client只能接收到所属站点的页面发布消息。 4、页面发布程序向MQ发布消息时指定页面所属站点Id为routingKey，将该页面发布到它所在服务器上的cms client。 路由模式分析如下： 发布一个页面，需发布到该页面所属的每个站点服务器，其它站点服务器不发布。 比如：发布一个门户的页面，需要发布到每个门户服务器上，而用户中心服务器则不需要发布。 所以本项目采用routing模式，用站点id作为routingKey，这样就可以匹配页面只发布到所属的站点服务器上。 页面发布流程图如下： 1、前端请求cms执行页面发布。 2、cms执行静态化程序生成html文件。 3、cms将html文件存储到GridFS中。 4、cms向MQ发送页面发布消息 5、MQ将页面发布消息通知给Cms Client 6、Cms Client从GridFS中下载html文件 7、Cms Client将html保存到所在服务器指定目录 页面发布消费方 需求分析 功能分析： 创建Cms Client工程作为页面发布消费方，将Cms Client部署在多个服务器上，它负责接收到页面发布 的消息后从 GridFS中下载文件在本地保存。 需求如下： 1、将cms Client部署在服务器，配置队列名称和站点ID。 2、cms Client连接RabbitMQ并监听各自的“页面发布队列” 3、cms Client接收页面发布队列的消息 4、根据消息中的页面id从mongodb数据库下载页面到本地 调用dao查询页面信息，获取到页面的物理路径，调用dao查询站点信息，得到站点的物理路径 页面物理路径=站点物理路径+页面物理路径+页面名称。 从GridFS查询静态文件内容，将静态文件内容保存到页面物理路径下。 创建Cms Client工程 1、创建maven工程 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <parent> <artifactId>xc-framework-parent</artifactId> <groupId>com.xuecheng</groupId> <version>1.0-SNAPSHOT</version> <relativePath>../xc-framework-parent/pom.xml</relativePath> </parent> <modelVersion>4.0.0</modelVersion> <artifactId>xc-service-manage-cms-client</artifactId> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-amqp</artifactId> </dependency> <dependency> <groupId>org. »

页面静态化 页面预览 页面静态化需求 1、为什么要进行页面管理？ 本项目cms系统的功能就是根据运营需要，对门户等子系统的部分页面进行管理，从而实现快速根据用户需求修改 页面内容并上线的需求。 2、如何修改页面的内容？ 在开发中修改页面内容是需要人工编写html及JS文件，CMS系统是通过程序自动化的对页面内容进行修改，通过 页面静态化技术生成html页面。 3、如何对页面进行静态化？ 一个页面等于模板加数据，在添加页面的时候我们选择了页面的模板。 页面静态化就是将页面模板和数据通过技术手段将二者合二为一，生成一个html网页文件。 4、页面静态化及页面发布流程图如下： 业务流程如下： 1、获取模型数据 2、制作模板 3、对页面进行静态化 4、将静态化生成的html页面存放文件系统中 5、将存放在文件系统的html文件发布到服务器 FreeMarker 研究 参考”Freemarker”相关资料 页面静态化 页面静态化流程 通过上边对FreeMarker的研究我们得出：模板+数据模型=输出，页面静态化需要准备数据模型和模板，先知道数 据模型的结构才可以编写模板，因为在模板中要引用数据模型中的数据，本节将系统讲解CMS页面数据模型获取、 模板管理及静态化的过程。 下边讨论一个问题：如何获取页面的数据模型？ CMS管理了各种页面，CMS对页面进行静态化时需要数据模型，但是CMS并不知道每个页面的数据模型的具体内 容，它只管执行静态化程序便可对页面进行静态化，所以CMS静态化程序需要通过一种通用的方法来获取数据模 型。 在编辑页面信息时指定一个DataUrl，此DataUrl便是获取数据模型的Url，它基于Http方式，CMS对页面进行静态 化时会从页面信息中读取DataUrl，通过Http远程调用的方法请求DataUrl获取数据模型。 管理员怎么知道DataUrl的内容呢？ 举例说明： 此页面是轮播图页面，它的DataUrl由开发轮播图管理的程序员提供。 此页面是精品课程推荐页面，它的DataUrl由精品课程推荐的程序员提供。 此页面是课程详情页面，它的DataUrl由课程管理的程序员提供。 页面静态化流程如下图： 1、静态化程序首先读取页面获取DataUrl。 2、静态化程序远程请求DataUrl得到数据模型。 3、获取页面模板。 4、执行页面静态化。 数据模型 轮播图DataUrl接口 需求分析 CMS中有轮播图管理、精品课程推荐的功能，以轮播图管理为例说明：轮播图管理是通过可视化的操作界面由管理 员指定轮播图图片地址，最后将轮播图图片地址保存在cms_confifig集合中，下边是轮播图数据模型： 针对首页的轮播图信息、精品推荐等信息的获取统一提供一个Url供静态化程序调用，这样我们就知道了轮播图页 面、精品课程推荐页面的DataUrl，管理在页面配置中将此Url配置在页面信息中。 ​ 本小节开发一个查询轮播图、精品推荐信息的接口，此接口供静态化程序调用获取数据模型。 接口定义 轮播图信息、精品推荐等信息存储在MongoDB的cms_confifig集合中。 cms_confifig有固定的数据结构，如下： package com.xuecheng.framework.domain.cms; import lombok.Data; import lombok.ToString; import org.springframework.data.annotation.Id; import org.springframework.data.mongodb.core.mapping.Document; import java.util.List; /** * Created by admin on 2018/2/6. »