博客

谷粒学院【网上教育】总结

  • Post author:
  • Post category:其他




一、项目的启动运行



1. 后端项目

  1. 将

    后端项目

    克隆到本地，导入到idea中
  2. nacos, 在目录下，打开bin文件夹，双击

    startup.cmd
  3. redis，在目录下，使用cmd，然后输入

    redis-server redis.windows.conf
  4. 将项目中 sql文件 导入到 navicat 中
  5. 修改配置文件（包含mysql、nacos、redis、短信、微信登录 / 支付、短信）配置
  6. 启动后台各模块（注意启动顺序：

    ApiGatewayApplication

    ，

    ServiceAclApplication

    、

    EduApplication

    ）其余服务没有顺序
  7. 课程管理 后台swagger地址（举例）：http://localhost:8001/swagger-ui.html


注意

：

  1. 前期学习阶段使用了nginx, 在目录下，使用cmd，然后输入

    nginx.exe
  2. 如果关闭cmd窗口，nginx不会停止的。需要使用

    nginx.exe -s stop

    进行手动关闭，重启命令

    nginx -s reload
  3. 数据同步模块（

    CanalApplication

    ）需要修改

    CanalClient

    类中 35 行，服务器mysql地址，否者模块无法启动。



2. 前端项目

管理端

  1. 将管理端前台（

    education-vue-admin

    ）项目克隆到本地，导入到vscode中
  2. 安装依赖

    npm install
  3. 启动项目

    npm run dev
  4. 浏览器访问：http://localhost:9528/

用户端

  1. 将用户前端（

    education-vue-web

    ）项目，导入到vscode中
  2. 安装依赖

    npm install
  3. 启动项目

    npm run dev
  4. 浏览器访问：http://localhost:3000/


注意

：如果项目启动还有问题可以在gitee的

issues

下留言，或者留言到

csdn

评论中



二、项目源码

后端接口源码（包含数据库、学习笔记）：

https://gitee.com/StarSea007/guli_parent

前端页面和后端页面源码：

https://gitee.com/StarSea007/vscode2020

  • education-vue-admin：后端的前台页面
  • education-vue-web：前端的前台页面

    vue1010：项目中练习的页面


注意

：课程评论功能已完成。



三、模块与数据库对应



1、数据库对应

在这里插入图片描述



2、模块对应

在这里插入图片描述



四、在线教育项目功能点

项目采用B2C模式，包含后台管理员系统和前端用户系统。



（一）项目后台管理系统功能



1. 登录功能（SpringSecurity）



2. 权限管理功能

（1）菜单管理：列表、增加、修改、删除

（2）角色管理

  • 列表、增加、修改、删除、批量删除
  • 为角色分配菜单

（3）用户管理

  • 列表、增加、修改、删除、批量删除
  • 为用户分配角色

（4）权限管理表和关系

  • 使用5张表（acl_permission、acl_role、acl_role_permission、acl_user、acl_user_role）



3. 讲师管理模块

（1）条件查询分页列表，添加，修改，删除



4. 课程分类模块

（1）添加课程分类

通过读取Excel里面课程分类数据，添加到数据库中

（2）课程分类列表

使用树形结构显示课程分类模块



5. 课程管理模块

（1）课程列表功能

（2）添加课程

  • 课程发布流程：第一步填写课程基本信息，第二步添加课程大纲（章节和小节），第三步课程信息确认，最终课程发布。
  • 课程如何判断是否已经发布了？当没点最终发布，状态就是未发布，当点最终发布，状态（Status）就是已发布。
  • 课程添加过程中，中途把课程停止添加，重新去添加新的课程，如何找到之前没有发布完成课程，继续进行发布？ 到课程列表中根据课程状态查询未发布的课程，点击课程右边超链接把课程继续发布完成。

（3）添加小节上传课程视频



6. 统计分析模块

（1）生成统计数据

（2）统计数据图表显示



（二）项目前台管理系统功能



1. 首页数据显示

（1）显示幻灯片功能

（2）显示热门课程

（3）显示名师



2. 注册功能

（1）获取手机验证码



3. 登录功能


（1）普通登录和退出

  • SSO（单点登录）

    在这里插入图片描述
  • 使用JWT生成token字符串
  • JWT有三部分组成：头信息，有效载荷，签名哈希
  • 登录实现流程

登录调用登录接口返回token字符串，把返回token字符串放到cookie里面，创建前端拦截器进行判断，如果cookie里面包含token字符串，把token字符串放到header里面。调用接口根据token获取用户信息，把用户信息放到cookie里面，进行显示。


（2）微信扫描登录

  • OAuth2

    是针对特定问题解决方案

    主要有两个问题：开放系统间授权，分布式访问。

  • 如何获取扫描人信息过程？

    扫描之后微信接口返回code（临时票据），拿着code值请求微信固定地址，得到两个值：access_token（访问凭证）和openid（微信唯一标识）,你拿着这两个值再去请求微信固定的地址，得到微信扫描人信息（比如昵称，头像等）



4. 名师列表功能



5. 名师详情功能



6. 课程列表功能

（1）条件查询分页列表功能



7. 课程详情页

（1）课程信息显示（包含课程基本信息，分类，讲师，课程大纲）

（2）判断课程是否需要购买

（3）课程评论



8. 课程视频在线播放



9. 课程支付功能（微信支付）

（1）生成课程订单

（2）生成微信支付二维码

（3）微信最终支付

  • 微信支付实现流程：

    如果课程是收费课程，点击立即购买，生成课程订单。点击订单页面去支付，生成微信支付二维码。使用微信扫描支付二维码实现支付。支付之后，每隔3秒查询支付状态（是否支付成功），如果没有支付成功等待，如果支付成功之后，更新订单状态（已经支付状态），向支付记录表添加支付成功记录。



五、在线教育项目技术点



（一）前端技术



1. 在线教育项目采用前后端分离开发



2. 项目使用前端技术

（1）vue基本语法

  • 常见指令 ： v-bind，v-model，v-if，v-for，v-html
  • 绑定事件： v-on-click，@click
  • 生命周期：created() 页面渲染之前，mounted()页面渲染之后
  • ES6规范

（2）Element-ui

（3）nodejs

  • 是JavaScript运行环境，不需要浏览器直接运行js代码，模拟服务器效果

（4）NPM

  • 包管理工具，类似于Maven
  • npm命令： npm init， npm install 依赖名称

（5）Babel

  • 转码器，可以把ES6代码转换成ES5代码

（6）前端模块化

  • 通过一个页面或者一个js文件，调用另外一个js文件里面的方法
  • 问题：ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行

（6）后台系统使用vue-admin-template

  • 基于vue+Element-ui

（7）前台系统使用Nuxt

  • 基于vue
  • 服务器渲染技术

（8）Echarts

  • 图表工具



（二）、后端技术1



1. 项目采用微服务架构



2. SpringBoot

（1）SpringBoot本质是就是Spring，只是快速构建Spring工程脚手架

（2）细节：

  • 启动类包扫描机制
  • 设置扫描规则 @ComponentScan(“包路径”)
  • 配置类

（3）SpringBoot配置文件

  • 配置文件类型：properties和yml
  • 配置文件加载顺序：bootstrap application application-dev



3. SpringCloud

（1）是很多框架总称，使用这些框架实现微服务架构，基于SpringBoot实现

（2）组成框架有哪些？

（3）项目中，使用阿里巴巴Nacos，替代SpringCloud一些组件

（4）Nacos

  • 使用Nacos作为注册中心
  • 使用Nacos作为配置中心

（5）Feign

  • 服务调用，一个微服务调用另外一个微服务，实现远程调用

（6）熔断器

（7）Gateway网关

  • SpringCloud之前zuul网关，目前Gateway网关

（8）版本



4. MyBatisPlus

（1）MyBatisPlus就是对MyBatis做增强

（2）自动填充

（3）乐观锁

（4）逻辑删除

（5）代码生成器



5. EasyExcel

（1）阿里巴巴提供操作excel工具，代码简洁，效率很高

（2）EasyExcel对poi进行封装，采用SAX方式解析

（3）项目应用在添加课程分类，读取excel数据



（三）后端技术2



1. Spring Security

（1）在项目整合框架实现权限管理功能

（2）SpringSecurity框架组成：认证和授权

（3）SpringSecurity登录认证过程

（4）SpringSecurity代码执行过程



2. Redis

（1）首页数据通过Redis进行缓存

（2）Redis数据类型

（3）使用Redis作为缓存，不太重要或者不经常改变数据适合放到Redis作为缓存



3. Nginx

（1）反向代理服务器

（2）请求转发，负载均衡，动静分离



4. OAuth2+JWT

（1）OAuth2针对特定问题解决方案

（2）JWT包含三部分



5. HttpClient

（1）发送请求返回响应的工具，不需要浏览器完成请求和响应的过程

（2）应用场景：微信登录获取扫描人信息，微信支付查询支付状态



6. Cookie

Cookie特点：

  • 客户端技术
  • 每次发送请求带着cookie值进行发送
  • cookie有默认会话级别，关闭浏览器cookie默认不存在了，
  • 但是可以设置cookie有效时长 setMaxAge



7. 微信登录



8. 微信支付



9. 阿里云OSS

（1）文件存储服务器

（2）添加讲师时候上传讲师头像



10. 阿里云视频点播

（1）视频上传、删除、播放

（2）整合阿里云视频播放器进行视频播放

  • 使用视频播放凭证



11. 阿里云短信服务

注册时候，发送手机验证码



12. Git

代码提交到远程Git仓库



13. Docker+Jenkins

（1）手动打包运行

（2）idea打包

（3）jenkins自动化部署过程



六、项目截图



1. 管理端页面

  • 权限管理

    在这里插入图片描述
  • 讲师列表

    在这里插入图片描述
  • 课程分类列表

    在这里插入图片描述
  • 导出课程分类

    在这里插入图片描述
  • 发布课程

    在这里插入图片描述
  • 统计图表

    在这里插入图片描述



2. 用户端页面

  • 首页

    在这里插入图片描述

  • 注册页

    在这里插入图片描述

  • 课程

    在这里插入图片描述

  • 课程详情

    在这里插入图片描述

  • 课程评论

    在这里插入图片描述

  • 讲师

    在这里插入图片描述

  • 讲师详情

    在这里插入图片描述

  • 订单支付详情

    在这里插入图片描述



七、在线教育项目问题总结



1. 前端问题-路由切换问题

多次路由跳转到同一个vue页面，页面中created方法只会执行一次

解决方案：使用vue监听。



2. 前端问题-ES6模块化运行问题

Nodejs不能直接运行ES6模块化代码，需要使用Babel把ES6模块化代码转换ES5代码 执行



3. 跨域问题

访问协议，ip地址，端口号，这三个如果有任何一个不一样，产生跨域

跨域解决：

  • 在Controller添加

    @CrossOrigin

    注解
  • 也可通过网关统一解决



4. nginx 遇到的问题

如果你前端访问的是nginx 而 不是 gateway 进行路由的话，需要在每个Controller上写

@CrossOrigin

注解进行跨域处理。

因为我使用的是gateway，所以在网关中进行统一跨域处理。



5. Maven依赖加载失败

idea 自己下载maven依赖时，可能出现下载失败的原因；经过排查由于maven 官网没有

aliyun-sdk-vod-upload

对应的依赖。

在我给提供 对应的jar文件中，进行手动安装，在jar对应的文件夹下进入cmd窗口，输入如下命令：


mvn install:install-file -DgroupId=com.aliyun -DartifactId=aliyun-sdk-vod-upload -Dversion=1.4.11 -Dpackaging=jar -Dfile=D:/aliyun-sdk-vod-upload-1.4.11.jar



6. 管理端 权限管理 不显示问题

我们在跟着视频做项目，发现讲到权限管理模块时，通过控制台日志的打印 可以看到 数据已经查询回来，但是页面不显示树结构。

原因的element ui 的依赖版本过低导致的。

先卸载之前的版本

npm uninstall element-ui

，再安装最新版

npm install element-ui -S

此时重新启动项目就可以看到树形数据正常显示了。



7. 微信扫码失效问题

视频中讲解的微信配置信息是最开始的，由于尚硅谷重新修改了微信扫码配置，由此导致我们在运行项目发现二维码失效。

我们的做法：将

service_ucenter

模块下的 端口改为 8160，同时将 微信重定向的url改为

wx.open.redirect_url=http://localhost:8160/api/ucenter/wx/callback

前端点击微信扫码图标的访问地址改为

href="http://localhost:8160/api/ucenter/wx/login"



8. 项目中头像

如果项目中给的头像不喜欢的话，可以改为动图头像

https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif



9. 阿里云的权限

我们在使用阿里云的短信、视频、图片存储等，在

AccessKey管理

中如果添加了子用户，一定要添加如下的权限，否则运行功能会报错。

在这里插入图片描述

后端接口源码（包含数据库、学习笔记）：

https://gitee.com/StarSea007/guli_parent


前端页面和后端页面源码：

https://gitee.com/StarSea007/vscode2020


如果有收获！！！ 希望老铁们来个三连，点赞、收藏、转发。



创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客


版权声明：本文为weixin_45606067原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。