Day 20(07.16)
项目功能
后台管理系统
9528端口为后台系统的前端
登录注册(spring security框架)
权限管理
-
菜单管理:列表的添加、修改、删除
-
角色管理:列表的添加、修改、删除,批量删除、为角色分配菜单
-
用户管理:列表的添加、修改、删除,批量删除、为用户分配角色
-
权限管理表和关系:至少需要5张表
菜单表(包括可以操作的权限的表)、角色表、用户表、角色和菜单关系表,用户和角色关系表
讲师管理
- 讲师列表条件查询分页、讲师添加、修改、删除
课程分类
-
添加课程分类
读取Excel数据,添加到数据库中
-
课程分类列表显示
使用树形结构显示课程分类列表
课程管理(重要)
- 课程列表
- 添加课程
- 添加课程基本信息
- 添加课程大纲(章节和小节)
- 课程信息确认,最终课程发布
- 添加小节时,上传视频课程
统计分析
- 生成统计数据
- 统计数据图表显示
banner管理
订单列表
前台用户系统
3000为前台系统的前端
首页数据显示
-
显示幻灯片,banner轮播图
显示前两条最新的数据
-
显示热门课程
最新的8门课程,或者播放量最高的8门课程
-
显示名师
根据id/时间取前4名
注册
获取手机验证码(阿里云短信服务)
登录
实现流程
登录调用接口返回token字符串,把返回的字符串放到cookie中,创建前端拦截器进行判断,如果cookie里包含token字符串,把token字符串放到header里面,调用接口根据token获取用户信息,把用户信息放到cookie里面,进行显示
-
普通登录
SSO(单点登录):使用的是token方式。还有
另外两种方式:session广播、cookie+Redis
-
微信扫码登录
-
OAuth2
是针对特定问题的解决方案:开放系统间授权、分布式访问
-
如何获取扫码人信息过程
扫码之后微信接口返回code(临时票据),拿着code值请求微信固定地址,得到两个值access token(访问凭证)和openid(微信唯一标识),拿着这两个值再去请求微信的一个固定地址,得到扫码人信息(昵称、头像等)
-
名师列表功能
显示讲师列表带分页
名师详情功能
名师基本信息
课程列表功能
- 条件查询分页列表功能
课程详情页
-
显示课程基本信息(包含课程基本信息、分类、讲师、课程大纲)
-
课程是否需要购买
免费课程,直接观看
付费课程显示立即购买,支付后显示立即观看
课程视频的在线播放
课程微信支付
如果课程是收费过程,点击立即购买,生成一个订单,点击订单页面去支付,生成微信支付二维码,使用微信扫码支付,支付之后,每隔3秒查询支付状态,判断是否支付成功,支付成功之后,更新订单状态为已支付,向支付记录表添加支付成功记录
- 生成课程订单
- 生成微信支付二维码
- 微信支付
项目技术
前后端分离开发
前端技术
vue
基本语法,相关指令
- v-bind:单向绑定,简写为:
- v-model:双向绑定
- v-if
- v-for
- v-html:把标签内容做显示
- v-on:绑定事件或者@加事件
生命周期
- created():页面渲染之前执行
- mounted():页面渲染之后执行
Es6
Element-ui
Node.js
JavaScript的一个环境,模拟出服务器效果,不需要浏览器就能运行js代码
Npm
包管理工具,类似maven(maven管理jar包),npm管理前端的一些包
常用命令
- npm init
- npm install 依赖名称
Babel
转码器,把es6转换为es5
前端模块化
通过一个页面或一个js文件,调用另一个js文件里面的方法
常见问题:es6的模块化无法在node.js执行,需要用babel编辑成es5后再执行
后台系统使用的是vue-admin-template
基于vue+element-ui
前台系统使用的是 Nuxt
基于vue
服务端渲染技术
Echarts
图表工具,统计分析模块使用
后端技术
微服务架构
SpringBoot
本质就是spring,只是快速构建spring工程的工具
启动类
-
包扫描机制:从外向内扫,可以通过@ComponentScan(“com.lujin”)来指定扫描路径
-
可以创建配置类@Configuration来进行配置,不写在启动类中
-
配置文件类型:properties和yml
-
配置文件加载顺序
bootstrap.properties
application.properties
application-dev.properties
SpringCloud
是很多框架的总称,使用这些框架能够实现微服务架构,基于springboot实现
包含的框架
项目中,使用阿里巴巴的nacos,替代了springcloud的一些组件
-
Nacos
作为注册中心,配置中心
-
Feign
服务调用:一个微服务调用另一个微服务,实现远程调用
edu模块调用vod模块实现课程的视频播放,调用order模块查看课程是否购买
-
熔断器
容错处理
-
网关GateWay
springcloud之前用zuul网关,现在用GateWay网关
SpringCloud版本
MyBatisPlus
对mybatis的增强
- 自动填充
- 乐观锁
- 逻辑删除
- 代码生成器
EasyExcel
阿里巴巴提供操作Excel的工具,代码简洁,效率很高
为什么效率高?
对POI进行了封装,采用SAX方式进行解析,SAX是一行一行读取,不会产生内存溢出问题
DOM是一次性拿数据
项目应用在了添加课程分类,读取Excel数据
Spring Security
在项目中整合实现权限管理
SpringSecurity框架组成:认证和授权
登录认证过程
- 登录输入用户名密码,查询数据库,查看登录用户权限列表
- 把用户名和权限列表存到Redis中,以key:用户名,value:用户权限列表 形式存储。
- 根据用户名返回token字符串
- 把token放到cookie,并在header中放token值
- 通过SpringSecurity从header中获取token,从token获取用户名,拿着用户名从Redis获取权限列表
- 由SpringSecurity给当前用户赋予权限,可以进行相关操作
代码执行过程
- 输入用户名和密码后,进入认证过滤器attemptAuthentication获取用户名和密码
- 然后调用查询类UserDetailServiceImpl根据用户名查询用户信息和用户具有的权限,通过security对象返回,即认证成功
- 认证成功后,调用认证过滤器的成功的方法successfulAuthentication,获取返回对象,根据对象里面用户名生成token,把用户名和权限信息放到Redis,返回生成token
- 然后通过授权过滤器,调用UsernamePasswordAuthenticationToken方法,从header中获取token信息,根据token信息获取用户名称,根据用户名称从Redis查询数据,给用户授权
Redis
首页数据通过Redis进行缓存
Redis数据类型
string、set、list、哈希、有序set
什么样的数据适合用Redis做缓存
不经常修改、不太重要的数据
Nginx
反向代理服务器
请求转发、负载均衡、动静分离
OAuth2+JWT
OAuth2:针对特定问题的解决方案,即生成一个字符串,包含数据
JWT:制定规则生成token,包含三部分:header、主体部分、签名哈希
HttpClient
发送请求返回响应的工具,不需要浏览器完成请求和响应过程
项目中应用场景:微信登录获取扫码人信息,微信支付查询支付状态
Cookie
- 客户端技术,存到客户端或者浏览器中
- 每次发送请求会带着cookie值发送
- cookie有默认会话级别(默认有效时长):关闭浏览器cookie默认不存在,但是可以设置cookie有效时长setMaxAge
微信登录
微信支付
阿里云OSS
文件存储服务器
应用:添加讲师时上传讲师头像
阿里云视频点播
- 视频上传、删除、播放
- 整合阿里云视频播放器进行视频播放
- 使用视频播放凭证(因为地址可能加密,加密后不能直接通过地址播放,所以需要使用播放凭证来播放)
阿里云短信服务
注册的时候发送手机验证码
Git
代码提交到远程Git仓库
Docker+Jenkins
- 手动打包
- IDEA打包
- Jenkins自动化部署过程
存在问题
前端问题
路由切换问题
多次路由跳转到同一个vue页面,页面中created方法只会执行一次
解决方案:使用vue监听
ES6模块化运行问题
Nodejs不能直接运行ES6模块化代码,使用Babel把ES6转换为ES5执行
但是Nodejs可以运行ES6代码,只是不能运行ES6模块化代码
后端问题
mp生成19位id值问题
mp生成id值是19位,JavaScript处理数字类型值的时候,只会处理到16位
解决办法:让实体类中id类型为string类型,然后自动填充时type=IDType.ID_WOEKER_STR
跨域问题
访问协议、IP地址、端口号,这三个任何一个不一样就会产生跨域
解决方案:在controller加注解@CrossOrigin或者通过网关解决,在网关中统一处理,添加一个配置类
但是两种方案不能同时使用
413问题
- 上传视频时,因为Nginx有上传文件大小限制,如果超过Nginx大小,会出现413问题
- 413错误:请求体过大
- 解决方案:在Nginx配置客户端大小
- 响应状态码:403跨域、302重定向
Maven加载问题
Maven加载项目时,默认不会加载src 的java文件夹里面的xml文件,只会加载java文件,而mapper中有xml文件
解决方案:直接将xml文件复制到target目录;或在pom文件中进行配置
面试可能问题
-
课程如何判定是否已经发布?
数据库表中有一个字段status,为1就正式发布了,在前台用户系统中可以看到
-
课程添加过程中,中途停止课程添加,重新添加新的课程,如何找到之前没有发布完成的课程,继续发布?
来到课程列表,上方有一个下拉框,是选择课程发布状态的,找到未发布,从中找到想继续发布的课程,然后每个课程后面都有编辑课程信息,编辑课程大纲等功能(超链接),可以从这里继续编辑想要发布的未发布的课程
-
如何实现的单点登录?
使用的token的方式
-
token如何生成的?
使用JWT生成token字符串
JWT有三部分组成:jwt头信息、有效载荷(包含主体信息、用户信息)、签名哈希(防伪标志)
项目描述
示例
在线教育系统,分为前台网站系统和后台运营平台,B2C模式。
前台用户系统包括课程、讲师、问答、文章几大大部分,使用了微服务技术架构,前后端分离开发。
后端的主要技术架构是:SpringBoot + SpringCloud + MyBatis-Plus + HttpClient + MySQL + Maven+EasyExcel+ nginx
前端的架构是:Node.js + Vue.js +element-ui+NUXT+ECharts
其他涉及到的中间件包括Redis、阿里云OSS、阿里云视频点播
业务中使用了ECharts做图表展示,使用EasyExcel完成分类批量添加、注册分布式单点登录使用了JWT