Spring Cloud + Vue前后端分离-第7章 核心业务功能开发
7-1 课程管理功能开发
课程管理页面美化
1.课程管理页面美化
demo-course.jpg
复制search.html中的部分代码
course.vue
看效果
测试一下新增修改删除效果
1.课程管理页面美化2
scoped:style下的样式只应用于当前组件，防止互相污染
课程管理与大章管理互相跳转
1.课程管理与大章管理互相跳转
完成功能:在课程列表中增加“大章”按钮,点击会跳转到大章页面，并且筛选出当前课程下所有的大章。大章页面增加显示课程名称，并有可以返回课程管理页面
local-storage.js
sessionStorage是会话缓存，浏览器窗口关闭，缓存就没了。localStorage是本地缓存，浏览器关闭后，下次再打开还能读到
session-storage.js
setItem自带的必须要求是string
localStorage和sessionStorage只能操作字符串，但是我们经常要放对象数据，所以封装一下
index.html
course.vue
组件(页面)间传输数据可以用h5原生的localStorage,sessionStorage;也可以用js全局变量;也可以用vuex stofe，但是后两者在页面刷新时会丢失数据，所以推荐使用h5原生的。
测试一下，点击大章，会跳转到大章页面
chapter.vue
null.name会报错，{}.name不会报错
简单的跳转可以用router-link(类似a标签),如果是有其它的操作，可以写个click方法。比如前面完成的，从课程跳到大章，需要先缓存课程信息，所以写click方法。
继续更改大章页面
1.大章管理保存和查询功能关联courseId
chapter.vue
ChapterPageDto.java
经验分享：service层到查询条件写得松一点，灵活一点。service 层可能被多个controller 调用，也可能被其它service 调用，每个调用的查询条件可能不一样。
ChapterService.java
controller 需要严格一点，根据前端的业务，校验参数
ChapterController.java
测试（我是后面重启了一下，又更新出来的）
大章管理与小节管理互相跳转
1.大章管理与小节管理互相跳转
2.小节管理保存和查询功能关联courseId,chapterId
chapter.vue
section.vue
SectionPageDto.java
SectionController.java
service 同样写的灵活一些，查询条件根据参数是否为空来判断
SectionService.java
criteria 类似于写where 条件
测试
7-2 课程时长的保存和显示
保存节时，更新课程总时长
1.保存节时，更新课程总时长
2.增加自定义mapper
时长不应该是手输的，后续在介绍视频文件上传时，会介绍到怎么自动获取视频时长
自定义的mapper和自动生成的mapper分开存放
MyCourseMapper.xml
MyCourseMapper.java
代码规范小提示：SectionService 不要直接调用course 的mapper，而是调用平级的CourseService.
CourseService.java
SectionService.java
保存小节时，不管是新增还是修改，都更新课程总时长
application.properties
增加事务处理
1.增加事务配置
一次操作会更新或修改多张表，一般为了保证数据一致，需要增加事务处理。
TransactionManagementConfig.java
SectionService.java
SectionController.java
数据保存进数据库了，说明事务没有回滚，事务不起作用。
自定义异常一般可以选择继承RuntimeException
同一个类的内部方法互相调用，methodA调用methodB,methodB事务不起作用。Spring的事务处理是利用AOP生成动态代理类，内部方法调用时不经过代理类，所以事务不生效。
把代码调整好，然后进行提交
增加时长格式化filter
1.增加时长格式化filter formatSecond
filter.js
course.vue
section.vue
7-3 分类管理功能开发
分类表设计和基本代码生成
1.分类表设计和基本代码生成
all.sql
generatorConfig.xml
然后生成持久层mybatis-generator、ServerGenerator、VueGenerator
admin.vue
router.js
service.ftl
要执行生成器，不能有编译报错
再次运行
分类二级列表查询与显示
1.分类列表查询与显示，左右两个表格
做成左右两个表格，左边是一级分类，右边是二级分类。点击一级分类时，显示对应的二级分类
分类总数不多，不需要分页，一次查询全部数据，由前端来处理显示
CategoryService.java
CategoryController.java
vue.ftl
category.vue
list->all,并且没有参数
点击一行的任何位置，显示二级分类
问题1:点击刷新时，level1数据出现重复。
问题2:level2的刷新不需要了。
问题3:从页面上看不出来当前显示的二级分类是属于哪个一级分类
动态class:使用v-bind:class=json表达式，key就是样式，value是boolean,为true时，表示key的样式生效。可以和原生的class 并存
分类的新增修改删除
1.两级分类的新增修改删除
category.vue
CategoryService.java
问题：新增、编辑、删除二级分类时，没有马上刷新出来，会用到另外一个小知识点，待会介绍。
1.对当前一级分类中选中的表格触发一次点击事件，以刷新二级分类
处理：对一级或二级分类的增删改查，都会调用all()刷新数据，所以all()的后面触发一次表格行点击事件。
category.vue
小技巧：当界面又用了vue,又用了jquery(特别是第三方插件)，当觉得代码没问题，但是效果又没出来时，可以加个小延时看看。
7-4 课程和分类关联保存和显示
集成树型展示插件zTree
1.集成树型展示插件zTree
zTree是jquery插件，用于展示树型结构数据。分类数据有两层结构，可用树形结构展示。
Home [zTree -- jQuery tree plug-ins.]
功能设计：新增课程的时候，同时选择这门课程属于哪些分类，并且一门课程可以属于多个分类在。
将下载解压后的文件夹整个拷贝进项目，放在下面路径上course>admin>public>zTree_v3,重命名
没用的注释代码就大胆删除，保持代码干净，以后如果要用，可以通过git提交记录再找回来。
1.zTree 数据改为分类所有记录
course.vue
分类表相关字段：id,parent,name
category.vue中列表查询方法all()复制到course.vue,进行修改
course.vue
方法名和注释同样重要，要容易理解。all(),容易被误解为是查找所有的课程，所以改名allCategory()
pId 是zTree 默认的父ID名称，而分类表是用parent，需要配置转换
保存课程时，同时保存课程分类
1.保存课程时，同时保存课程分类
2.增加课程分类关联表，一门课程可以属于多个分类
all.sql
generatorConfig.xml
再执行ServerGenerator
course.vue
我们只需要保存分类的ID，所以数据传输可以选择id数组，也可以选择category数组。
CourseDto.java
属性名和前端传递的参数名一致，这样spring会自动映射参数
CourseCategoryService.java
也可以通过自定义mapper写动态sql,将list传入mybatis,批量插入一批数据，只要一条insert语句。项目开发需要在开发效率和运行效率间找平衡。
问题：保存课程时，调用saveBatch,那么课程新增的时候，会批量插入数据，课程更新的时候，会再次批量插入数据，每次调用保存都会批量插入数据。
CourseService.java
编辑课程时，加载课程分类树，并设置勾选
1.编辑课程时，加载课程分类树，并设置勾选
CourseService.java
CourseCategoryService.java
外层save 增加了事务，saveBatch 按理可以不加事务。但是由于本身也是多个sql操作，且以后可能被多个地方调用，为了防止外层save 忘记加事务，所以在saveBatch加事务，以防万一。
CourseController.java
course.vue
7-5 课程内容功能开发
课程内容表设计与基本代码生成
1.课程内容表设计与基本代码生成
all.sql
课程表和课程内容表是1:1关系，两张表都用同样的id字段。
课程详情一般会有文字，图片，视频等，虽然不会把整张图片或整个视频放到数据库，但是存的信息还是很多，所以用大字段。
mediumtext比text类型长度更长。
分表分为：垂直（纵向）分表；水平（横向）分表。
垂直分表的场景：1.大字段；2.经常更新的字段
generatorConfig.xml
执行ServerGenerator
CourseContentService.java
删除掉CourseContentController.java和CourseContentService.java
因为之后我们会统一在CourseController.java中写，所以不需要单独每一个都写controller,另一个同样
完成课程内容管理功能
1.完成课程内容管理功能
Summernote - Super Simple WYSIWYG editor
富文本编辑器，一个很重要的特征：所见即所得。
CourseService.java
正常的思路，先去select，看看有没有数据，再判断是insert还是update，这样会执行两个sql。其实可以直接更新，没有更新到再插入，只有第一次会更新不到，执行两个sql，后面都只需要一个sql
CourseController.java
index.html
course.vue
课程内容，只有读和写，没有列表查询，也没有删除
利用setInterval完成自动保存功能
1.利用setInterval完成自动保存功能
2.增加js日期格式化方法
course.vue
tool.js
7-6 课程代码优化
课程自定义排序
1.课程管理增加自定义排序
course.vue
这里也可以初始化更多的字段，比如三个枚举字段，初始数据，收费、初稿、草稿
SortDto.java
统一日志AOP打印的日志比较泛，可以在 controller中打印更详细的日志
CourseController.java
CourseService.java
MyCourseMapper.java
MyCourseMapper.xml
菜单隐藏掉大章和小节
1.菜单隐藏掉大章和小节
修改1:菜单栏不出现大章管理和小章管理(我之前忘加大章管理了，抱歉)
修改2:页面进到大章管理和小节管理时，侧边栏的课程管理应该显示激活样式
admin.vue
chapter.vue
section.vue
sessionStorage的key改为常量
1.sessionStorage的key改为常量
key值不要直接写字符串，后面缓存用得越来越多，key名有可能冲突，这时要改key名的话，所有set和get都要改。且不要用单一的单词，最好加一些前后缀。
session- storage.js
course.vue
chapter.vue
section.vue
表格内文字上下居中
1.增加全局自定义样式style.css，表格内文字上下居中
index.html
style.css
7-7 讲师管理功能开发
增加讲师管理功能
1.增加讲师管理功能
all.sql
generatorConfig.xml
再执行ServerGenerator、VueGenerator
admin.vue
router.js
1.讲师管理页面布局优化
teacher.vue
鼠标放在图像上时，会出现介绍
课程讲师关联
1.课程与讲师关联
一个分类可以有多门课程，一门课程也可以属于多个分类，所以他们是多对多的关系。多对多的关系，一般会设计个中间表来维护关系。
一个讲师可以讲多门课程，一门课程只能有一个讲师，所以他们是一对多的关系。一对多的关系，可以把关系维护在“一”那张表中。
旧表加字段，使用单独的sql:alter table,这样，上生产的时候也是执行这个sql。
all.sql
generatorConfig.xml
CourseDto.java
course.vue
页面打开始，加载所有的讲师
在后端增加all方法，加载所有的讲师信息。
TeacherController.java
TeacherService.java
表单里要增加讲师选择框
course.vue
1.课程列表中显示讲师信息
2.课程名称字体自适应
v-for中，对循环的数组，可通过filter进行数据过滤
字体大小自适应，根据屏幕的分辨率显示不同大小的字体
