开发时间：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. Cocos Creator—定制H5游戏首页loading界面
  2. 聚类算法详解——深度AI科普团队
  3. Server.MapPath()
  4. java 与c des_Java和C/C++进行DES/AES密文传输
  5. vue如何加载html字符串_vue如何给html字符串添加指令？
  6. 别人家的程序员是如何使用 Java 进行 Web 抓取的？ 1
  7. 未设置BufferSize导致FTP下载速度过慢的问题
  8. 酒后谈IT，那些术语大妈都能秒懂！
  9. window电脑H265（HEVC）编码的mp4不显示缩略图解决办法
  10. 用JavaScript写抖音很火的罗盘时钟，附源码
  11. Win10文件夹正在使用，文件夹或文件已在另一程序中打开解决方法
  12. 网络与社会导论之幂律与富者更富及其与长尾、齐普夫定律等的关系
  13. 一周XX思考（第12期）
  14. 【机器学习】西瓜书一些关键词
  15. MySql引擎、索引
  16. Office 2016 定制安装工具 v1.0 | Office 2016 自定义安装组件
  17. 常用的系统操作响应时间
  18. Python爬虫：按分类批量爬取环球新闻
  19. Visio中使用键盘和鼠标组合指令后不响应（卡死）的解决方法
  20. 欧路词典 for Mac软件增强特色

热门文章

  1. Window opener的使用
  2. CSDN技术网摘使用指南
  3. Ubuntu下安装Sublime Text3 汉化以及支持中文输入(2019.7.22更新）
  4. python之进程和线程（二）
  5. SpringBoot-自动配置-源码解析，Java高级程序员面试笔记宝典
  6. 将GPS获得的UTC时间转换成本地时间的方法
  7. MySQL：Linux下新建用户 权限授予 删除用户
  8. k3梅林单线双拨教程_华硕AC86U单线双拨设置方法。。。
  9. 11 令牌颁发方式 之 客户端凭证模式
  10. Micaps3.2二次开发实例教程-8