一、项目介绍
1.1 学习此项目目的
能够把所学知识进行复盘和总结，进行灵活运用。
1.2 使用技术栈
前后端分离
后端技术栈：Node，Express，MySQL，JWT
前端技术栈：HTML5，CSS3，Ajax，本地存储
1.3 功能描述
实现了首页课程渲染、列表页筛选课程，搜索课程，课程详情介绍，视频播放，报名课程，登录，注册，个人中心等。
具体实现如下：
● 使用Node，Express，MySQL完成底层接口（编写的路由返回的是json）的编写
● 登入模块整合JWT，为每个学生用户生成一个单独的token
● 使用存储在本地缓存(localstorage)中的token进行用户的身份验证，保证用户可以报名课程和个人信息的管理
● 使用Jquery的Ajax方法进行请求接口，进行渲染页面
● 最后要部署上线
1.4 项目人员构成
| 产品（1） | 负责功能分析，对接用户需求，提出设计方案 |
|---|---|
| UI（1） | 负责产品的样式设计，产出设计图 |
| 前端（2） | 负责HTML页面效果编写 |
| 后端（2） | 负责业务逻辑的实现和数据库操作 |
| 移动端（2） app | ios/安卓，负责移动端效果设计开发 |
| 测试（1） | 对完成的功能进行测试，检查BUG |
| 运维（1） | 对产品上线需要的服务器进行管理，维护 |
| 推广（1） | 对产品上线后，需要对产品进行推广，以达到盈利 |
1.5 项目工作流程
针对项目型的任务，简单的说就是走下面的流程：了解需求，开需求分析会议，确定开发任务，推进开发进度，测试，试点，交付。当然每一项又会有具体的流程。
● 前期调研（调查你这个项目值不值得开发）
● 产品提出需求，给出产品原型图（RP图）
● 需求评审，早例会进行需求评审，产品经理阐述原型图。
● 指派研发任务（排期）
○ 前端任务
○ 后端任务
○ UI任务
○ 移动端任务（如果有） app / 小程序
● 阶段验收，根据进度，进行效果验收
● 功能测试
● 项目发布
● 额外的：文档编写技巧（后端的）
○ 接口功能描述
○ 请求方式描述
○ 接口请求参数描述
○ 接口响应参数描述
二、初始化项目及组员划分
(1)使用express脚手架，生成项目基本结构
D:\>express --view=ejs uCourse D:\>cd uCourse D:\uCourse>npm i
(2)把nodemon工具配置到 package.json
"scripts": {
"start": "node ./bin/www",
"dev": "nodemon ./bin/www"
}
(3)删除app.js中不需要的一些代码
删除项目app.js文件中的第一行代码。
(4)修改app.js中的404配置和错误配置
// 404错误处理中间件
app.use(function(req, res, next) {
next('404错误');
});
// 逻辑错误处理中间件
app.use(function(err, req, res, next) {
res.send({ "status": 500, "msg": err });
});
(5)使用navicat工具导入数据库
(6)安装必备模块包：cors、formidable、mysql 等
D:\uCourse>npm i mysql cors formidable
(7)运行项目进行开发
(8) 使用git和码云进行托管项目
2.1 小组长要干的
1)、使用git init命令 来初始化项目：
2)、在项目根目录中新建.gitignore文件，文件内容如下：
node_modules/ package-lock.json *.md
3)、将工作区中的代码提交到暂存区：
git add .
4)、在码云平台上新建远程私有仓库，并将相关开发人员添加到仓库中：
5)、其他开发成员克隆远程仓库：
git clone 远程仓库地址
6)、其他开发成员在克隆后本地项目中进行开发，开发完成分别使用git add . 、git commit -m 、git push 、git pull来管理git:
三、数据模型分析
使用navicat工具导入数据库
四、接口开发
4.1 首页课程列表
功能描述：根据请求类别参数的不同获取同步课程或精品课程数据
设计思路：
(1)接口地址 “/course” get请求
(2)传递参数为type：区分课程类别
接口文档：
(1)、接口地址：http://localhost:3000/course
(2)、调用方式：get
(3)、请求参数：
| 参数名称 | 是否必填 | 默认值 | 备注 |
|---|---|---|---|
| cid | 必填 | 1 (1:为同步 2:为精品) | 课程类型 |
(4)、返回值(json)：
| 名称 | 值 | 备注 |
|---|---|---|
| status | 200/500 | 状态值(200表示成功 500表示失败) |
| msg | 课程数据成功/课程数据失败 | 提示信息 |
| datas | 数组 | 接口数据 |
4.2 分类相关接口
自主实现
4.2.1 地区
功能描述：获取地区数据
设计思路：
(1)接口地址 “/citys” get请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
接口文档:
(1)、接口地址：http://localhost:3000/citys
(2)、请求方式：get
(3)、请求参数： 无
(4)、返回数据(json)
4.2.2 年级
功能描述：获取年级数据
设计思路：
(1)接口地址 “/grade”get请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
接口文档:
(1)、接口地址：http://localhost:3000/grade
(2)、请求方式：get
(3)、请求参数： 无
(4)、返回数据(json)
4.2.3 学科
功能描述：获取学科数据
设计思路：
(1)接口地址 “/subjects” get请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
接口文档:
(1)、接口地址：http://localhost:3000/subjects
(2)、请求方式：get
(3)、请求参数： 无
(4)、返回数据(json)
4.2.4 考试类别
功能描述：获取考试类型数据
设计思路：
(1)接口地址 “/category”get请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
接口文档:
(1)、接口地址：http://localhost:3000/category
(2)、请求方式：get
(3)、请求参数： 无
(4)、返回数据(json)
4.3 列表页
功能描述：获取课程列表
设计思路：
(1)接口地址 “/courselist”get请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
接口文档:
(1)、接口地址：http://localhost:3000/courselist
(2)、请求方式：get
(3)、请求参数：
| 序号 | 参数名 | 参数类型 | 是否必填 | 备注 |
|---|---|---|---|---|
| 1 | city | 字符串 | 否 | 城市 |
| 2 | grade | 字符串 | 否 | 年级 |
| 3 | subject | 字符串 | 否 | 学科 |
| 4 | category | 字符串 | 否 | 考试类别 |
| 5 | pages | 整数 | 是 | 第几页，默认为1 |
| 6 | limits | 整数 | 是 | 每页要显示的条数，默认为3 |
| 7 | ctype | 整数 | 是 | 课程类别，默认为1(同步课程) |
(4)、返回数据(json)
4.4 搜索
自主实现
功能描述：根据查询关键字获取课程列表
设计思路：
(1)接口地址 “/searchlist”get请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
4.5 课程详情
自主实现
功能描述：根据课程id获取课程详情信息
设计思路：
(1)接口地址 “/details” get请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
接口文档:
(1)、接口地址：http://localhost:3000/details
(2)、请求方式：get
(3)、请求参数：
cid 课程id 必填
(4)、返回数据(json)
4.6 课程视频
功能描述：根据视频id获取课程的视频地址
设计思路：
(1)接口地址 “/videoplay” get请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
接口文档:
(1)、接口地址：http://localhost:3000/details
(2)、请求方式：get
(3)、请求参数：
cid 课程id 必填
(4)、返回数据(json)
4.7 报名课程
自主实现
功能描述：根据当前登录用户和课程id进行报名
设计思路：
(1)接口地址 “/study” post请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
4.8 个人中心
4.8.1 注册
功能描述：根据用户名和密码实现注册
设计思路：(1)接口地址 “/register”post请求 (2)查看数据表信息及数据库字典 (3)设置sql语句
注意：在项目根目录下安装第三方md5包，md5包用来加密密码。
什么是md5?【重点】
md5是一种加密算法，使用这种加密算法加密后的数据是不可逆，并且加密码后的数据长度是固定的32位，同一个字符串使用md5加密后的数据是一样的。
注册新用户接口文档：
接口地址：http://localhost:3000/register
调用方式：post
接口参数：
| 参数名称 | 是否必填 | 默认值 | 备注 |
|---|---|---|---|
| user | 是 | 无 | 帐号 |
| pwd | 是 | 无 | 密码 |
| repwd | 是 | 无 | 确认密码 |
返回参数(json)：
| 参数名称 | 默认值 | 备注 |
|---|---|---|
| status | 200/500 200表示成功 500表示失败 | 状态值 |
| msg | 提示信息 | |
| data | 数组 | 返回的数据 |
4.8.2 登录
功能描述：根据用户名和密码实现登录功能，返回登录标识token
设计思路：(1)接口地址 “/login”post请求 (2)查看数据表信息及数据库字典 (3)设置sql语句
接口文档:
(1)、接口地址：http://localhost:3000/login
(2)、请求方式：post
(3)、请求参数：
| 序号 | 参数名 | 参数类型 | 是否必填 | 备注 |
|---|---|---|---|---|
| 1 | user | 字符串 | 是 | 帐号 |
| 2 | pass | 字符串 | 是 | 密码 |
| 3 | codes | 字符串 | 是 | 用户输入的验证码 |
| 4 | syscode | 字符串 | 是 | 系统生成的验证码 |
(4)、返回数据(json)
4.8.3 token
4.8.3.1 JWT介绍【重点】
什么是JWT(token)？【重点】
Json web token(jwt)，jwt用来在不同主机或不同系统之间传递数据，以解决在不同主机或不同系统之间实现用户身份认证的。
JWT数据由三部分组成：A.B.C【重点】
A:头部(header) {typ:'jwt',alg:'加密算法'}
B:有效载荷(payload) 用来存放用户自定义的数据 比如: {"uid":12354,"uname":"李四"}
C:签名(signature) 用来校验jwt数据是否有效 C=加密算法(加密算法(A).加密算法(B))
本地存储技术：【重点】
1)、cookie: cookie有大小及个数的限制，同时可以被禁用，默认有效时间为整个有效会话期间，但可以设置有效时间；
2)、localStorage:没有大小及个数的限制，不能设置有效时间，默认永久有效；
3)、sessionStorage:没有大小及个数据的限制，不能设置有效时间，默认有效时间为整个有效会话期间；
4.8.3.2 使用步骤
(1) 安装jsonwebtoken
npm i jsonwebtoken
引入:
const jwt=requir("jsonwebtoken")
(2) 设置要加密的数据
(3) 加密已知的数据
语法：
jwt.sign(data,secret,option);
描述：把源数据进行加密返回token
(4) 验证token是否过期
语法：
jwt.verify( token,serect )
描述：验证token是否有效
(5) 代码案例：
(6) 模块化token
4.8.4 获取用户
自主实现
功能描述：根据用户id，获取对应的用户信息
设计思路：
(1)接口地址 “/user” get请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
难点：需要验证token
4.8.5 更新用户
自主实现
功能描述：根据用户id，更新对应的用户信息
设计思路：
(1)接口地址 “/user”post请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
难点：参数较多，需要验证token
4.8.6 更新用户头像
功能描述：根据用户id和传递过来的头像，更新用户头像
设计思路：
(1)接口地址 “/uploadhead”post请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
难点：需要验证token，文件上传
4.8.7 用户的学习记录
自主实现
功能描述：获取当前登录用户的学习记录
设计思路：
(1)接口地址 “/orders” get请求
(2)查看数据表信息及数据库字典
(3)设置sql语句
难点：需要验证token，连表查询