课程管理

新增课程 需求分析 用户操作流程如下： 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. »

课程营销 需求分析 课程营销信息包括课程价格、课程有效期等信息。 数据模型 课程营销信息使用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重新编译一下 »