1.项目介绍
1.1 项目背景
1.2 商业模式
在线教育平台使用B2C商业模式
- B2C(商家到用户)
- 两个角色：管理员与普通用户
- 管理员：添加、修改、删除
- 普通用户：查询
- B2B2C(商家到商家到用户
- 普通用户、自营、普通商家
1.3 功能模块
系统后台(管理员使用)：
- 讲师管理
- 课程分类管理
- 课程管理
- 视频
- 统计分析
- 订单管理
- banner管理
- 权限管理
系统前台(普通用户使用)：
- 首页数据显示
- 讲师列表和详情显示
- 课程列表和详情
- 课程在线播放
- 登录和注册
- 微信扫码登录
- 微信扫码支付
1.4 技术点
前后端分离开发
- 前端技术：vue、element-ui、axios、node.js
- 后端技术：springboot、springcloud、mybatisplus、springsecurity、redis、maven、easyexcel
- 其他技术：阿里云 docker、git、Jenkins
2. MybatisPlus
MP实现分页查询（底层使用SQL语句中limit关键字）
- 加入分页插件
- 编写分页代码
- 直接new page对象，传入两个参数
- 调用MP方法实现分页查询
3. 项目开发-讲师管理模块
前后端分离开发概念：
3.1 讲师管理模块开发
准备工作
-
创佳数据库，创建讲师数据库表
-
创建项目结构
- 创建父工程：pom类型，管理依赖版本和放公共依赖
- 创建子模块1、2
- 创建子子模块1.1、2.1
-
开发模块步骤
- 创建application.properties配置文件
- 编写controller service mapper代码内容
- mp提供代码生成器，生成相关代码
- 编写controller代码
- 编写springboot启动类
- 创建配置类，配置mapper和扫描其他
- 启动并访问：端口+RequestMapping地址+方法GetMapping地址
讲师逻辑删除
- 配置逻辑删除插件
- 逻辑删除属性上面添加注解
- 测试讲师逻辑删除
- 使用swagger进行接口测试（生成在线接口文档，方便接口测试）
- 新建一个comment模块，与service平级，再建立一个service_base模块用来整合swagger
- 在service_edu中引入service_base依赖
- 在启动类上添加ComponentScan注解
- 访问swagger:http://localhost:8001/swagger-ui.html
统一返回结果对象
- 包含状态码、返回消息、数据
- 例如：我们的系统要求返回的基本数据格式如下：
- 列表：
{ "success":true, "code":20000, "message":"成功" "data":{} } - 步骤：
- 创建一个common_utils模块。
- 创建一个interface，定义返回的状态码。
- 创建一个类R，编写相应代码。
- 使用统一结果
- 在service中引入common_utils
- 把接口方法返回结果都是R
讲师分页功能（按条件查）
- 配置mp分页插件
- 把条件封装到对象里面，把对象传到接口里面
- 根据条件进行判断，拼接条件
- RequestBody:使用json传数据，把json数据封装到对应对象中，需要使用post提交
- ResponseBody:返回json数据
讲师添加
- 自动填充
- 编写controller
- 自动填充失效暂时不知什么原因
根据id查询讲师
修改讲师信息
统一异常处理
- 全局异常处理
- 特定异常处理
- 自定义异常处理
- 创建自定义异常类继承RuntiException，写异常属性
- 在统一异常类中添加规则
- 执行自定义异常（手动抛出异常）
统一日志处理
- 配置日志级别（error warn info debug）
- 把日志不仅输入到控制台，也可以输出到文件中，使用日志工具（log4j，logback）
- 删除application.properties中的日志配置
- resources中创建logback-spring.xml
- 在自定义异常中进行测试(测试失败，log.error爆红)
3.2 前端技术
快速使用和建立
- 安装VsCode
- 在VsCode中安装插件
- 创建工作区
- 创建一个空文件夹
- VsCode中打开文件夹
- 把文件夹保存成工作区
ES6
- 声明变量
- es6:let
- js:var
- let的范围有局部作用域，var没有。
- var可以可以声明多次。let只能声明一次。
- 定义常量
- 使用const，定义之后就不能进行改变。
- 数组解构
- 传统写法：let a = 1，b=2，c=3
- es6写法：let [x,y,z] = [10,20,30]
- 对象解构
- 模板字符串
- 使用`实现换行
- 字符串插入变量和表达式。变量名写在 {} 中可以放入 JavaScript 表达式。
- 字符串中调用函数
- 声明对象
- 对象简写
- 对象扩展运算符
- 箭头函数
- 传统方法：
var f1 = function(m){ return m} - 箭头函数构造：
var f2 = m=>m
- 传统方法：
vue.js
- vue基础语法
- vue组件
- 实例生命周期
- vue路由(菜单导航)
axios
- axios是独立的项目，不是vue里面的一部分，但经常与vue一起使用，实现ajax操作。
- 使用axios应用场景
- 前端（发送ajax请求）->后端接口（返回数据）->前端
- axios使用
- 引入相关组件
- 编写axios代码
- 创建json文件，数据创建
element—ui
node.js
- 作用：
- js的运行环境，用于执行js代码环境
- 不需要浏览器，直接使用node.js运行代码
- 模拟出tomcat效果
- npm：类似后端的maven
- 管理前端js依赖，比如JQuery
- 无需安装，node.js自带
- npm初始化项目
- 使用npm init
- 初始化之后，会生成package.json,类似后端的pom.xml
- npm下载js依赖
- 根据package.json文件下载依赖
babel
- 作用
- babel转码器，把es6代码转换成es5代码
- es5代码兼容性高，但是不够简洁，所以使用转码器
- 安装
模块化
webpack
- 作用：把多个静态资源js、css、html打包成一个文件
- 使用步骤：
- 安装webpack打包工具
- 创建js文件用于打包操作
- 创建webpack配置文件，配置打包信息
- 使用命令执行打包操作
3.3 搭建前端页面
- 步骤
- 复制模板
- 使用npm install下载依赖
- npm run dev启动环境（使用和老师一样的node.js版本）
- 环境说明
- 前端框架入口：index.html、main.js
- 前端页面环境使用框架（模板），主要基于两种技术实现出来
- vue-admin-template = vue + element-ui
- 框架build目录：放项目构建的脚本文件
- config目录
3.4 改造登录功能为本地
- 修改config/dev.env.js中的默认地址为本地localhost:8001
- 进行登录调用的两个方法，login登录操作方法，和info登录之后获得用户信息的方法。所以创建接口中的俩个方法实现登录。
- login返回token值
- info返回roles、name、avatar
- 开发登录接口
- 解决跨域问题
- 通过一个地址去访问另一个地址，这个过程有访问协议、IP地址、端口号任意一个不同，则会产生跨域问题。
- 可以在后端controller加入注解解决跨域。
3.5 前端框架使用
- 添加路由
- 点击某个路由，显示路由对应的页面内容
- 在api文件夹创建js文件，定义接口地址和参数
- 在创建vue页面中引入js文件，调用方法实现功能
3.6 讲师管理前端开发
讲师列表前端
- 添加路由
- 创建路由页面
- 在api文件夹创建teacher.js定义访问的接口地址
- 在讲师列表页面 list.vue页面调用定义接口的方法，得到接口返回数据
讲师删除前端
- 在每条记录后面添加删除按钮
讲师新增前端
讲师查询前端
讲师修改前端
遇到问题：
- 第一次点击修改，进行数据回显
- 第二次再去点击添加讲师，进入表单页面，但是问题是：表单页面还是显示修改的回显数据，正确效果应该是表单数据清空
- 解决方式：做添加讲师的时候，把表单数据清空
- 使用监听，当路由切换时，方法刷新
3.7 阿里云存储oss
上传头像
- 问题：同名上传会覆盖
- 解决方法：在文名称添加随机唯一值，让每个文件名称不同
3.8 Nginx反向代理服务器
- 请求转发
- nginx服务器收到请求，然后转发到不同服务器
- 负载均衡
- 将大量请求按照某种策略分配到不同服务器
- 动静分离
- 将代码与静态资源进行分开部署
- 使用
- 在nginx中配置好转发的端口
- 在前端中修改地址为nginx中配置的端口
3.9 上传头像前端
- 复制组件
- 使用组件，定义一些初始值
- 引用组件和声明组件
- 编写相应方法（头像上传成功存在阿里云）
