• 项目介绍

本项目采用前后端分离开发,其中

后端技术栈

SpringBoot作为快速开发框架;

SpringCloud作为微服务架构框架;

Nacos-服务发现、分布式配置;

Feign-服务调用;

Hystrx-熔断器;

GateWay-服务网关;

Redis作为非关系型数据库为短信验证码、主页数据缓存等提供数据存储;

MyBatis-Plus作为持久层框架。

前端技术栈

Vue作为前端开发框架;

Element-ui作为后台管理系统模板框架;

nodejs作为JavaScript运行环境;

Echars作为数据图表工具。

第三方技术

阿里云OSS作为对象存储服务;

阿里云视频点播服务;

阿里云短信服务;

EsayExcel作为读取Excel工具;

  • 数据库

基于微服务架构开发在线教育网站_视频点播

 

  •  微服务架构

基于微服务架构开发在线教育网站_微服务_02

  • 功能点分析

 

后台管理系统

登录界面和权限管理:登录采用SpringSecurity,对用户进行权限管理,过程是首先通过SpringSecurity的拦截器TokenLoginFilter将登录信息拦截,调用实现类查出用户信息,对调用配置类密码进行处理,比对成功调用登录成功方法,并向前端返回一个token,比对失败调用失败方法返回失败信息。

 

基于微服务架构开发在线教育网站_微服务_03基于微服务架构开发在线教育网站_在线教育_04

讲师管理

主要有讲师列表和添加讲师

讲师列表主要是遍历讲师表,将数据库信息发送给前端,这里头衔列在数据库中使用的是0和1来代表高级讲师和首席讲师,而在前端使用三元运算来实现头衔的显示,同时这里也提供了根据讲师名称以及时间段的查询功能;

添加讲师中主要是讲师头像,这里使用的是阿里云的OSS(对象存储)来存储讲师头像可以从eacher表中看到avatar字段中存储的是头像的地址,这里上传头像会调用后端的oss服务,这个服务就是上传头像或者文件的,在这个服务中设置AccessKey、accessKeySecret、endpoint以及bucketName就可以连接上你的阿里云OSS,同时也可以设置所存储的文件夹,具体业务细节可以参考阿里云OSS的SDK。

基于微服务架构开发在线教育网站_视频点播_05基于微服务架构开发在线教育网站_微服务_06

课程分类

课程分类这里课程采用的是一级分类和二级分类的划分模式,一级分类的id是二级分类的pid,以这样的形式来关联两种分类的关系。

导入课程分类这里使用了EsayExcel,首先从前端读取file文件,调用EasyExcel的read方法向里面传入文件输入流InputStream,所需要读取的实体类的class对象以及监听器SubjectExcelistener,具体的监听器实现流程可以参考EasyExcel官方文档。

 课程管理

发布课程,首先是课程的基本信息的存入,然后是课程的大纲和小节的存储,这里存储课程小节时需要将本节的课程视频上传到阿里云的视频点播服务中,这里同样是将前端传回的文件流进行处理,这里使用的是vod模块微服务,与讲师头像上传类似,具体可以参考阿里云视频点播的SDK,最后是课程的发布,这里是对课程状态的改变。

课程列表,这里提供了查询功能以及对课程的编辑和删除功能。

基于微服务架构开发在线教育网站_微服务_07

基于微服务架构开发在线教育网站_微信_08

 

统计分析

这里采用了微服务之间的调用,因为这个模块需要对不同的微服务中的数据进行统计,所以将这个模块单独创建为一个微服务来对其他微服务进行调用,这里调用的方法采用了Feign,使用方法为,首先先需要调用的服务中创建一个接口,在接口上加上@FeignClient("服务的name")(name 可以在Nacos中看到,同时也要保证调用的服务于被调用的服务都要在Nacos中注册)将需要调用的方法复制过来,其中请求地址需要加上controller类的地址,为调用端的启动类上添加@EnableFeignClients注解,这样就可以调用其他微服务中的方法了。统计分析模块就是让其他模块为其提供所需要的数据,然后由statistics这个微服务处理。而前端是图表则采用了Echars这个工具来实现图表的显示。

基于微服务架构开发在线教育网站_微信_09

前端网站

 主页

轮播图采用独立的微服务,来实现轮播图。前端使用swiper组件来实现。

热门课程根据课程发布时间,将前八个课程展示在主页;

名师根据课程发布时间,将前四位名师展示先主页。

基于微服务架构开发在线教育网站_视频点播_10

 

课程界面

主要用于显示课程以及根据课程分类来查找所需的课程。

基于微服务架构开发在线教育网站_微服务_11

 

课程详情界面

主要有课程的详细信息,以及购买链接,这里采用微信支付的方式。同时本页面也支持评论功能,可以在登录后对课程进行评论。

基于微服务架构开发在线教育网站_微信_12

 

讲师界面

主要是显示全部讲师

基于微服务架构开发在线教育网站_微信_13

讲师详情界面

主要显示讲师的详细信息以及讲师所讲的课程

基于微服务架构开发在线教育网站_微信_14

登录、注册界面

注册采用了通过短信验证的方式实现注册

通过短信验证的方式,这里使用到了阿里的短信服务,短信服务使用独立的微服务模块,其中主要的实现流程为,首先我们通过前端获取到注册者的手机号,需要从Redis中查询在过去五分钟内是否已经发送过验证码,如果没有,我们在本地生成一个验证码然后发送到阿里云的短信服务,这里同样与OSS和视频点播服务一样需要regionId等,具体的实现流程可以参考阿里云短信服务的SDK,当用户收到短信后,将验证码输入后,数据完整的传入后端会通过Redis获取验证码,与注册者的验证码进行比对,如果相同将注册成功。

登录采用了手机号密码的方式和微信登录的方式来实现登录

 

通过微信登录的方式,这里首先要生成一个登录的二维码,通过访问微信提供的一个固定的地址来获取二维码地址,扫码后,微信会向后端接口返回一个code(临时票据),通过这个code去访问微信的一个固定地址,得到一个access_token(访问凭证)和openid(微信唯一标识),然后再通过这两个去访问微信的一个固定地址来获取用户信息。获取完后会将信息放入ucenter(用户表)中,同时通过jwt工具生成一个token返回给前端。

通过手机号密码的方式,首先从前端获取到用户的手机号和密码,这里需要先对手机号密码进行非空判断,当然也可以进行异常处理,验证成功后通过jwt工具生成一个token返回给前端。

 

基于微服务架构开发在线教育网站_视频点播_15

  • 总结

 本项目在编写中所遇到的问题

后端

跨域问题,在项目之初使用@CrossOrigin注解解决,之后结合前端使用nginx实现反向代理,前端只需访问一个地址就可以访问到所有微服务,在项目最后通过gateway网关来实现;

实体类注解偶尔失效例如:@TableField(fill = FieldFill.INSERT),解决办法Maven去clear或install一下;

服务端口号偶尔会被其他程序占用,在任务管理器中找到结束进程,或者直接重启电脑;

有时写mapper可能会用xml写一些复杂的sql,但在启动后找不到mapper,在配置文件中加上xml文件的路径,例如mybatis-plus.mapper-locations=classpath:com/atguigu/eduservice/mapper/xml/*.xml

当取url中传的值时最好加上@PathVariable注解,在取实体类参数是加上@RequestBody注解,本项目后端返回的值为JSON格式的所以在controller上也要加上@RestController注解。

前端

在向cookie传值是需要将值转换成JSON格式,在取值时要将值再转换回来;