一、项目介绍

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.5 项目工作流程

针对项目型的任务，简单的说就是走下面的流程：了解需求，开需求分析会议，确定开发任务，推进开发进度，测试，试点，交付。当然每一项又会有具体的流程。

● 前期调研（调查你这个项目值不值得开发）

● 产品提出需求，给出产品原型图（RP图）

● 需求评审，早例会进行需求评审，产品经理阐述原型图。

● 指派研发任务（排期）

○ 前端任务

○ 后端任务

○ UI任务

○ 移动端任务（如果有） app / 小程序

● 阶段验收，根据进度，进行效果验收

● 功能测试

● 项目发布

● 额外的：文档编写技巧（后端的）

○ 接口功能描述

○ 请求方式描述

○ 接口请求参数描述

○ 接口响应参数描述

二、初始化项目及组员划分

(1)使用express脚手架，生成项目基本结构

G:\>express --view=ejs  uCourse
G:\>cd uCourse
G:\uCourse\>npm i

(2)把nodemon工具配置到 package.json文件中的"scripts"配置项目中：

​
    "scripts": {
        "start": "node ./bin/www",
        "dev": "nodemon ./bin/www"
    },

(3)删除app.js中不需要的一些代码

删除app.js文件中的第一行代码

(4)修改app.js中的404配置和错误配置

优化app.js中第26行代码如下：

//404错误处理中间件：
app.use(function(req, res, next) {
    // next(createError(404));
    next('404错误');
});
​
//逻辑错误处理中间件：
app.use(function(err, req, res, next) {
    res.send({ "status": 500, "msg": err });
});

(5)使用navicat工具导入数据库

使用navicat导入"xiaoUCourse.sql"文件

(6)安装必备模块包：cors、formidable、mysql 等

在项目根目录下执行命令：

npm i   cors  formidable  mysql

(7)运行项目进行开发

npm run dev

(8) 使用git和码云进行托管项目

2.1 小组长要干的

(1)、在码云平台上创建“私有仓库”；

(2)、在“私有仓库”中添加成员，见下图：

(3)、组长要将本地项目代码添加到本地仓库中，然后再将本地git仓库中的代码推送到远程仓库中：

在本地项目中创建.gitignore文件，该文件中的代码如下：

node_modules/
package-lock.json
*.md
*.xlsx
xiaoUCourse.sql

G:\uCourse>git init 
G:\uCourse>git add .
G:\uCourse>git commit -m 初始化项目
G:\uCourse>git push 远程仓库地址   master

(4)、其他项目开发人员克隆远程仓库到本地：

f:>git clone 远程仓库地址

三、数据模型分析

使用navicat工具导入数据库

四、接口开发

4.1 首页课程列表

功能描述：根据请求类别参数的不同获取同步课程或精品课程数据

设计思路：

(1)接口地址 “/course” get请求

(2)传递参数为tid：区分课程类别

接口文档：

(1)、接口地址： http://localhost:3000/course

(2)、 调用方式：get ​ (3)、请求参数(json)：

(4)、返回值：

代码案例：

4.2 分类相关接口

自主实现

4.2.1 地区

功能描述：获取地区数据

设计思路：

(1)接口地址 “/areas” get请求

(2)查看数据表信息及数据库字典

(3)设置sql语句

4.2.2 年级

功能描述：获取年级数据

设计思路：

(1)接口地址 “/grades”get请求

(2)查看数据表信息及数据库字典

(3)设置sql语句

4.2.3 学科

功能描述：获取学科数据

设计思路：

(1)接口地址 “/subjects” get请求

(2)查看数据表信息及数据库字典

(3)设置sql语句

4.2.4 考试类别

功能描述：获取考试类型数据

设计思路：

(1)接口地址 “/cates”get请求

(2)查看数据表信息及数据库字典

(3)设置sql语句

4.3 列表页

功能描述：获取课程列表

设计思路：

(1)接口地址 “/courses”get请求

(2)查看数据表信息及数据库字典

(3)设置sql语句

代码案例：

4.4 搜索

自主实现

功能描述：根据查询关键字获取课程列表

设计思路：

(1)接口地址 “/searchlist”get请求

(2)查看数据表信息及数据库字典

(3)设置sql语句

4.5 课程详情

自主实现

功能描述：根据课程id获取课程详情信息

设计思路：

(1)接口地址 “/courseinfo” get请求

(2)查看数据表信息及数据库字典

(3)设置sql语句

4.6 课程视频

功能描述：根据视频id获取课程的视频地址

设计思路：

(1)接口地址 “/videoplay” get请求

(2)查看数据表信息及数据库字典

(3)设置sql语句

代码案例：

4.7 报名课程

自主实现

功能描述：根据当前登录用户和课程id进行报名

设计思路：

(1)接口地址 “/study” post请求

(2)查看数据表信息及数据库字典

(3)设置sql语句

4.8 个人中心

4.8.1 注册

功能描述：根据用户名和密码实现注册

设计思路：(1)接口地址 “/register”post请求 (2)查看数据表信息及数据库字典 (3)设置sql语句

什么是md5?【重点】

md5是一种加密算法，加密后字符串不可逆、长度都是32位的，通常用来对帐号的密码进行加密。

注意：在项目根中安装uuid、md5包：

npm i uuid md5

4.8.2 登录

功能描述：根据用户名和密码实现登录功能，返回登录标识token

设计思路：(1)接口地址 “/login”post请求 (2)查看数据表信息及数据库字典 (3)设置sql语句

4.8.3 token

4.8.3.1 JTW(token)介绍【重点】

Json web token(JWT)，JWT由三段数据构成，如：A.B.C， JWT数据由服务端生成并返回给客户端存储，而服务端不保存JWT数据，每次客户端访问服务端时都要携带JWT数据给服务端，服务端收到JWT数据后检验JJWT数据，如果校验通过则服务端使用JWT数据，JWT主要用于分布式系统中的用户身份认证。

A:header(头部)，比如：{alg:'加密算法',typ:'JWT'} B: playload(有效载荷)，用来存放用户需要存放的内容，比如：{"uid":"登录成功的用户id","uname":"登录成功的用户名"}

C: signature(签名)，用来在服务器检验jwt数据的，比如：加密算法(加密算法(A).加密算法(B))

客户端存储技术有：cookie、localStorage、sessionStorage【重点】

cookie:有大小、个数的限制、而且还可以被浏览器禁用，cookie默认有效时间为整个有效会话期间；

localStorage：没有大小、个数的限制，不用设置有效时间默认永久有效；

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