开发时间：2022.10.17 - 2022.11.04
开源项目：

  • 服务端：atguigu-course-backend
  • 后台管理系统：atguigu-course-frontend
  • 移动端微信公众号：atguigu-course-mobile

文章目录

  • 一、快速开始
    • 1.1 服务器
    • 1.2 后台管理
    • 1.3 微信公众号
  • 二、系统概述
    • 2.1 项目介绍
    • 2.2 系统流程
    • 2.3 功能架构
    • 2.4 技术架构
    • 2.5 技术选型
  • 三、项目结构
  • 四、数据库设计
    • 4.1 course_acl
    • 4.2 course_activity
    • 4.3 course_live
    • 4.4 course_order
    • 4.5 course_user
    • 4.6 course_vod
    • 4.7 course_wechat
  • 五、功能展示
    • 5.1 后台管理
      • 5.1.1 管理员
      • 5.1.2 讲师管理
      • 5.1.3 课程分类管理
      • 5.1.4 课程管理
      • 5.1.5 优惠券管理
      • 5.1.6 公众号菜单管理
      • 5.1.7 直播课程管理
      • 5.1.8 课程订单管理
      • 5.1.9 直播管理
    • 5.2 公众号
      • 5.2.1 关注
      • 5.2.2 关于我
      • 5.2.3 查询课程
      • 5.2.4 课程分类
      • 5.2.5 课程列表
      • 5.2.6 课程详情
      • 5.2.7 视频播放
      • 5.2.8 购买课程
      • 5.2.9 兑换优惠券
      • 5.2.10 不可用优惠券
      • 5.2.11 可用优惠券
      • 5.2.12 支付模拟
      • 5.2.13 支付成功
      • 5.2.14 课程购买成功
      • 5.2.15 支付消息推送

一、快速开始

1.1 服务器

  1. 克隆仓库：使用 Git 克隆仓库或直接下载仓库压缩包到您的计算机：https://github.com/springbear2020/atguigu-course-backend

  2. 打开工程：使用 IntelliJ IDEA 打开克隆的仓库或解压的工程文件，而后使用 Maven 工具更新父工程 course-backend 依赖

  3. 创建数据库和表：登录 MySQL，依据 course-backend/sql 目录中的七个 SQL 脚本文件，建立七个数据库并导入表和数据

  4. 修改必要配置信息：

    • 修改六个 service-* 模块中的 MySQL 数据库连接信息，设置你自己的数据库用户名和密码
    • 修改六个 service-* 模块中的 Spring Cloud Nacos 服务注册中心的 IP 和端口号，设置你自己的 Nacos 信息
    模块名 监听端口 Nacos 注册中心
    gateway 8888 127.0.0.1:8848
    service-vod 8081 127.0.0.1:8848
    service-order 8082 127.0.0.1:8848
    service-activity 8083 127.0.0.1:8848
    service-user 8084 127.0.0.1:8848
    service-wechat 8085 127.0.0.1:8848
    service-live 8086 127.0.0.1:8848

  5. 修改可选的配置信息：

    • service-live：修改欢拓云直播平台配置信息。若不修改则后台管理系统中直播课程相关的 CRUD 功能异常

      # course-backend/service/service-live/src/main/resources/application.properties
# 欢拓云直播平台用户开放 ID
mtcloud.openId=52255
# 欢拓云直播平台用户开发 Token
mtcloud.openToken=21da08fa1d043e3ae399abf045aad8e8

    • service-user：修改微信公众号测试号的应用 ID 信息和应用密钥以及用户同意授权个人信息后的回调地址，注意此回调地址需要为公网地址才能被微信平台识别。若不修改则微信公众号中的相关功能均不可用。需要在微信公众号测试号中配置网页账号授权回调页面域名

      # course-backend/service/service-user/src/main/resources/application.properties
# 微信公众号测试号应用 ID
wechat.mpAppId=wx6e925452d38d9b30
# 微信公众号测试号应用密钥
wechat.mpAppSecret=fa078dcf0a68aec5aacbafde745f01af
# 微信公众号用户同意授权个人信息后的回调地址，具体流程参看代码注释：cn.edu.whut.springbear.course.service.user.controller.api.WeChatUserApiController
wechat.authorizedCallbackUrl=http://course.5gzvip.91tunnel.com/api/user/info

    • service-vod：修改腾讯对象存储的存储空间信息和腾讯云视频点播服务的应用 ID 信息。若不修改则腾讯云相关图片存储服务不可用，课程小节视频不能上传和查看

      # course-backend/service/service-vod/src/main/resources/application.properties
# 腾讯云对象存储：存储桶名称
tencent.cloud.bucket=course-1308741720
# 腾讯云对象存储：存储空间所在地域
tencent.cloud.region=ap-chongqing
# 腾讯云对象存储：id
tencent.cloud.secretId=AKIDhFbktxxDJLG4e5cyIvPgkaEg4SindGgw
# 腾讯云对象存储：密钥
tencent.cloud.secretKey=6wcCbkgVAf2EBsMdfy6C7nHbopfJo8OR
# 腾讯云视频点播：应用 ID
tencent.vod.appId=1308741720

    • course-wechat：修改腾讯云微信公众号的配置信息以及接口配置信息（需要在微信公众号测试号中配置网页账号授权回调页面域名），若不修改则微信公众号一切功能均将异常；修改微信公众号页面的服务器地址，也即 course-mobile 项目的部署地址，此地址需为公网地址以供微信后台调用，如不修改则微信公众号中的查看课程信息功能异常，不能跳转到任何页面

      # 微信公众号测试号应用 ID
wechat.mpAppId=wx6e925452d38d9b30
# 微信公众号测试号应用密钥
wechat.mpAppSecret=fa078dcf0a68aec5aacbafde745f01af
# 微信公众号测试号接口配置信息 token
wechat.token=course-backend
# 微信公众号测试号模板消息模板 ID
wechat.templateId=4bTafg2x6tI-19bXgSLN9TDYePVFXvzBZCj7p5uToZE
# 微信公众号页面的服务器地址，也即 course-mobile 项目的部署地址
course.pageBaseUrl=http://mobile.vipgz4.91tunnel.com

    注：service-user 和 service-wechat 中用到的域名地址可通过配置内网穿透的方式实现，具体可参看 Ngrok 内网穿透工具

  6. 启动 Nacos 服务注册中心：进入 Nacos 安装 bin 目录，在控制台以 startup.cmd -m standalone 命令启动单机版 Nacos

  7. 启动后台服务：在 IDEA 中批量启动所有后台服务，包括一个网关和六个服务

1.2 后台管理

确保 1.1 中的一个网关和六个服务正常启动以提供正常的接口功能

  1. 克隆仓库：使用 Git 克隆仓库或直接下载仓库压缩包到您的计算机：https://github.com/springbear2020/atguigu-course-frontend
  2. 打开工程：使用 VS Code 打开克隆的仓库或解压的工程文件，而后在控制台使用 npm install 命令安装工程所需依赖
  3. 修改配置信息：
    • .env.development：修改该文件中的 VUE_APP_BASE_API 地址信息为 1.1 步骤中配置的网关地址
    • store/modules/app.js：修改该文件 state 中配置的地址信息为 1.1 步骤中配置的网关地址
  4. 启动工程：控制台使用 npm run dev 命令启动项目，启动成功即可进入管理员后台管理登录页

1.3 微信公众号

确保 1.1 中的一个网关和六个服务正常启动以提供正常的接口功能

注：微信公众号相关的配置中 ”坑“ 较多步骤较为繁琐，若有疑问可邮件咨询笔者：springbear2020@163.com

  1. 克隆仓库：使用 Git 克隆仓库或直接下载仓库压缩包到您的计算机：https://github.com/springbear2020/atguigu-course-mobile
  2. 打开工程：使用 VS Code 打开克隆的仓库或解压的工程文件，而后在控制台使用 npm install 命令安装工程所需依赖
  3. 修改配置信息：
    • store/index.js：修改 state 中配置的 baseURL 为内网穿透工具中的域名地址，该域名地址代理监听服务器的网关端口
    • utils/request.js：修改 service 中配置的 baseURL 为内网穿透工具中的域名地址，该域名地址代理监听服务器的网关端口
  4. 启动工程：控制台使用 npm run serve 命令启动项目，启动成功后进行第 5 步
  5. 申请微信公众号测试号并在其中配置一系列 1.1 服务器中提到的相关信息，在后台管理系统中同步公众号菜单信息
  6. 关注公众号并在手机端测试公众号的相关功能

二、系统概述

2.1 项目介绍

硅谷课堂是尚硅谷与腾讯云官方合作推出的项目，是一款基于微信公众号 B2C 模式的在线学习平台，该平台包含三大模块：直播、教学与微信消息服务。平台会定期推出直播课程，方便学员与名师之间的交流互动，学员也可以购买教学视频在线学习，分享直播与教学视频获取平台收益，平台支持直播、腾讯云视频点播、微信支付、微信授权登录、微信菜单、微信消息与腾讯云文件存储等一系列功能，为学员构建了一个全方位的在线学习平台。

硅谷课堂项目具有很强的实用性，业务场景贴近实际，技术应用紧跟市场潮流，完全按照市场需求开发。既是对主流 Java 技术的系统性梳理和整合，同时也是各种主流技术实际应用的练兵场，能够帮助 Java 程序员积累项目经验。

2.2 系统流程

2.3 功能架构

2.4 技术架构

2.5 技术选型

后端技术

SpringBoot、SpringCloudGateway、SpringCloudAlibabaNacos、SpringCloudFeign、MyBatisPlus、MySQL、EasyExcel、Swagger、JWT、Lombok

前端技术

Node.js、Vue.js、Axios、NPM、ElementUI、Vant

第三方技术

腾讯云对象存储、腾讯云视频点播、欢拓云直播、微信公众号

三、项目结构

course-backend       父工程，统一依赖管理client         客户端，通过 Spring Cloud Feign 提供服务activity   营销活动相关服务order       订单 api 接口user       用户 api 接口vod            课程点播 api 接口common           通用模块model       通用数据模型util      通用工具类gateway            服务网关，统一管理各种 service 服务，解决跨域问题service          提供服务，为前后台提供具体服务activity  营销活动相关服务live        直播课程相关服务order       订单相关服务user      用户相关服务vod           课程点播相关服务wechat      微信公众号相关服务

四、数据库设计

4.1 course_acl

  1. admin(id, username, password, name, phone, ware_id)：管理员用户信息
  2. admin_login_log(id, admin_id, ip, address, user_agent)：管理员登录记录
  3. role(id, role_name, role_code, remark)：角色信息
  4. admin_role(id, role_id, admin_id)：管理员角色信息
  5. permission(id, pid, name, code, to_code, type, status)：权限操作记录
  6. role_permission(id, role_id, permission_id)：角色权限操作记录

4.2 course_activity

  1. coupon_info(id, coupon_type, coupon_name, amount, condition_amount, start_time, end_time, range_type, rule_desc, publish_count, per_limit, use_count, receive_count, expire_time, publish_status)：优惠券信息
  2. coupon_use(id, coupon_id, user_id, order_id, coupon_status, get_time, using_time, used_time, expire_time)：优惠券使用详情

4.3 course_live

  1. live_course(id, subject_id, course_name, start_time, end_time, cover, course_id, teacher_id)：直播课程信息
  2. live_course_description(id, live_course_id, description)：直播课程描述信息
  3. live_course_account(id, live_course_id, live_account, live_key, admin_key, user_key)：直播课程账户信息
  4. live_course_config(id, live_course_id, page_view_mode, number_enable, store_enable, store_type)：直播课程配置信息
  5. live_course_goods(id, live_course_id, goods_id, name, img, price, original_price, tab, url, put_away, pay, qrcode)：直播课程商品信息
  6. live_visitor(id, live_course_id, course_name, user_id, nick_name, join_time, leave_time, location, duration, duration_time, live_visitor_id)：直播课程访客信息

4.4 course_order

  1. order_info(id, user_id, nick_name, phone, origin_amount, coupon_reduce, final_amount, order_status, out_trade_no, trade_body, session_id, province, pay_time, expire_time)：订单信息
  2. order_detail(id, course_id, course_name, cover, order_id, user_id, origin_amount, coupon_reduce, final_amount, session_id)：订单详情信息
  3. payment_info(id, out_trade_no, order_id, user_id, alipay_trade_no, total_amount, trade_body, payment_type, payment_status, callback_content, callback_time)：订单支付信息

4.5 course_user

  1. user_info(id, phone, password, name, nick_name, sex, avatar, province, subscribe, open_id, union_id, recommend_id, status)：用户信息
  2. user_login_log(id, user_id, ip, city, type)：用户登录记录

4.6 course_vod

  1. course(id, teacher_id, subject_id, subject_parent_id, title, price, lesson_num, duration_sum, cover, buy_count, view_count, status, publish_time)：课程信息
  2. course_description(id, course_id, description)：课程描述信息
  3. comment(id, course_id, teacher_id, user_id, nickname, avatar, content)：课程评价信息
  4. course_collect(id, course_id, user_id)：课程收藏信息
  5. teacher(id, name, intro, career, level, avatar, sort, join_date)：课程讲师信息
  6. subject(id, title, parent_id, sort)：课程分类信息
  7. chapter(id, course_id, title, sort)：课程章节信息
  8. video(id, course_id, chapter_id, title, video_source_id, video_original_name, sort, play_count, is_free, duration, size, version, status)：课程小节视频信息
  9. video_visitor(id, course_id, video_id, user_id, nick_name, join_time, leave_time, duration)：课程小节视频访客信息

4.7 course_wechat

  1. menu(id, parent_id, name, type, url, menu_key, sort)：微信公众号菜单信息

五、功能展示

5.1 后台管理

5.1.1 管理员

  1. 管理员登录

  2. 管理员首页

5.1.2 讲师管理

  1. 新增讲师：填写讲师必要信息，上传讲师头像到腾讯云对象存储平台进行图片保存

  2. 删除讲师

  3. 编辑讲师：选定需要编辑的讲师，回显讲师信息，保存后更新讲师信息

  4. 查询讲师：可根据讲师姓名、头衔等信息查询展示讲师

  5. 讲师分页：讲师数据分页展示

5.1.3 课程分类管理

  1. 导入课程分类：选中保存由课程分类的 excel 文件，上传到服务器，由服务器解析并保存课程分类信息

  2. 导出课程分类：选定导出课程分类按钮，由服务器处理课程分类信息并写入 excel 文件供下载

  3. 查询课程分类：课程分类信息 “懒加载” 展示

5.1.4 课程管理

  1. 新增课程：填入课程必要信息，选择课程分类信息，上传课程封面

  2. 删除课程

  3. 编辑课程

  4. 查询课程：可根据课程分类信息、课程名称以及课程讲师信息查询课程

  5. 课程分页

  6. 课程访客统计

  7. 编辑课程大纲：一门课程下有多个章节，一个章节包含多个小节，一个课程小节对应一份课程视频

  8. 新增课程章节

  9. 上传课程小节视频：选择课程小节视频，上传到腾讯云视频点播平台

  10. 发布课程：将课程修改为已发布状态

5.1.5 优惠券管理

  1. 新增优惠券

  2. 删除优惠券

  3. 编辑优惠券

  4. 优惠券分页

  5. 优惠券详情：展示优惠券及已使用的优惠券信息

5.1.6 公众号菜单管理

  1. 添加公众号菜单

  2. 修改公众号菜单

  3. 同步公众号菜单：同步公众号菜单后最新的菜单信息将同步到微信公众号中

  4. 菜单列表

5.1.7 直播课程管理

5.1.8 课程订单管理

  1. 订单查询：根据订单号、手机号等信息查询用户的课程订单信息

  2. 订单分页

5.1.9 直播管理

  1. 新增直播

  2. 删除直播

  3. 编辑直播

  4. 直播分页

  5. 直播配置

  6. 直播账号

5.2 公众号

5.2.1 关注

5.2.2 关于我

5.2.3 查询课程

5.2.4 课程分类

5.2.5 课程列表

5.2.6 课程详情

5.2.7 视频播放

5.2.8 购买课程

5.2.9 兑换优惠券

5.2.10 不可用优惠券

5.2.11 可用优惠券

5.2.12 支付模拟

5.2.13 支付成功

5.2.14 课程购买成功

5.2.15 支付消息推送

基于 SpringBoot + Vue 的在线课堂前后端分离项目相关推荐

  1. 毕设：基于SpringBoot+Vue 实现云音乐(前后端分离)

    文章目录 一.简介 2.项目介绍 二.功能 2.功能介绍 三.核心技术 1.系统架构图 2.技术选型 五.运行 3.截图 前端界面 后台管理界面 总结 1.完整工程 2.其他 一.简介 2.项目介绍 ...

  2. Java基于springboot+vue的电子相册管理系统 前后端分离node

    智能电子相册是一个可以永久保留记忆的东西,用户可以讲自己美好的一面展示在网络上,人更多的人了解到自己的生活,为此我们通过Java语言并结合springboot+vue开发了本次的电子相册管理系统,希望 ...

  3. Springboot+vue 社团管理系统（前后端分离）

    Springboot+vue 社团管理系统(前后端分离) zero.项目功能设计图 一.数据库设计(项目准备) 1.建表 2.表目录 二.前端编写(vue) 1.搭建Vue框架 2.放入静态资源(as ...

  4. SpringBoot+Vue分页实现，前后端分离

    一.前期准备 1.简介 熟悉SpringBoot,Mybatis,Vue,Element UI等框架的使用:Vue-cli脚手架工具的使用:掌握前后端分离思想,熟悉单体架构等思想. 2.工具下载(No ...

  5. 基于Vue和Django搭建前后端分离项目

    前言 最近公司要做一个系统,需要前后端分离,后端使用Django,前端使用Vue,因为之前主要做的是后端开发,前端只会写一写简单的,Vue只会绑定数据,至于Vue怎么与Django结合还是第一次接触, ...

  6. 毕设（一）Vue3 + SpringBoot + MyBatis搭建一个简单前后端分离项目

    一.Vue项目搭建 1.打开IDEA,创建Vue.js项目demo-vue 项目结构 2.在components目录下创建vue组件UserMan.vue <template><di ...

  7. 记录使用springboot+vue框架搭建一个前后端分离的demo（后端项目）

    我用的工具版本:idea2019.1.3 vue2.9.6 jdk1.8 数据库用的是mysql 数据库名字叫mydatabase,表名字叫t_b_member 一.最终项目结构 member是项目名 ...

  8. 小白快速上手前后端分离项目开发教程(springboot+vue)

    本文基于springboot+vue,实现一个前后端分离项目的实操.通俗易懂,保证一学就会.同时能帮助大家更好的理解,什么是前后端分离开发?这个开发跟之前使用jsp或者模板引擎开发有什么不同. 一.为 ...

  9. linux --- 部署前后端分离项目

    vue + uwsgi +nginx 部署前后端分离项目 准备项目 1.将前端vue项目包和后端django项目包上传服务器,通过lrzsz,直接从windows拖进linux中 2.解压缩操作 前端 ...

最新文章

  1. 【Spring Web MVC】Spring Web MVC 注解开发环境搭建
  2. 淡淡说说技术人员创业
  3. el-popover超过固定高度后出现滚动条_「测绘精选」RTK测量不出现固定解的原因...
  4. Wythoff's game
  5. 在CLR中自动本地化正在运行的.NET窗口
  6. 2020-12-10 PMP 群内练习题 - 光环
  7. Excel如何转化成PDF？教你几个简单的方法
  8. 基于Java框架开发OA企业在线办公系统项目教程-附源码-毕业设计
  9. 永远无法实现的“诚实“
  10. CentOS6 双线双ip服务器路由设置方法
  11. 判断点P是否在三角形ABC内
  12. ATM和电路交换和分组交换区别
  13. java 建一个car_大学java习题 ：定义一个汽车类car
  14. 第一代计算机网络那一年,奔腾电脑是哪一年上市的？
  15. 图像压缩编码基础——笔记整理
  16. Git自己分支合并dev分支
  17. React高阶组件探究
  18. css-doodle 学习第一天
  19. MATLAB实验报告之五
  20. Mastercam 2017工厂三轴产品实例编程视频教程

热门文章

  1. 经济学原理---11 公共物品和共有资源-- 读书笔记
  2. OSChina 娱乐弹弹弹——程序猿专属幽默
  3. java 迅雷下载 session丢失_关于java并发场景下，HttpServletRequst中session丢失问题
  4. linux下freerdp编译,freerdp linux编译
  5. dpdk-20.11 学习篇 编译和安装
  6. (CondConv)条件卷积insight分析
  7. 炼丹术的终结——神经网络结构搜索之一
  8. 交计算机作业上师大,【图】- 师大21年新出《计算机体系结构》作业考核标准 - 昆山玉山其他教育培训 - 昆山百姓网...
  9. CorelDraw 9、12、X3文件打开慢加速补丁
  10. 嚯——ChatGPT是很强，但也会胡说八道。。。