谷粒学院项目总结

谷粒学院项目总结

文章目录

谷粒学院项目总结

后台管理系统的功能

登录功能权限功能讲师管理课程分类

添加课程课程分类列表 课程管理

课程列表-分页条件查询添加课程添加小节视频 统计分析 前台用户系统

首页数据显示

幻灯片显示热门课程显示热门老师显示 注册功能登陆功能

普通登陆微信扫码登陆 名师列表名师详情课程列表课程详情课程视频在线播放课程支付功能 前端技术点

前后端分离开发VueElement-uinode-jsNPMBable前端模块化后台系统使用vue-admin-template前台系统使用NuxtEcharts 后端技术总结

项目采用微服务框架SpringBootSpringCloudMybatisPlusEasyExcelSpringSecurityRedisNginxOAuth2+JWTHttpClientcookie微信登录微信支付阿里云OSS阿里云视频点播阿里云短信服务GITDocker+Jenkins 项目中问题总结

1、前端问题-路由切换问题2、前端问题-ES6模块化运行问题3、mp生成19位id值4、跨域问题5、413问题6、Maven加载问题7、短信模块申请8、微信二维码生产 项目描述

面试问题系统中都有那些角色？数据库是怎么设计的？前后端联调经常遇到的问题前后端分离项目中的跨域问题是如何解决的
项目采用B2C模式，包含后台管理系统和前台用户系统

前端

前台系统后台系统 后端

cancal_client - 数据同步common - 公共

common_utils - 工具类service_base - swagger和异常处理service_security - 用户认证和授权 infrastructure - 网关service - 业务

edu - 课程、讲师、章节、小节、登录、评价、视频管理oss - 连接阿里云上传头像vod - 上传视频msm - 手机短信登录order - 微信支付ucenter - 微信登录cms - 横幅acl - 权限管理sta - 统计人数 后台管理系统的功能 登录功能

SpringSecurity框架

权限功能

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

角色管理：列表、增删改查、为角色分配菜单

用户管理：列表、增删改查、批量删除、为用户分配角色

数据库：使用五张表单

菜单、角色、角色菜单、用户、用户角色

讲师管理

条件查询分页列表、添加、修改、删除

课程分类 添加课程

读取excel中的课程分类数据，添加到数据库中 - 使用EasyExcel

课程分类列表

使用树形结果实现课程分类列表

课程管理 课程列表-分页条件查询

添加课程

课程发布流程：

第一步填写课程基本信息

第二步添加课程大纲（章节和小节）

第三步课程信息确认，最终课程发布

**课程如何判断是否已经被发布了？**使用status字段

课程添加过程中，中途把课程停止添加，重新去添加新的课程，如何找到之前没有发布完成课程，继续进行发布？ 到课程列表中根据课程状态查询未发布的课程，点击课程右边超链接把课程继续发布完成

添加小节视频

利用阿里云的视频点播功能

统计分析

生成统计数据

生成统计数据表

前台用户系统 首页数据显示 幻灯片显示

热门课程显示

热门老师显示

注册功能

获取手机号进行注册 - 阿里云短信服务功能

登陆功能

普通登陆

SSO 单点登陆 - 使用JWT生成token字符串

JWT - 使用JWT生成token

登陆流程

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

微信扫码登陆

OAuth2

是针对特定问题解决方案主要有两个问题：开放系统间授权，分布式访问

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

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

名师列表

名师详情

课程列表

课程详情

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

判断是否需要购买课程 - 用到了微信支付

课程视频在线播放 课程支付功能

生成课程订单生成微信支付二维码微信支付

微信支付实现流程：

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

前端技术点 前后端分离开发 Vue

基本语法常见指令 ：

v-bindv-modelv-ifv-forv-html // 标签内容显示 绑定事件： v-on-click @click生命周期：

created() 页面渲染之前mounted()页面渲染之后 ES6规范 Element-ui node-js

是Javascript运行环境，不需要浏览器就可以直接运行js代码，不需要Tomcat就可以访问，模拟服务器效果

NPM

包管理工具:类似后端Maven

npm命令:

npm initnpm install xxxx Bable

转码器，可以把ES6转换为ES5

前端模块化

通过一个页面或者js文件，调用另一个js文件里面的方法

问题：es6的模块化无法在Node.js中执行，需要用到Bable进行转换

后台系统使用vue-admin-template

基于vue+Element-ui

前台系统使用Nuxt

基于Bue

服务器渲染技术

Echarts

图标工具

后端技术总结 项目采用微服务框架

把项目可以拆分多个独立的模块，每一个模块都可以独立运行，每一个模块都是独立部署的

SpringBoot

SpringBoot就是Spring,是快速构建Spring工程的脚手架

启动类，扫描机制设置扫描规则配置类注解springBoot配置文件

propertiesyml 配置文件的加载顺序:boostrap application application-dev SpringCloud

是很多框架的总称，使用这些框架可以实现微服务的架构，基于springBoot实现

框架

Nacos - 服务发现- Netfix Eureka服务调用 - Netfix Feign熔断器 - Hystrix服务网关 - Spring Cloud GateWay分配式配置 - Nacao - Spring Cloud Config消息总线 - Nacos - Spring Cloud Bus

使用阿里巴巴的Nacos代替某些组件

使用nacos作为注册中心和配置中心，持久化到数据库中

Feign - 服务调用，一个微服务调用另一个微服务，实现远程调用

熔断器：容错处理，一个服务调用另一个服务，另一个服务挂掉了，需要使用熔断器

网关：跨域和拦截

MybatisPlus

（1）MyBatisPlus就是对MyBatis做增强

（2）自动填充

（3）乐观锁

乐观锁实现方式：

取出记录时，获取当前version更新时，带上这个version执行更新时， set version = newVersion where version = oldVersion如果version不对，就更新失败

（4）逻辑删除 - 数据库上并没有被删除

（5）代码生成器

EasyExcel

课程分类管理

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

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

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

SpringSecurity

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

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

（3）SpringSecurity登录认证过程

（4）执行过程

Redis

首页数据通过redis进行缓存redis数据类型：字符串、set、list、hash、有序set使用redis进行缓存，不同重要的数据和需要经常改变的数据放入redis中 Nginx

（1）反向代理服务器

（2）请求转发（修改配置文件），负载均衡，动静分离

OAuth2+JWT

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

开放系统授权分布式访问问题

（2）JWT包含三部分

HttpClient

发送请求返回响应的工具，不需要浏览器完成请求和响应的过程应用场景：微信登陆获取扫码人信息、微信支付查看支付状态 cookie

客户端技术每次发送请求都会带着cookie进行发送cookie默认会话级别，关闭浏览器cookie默认不存在cookie可以设置有效时长，setMaxAge 微信登录 微信支付 阿里云OSS

（1）文件存储服务器

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

阿里云视频点播

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

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

* 使用视频播放凭证 - 播放加密的视频和不加密的视频

阿里云短信服务

注册时，发送手机验证码

GIT

提交到远程Git库

Docker+Jenkins

（1）手动打包运行

（2）idea打包

（3）jenkins自动化部署过程

项目中问题总结 1、前端问题-路由切换问题

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

（2）解决方案：使用vue监听

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

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

3、mp生成19位id值

（1）mp生成id值是19位，Javascript处理数字类型值时候，只会处理到16位

4、跨域问题

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

（2）跨域解决：

在Controller添加注解通过网关解决修改nginx里面的配置 5、413问题

（1）上传视频时候，因为Nginx有上传文件大小限制，如果超过Nginx大小，出现413

（2）413错误：请求体过大

（3）在Nginx配置客户端大小

（4）响应状态码：413 403 302

6、Maven加载问题

（1）maven加载项目时候，默认不会加载src-java文件夹里面xml类型文件的

（2）解决方案：

直接复制xml文件到target目录通过配置实现 7、短信模块申请

使用测试，绑定一个固定的手机号

8、微信二维码生产

修改配置文件 
server.port=8160
微信开放平台 appid
wx.open.app_id=wxed9954c01bb89b47
微信开放平台 appsecret
wx.open.app_secret=a7482517235173ddb4083788de60b90e
微信开放平台 重定向url
wx.open.redirect_url=http://localhost:8160/api/ucenter/wx/callback

项目描述

在线教育系统，分为前台网站系统和后台运营平台，B2C模式。

前台用户系统包括课程、讲师、问答、文章几大大部分，使用了微服务技术架构，前后端分离开发。后端的主要技术架构是：SpringBoot + SpringCloud + MyBatis-Plus + HttpClient + MySQL + Maven+EasyExcel+ nginx前端的架构是：Node.js + Vue.js +element-ui+NUXT+ECharts其他涉及到的中间件包括Redis、阿里云OSS、阿里云视频点播业务中使用了ECharts做图表展示，使用EasyExcel完成分类批量添加、注册分布式单点登录使用了JWT项目前后端分离开发，后端采用SpringCloud微服务架构，持久层用的是MyBatis-Plus，微服务分库设计，使用Swagger生成接口文档接入了阿里云视频点播、阿里云OSS。系统分为前台用户系统和后台管理系统两部分。前台用户系统包括：首页、课程、名师、问答、文章。后台管理系统包括：讲师管理、课程分类管理、课程管理、统计分析、Banner管理、订单管理、权限管理等功能。 面试问题 系统中都有那些角色？数据库是怎么设计的？

前台：会员（学员）

后台：系统管理员、运营人员

后台分库，每个微服务一个独立的数据库，使用了分布式id生成器

前后端联调经常遇到的问题

1、请求方式post、get

2、json、x-wwww-form-urlencoded混乱的错误

3、后台必要的参数，前端省略了

4、数据类型不匹配

5、空指针异常

6、分布式系统中分布式id生成器生成的id 长度过大（19个字符长度的整数），js无法解析（js智能解析16个长度：2的53次幂）

​ id策略改成 ID_WORKER_STR

前后端分离项目中的跨域问题是如何解决的

后端服务器配置：我们的项目中是通过Spring注解解决跨域的 @CrossOrigin

也可以使用nginx反向代理、httpClient、网关

类管理、课程管理、统计分析、Banner管理、订单管理、权限管理等功能。