项目介绍、接口文档、JWT的使用

一、项目介绍

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，连表查询