Spring-_-Bear 的 CSDN 博客导航文章目录一、快速开始1.1 后端服务系统1.2 后台管理系统1.3 移动应用系统1.4 微信公众号二、项目介绍三、系统流程四、功能架构五、技术架构六、工程结构七、技术选型八、效果展示8.1 后台管理系统8.1.1 管理员8.1.2 讲师管理8.1.3 课程分类管理8.1.4 课程管理8.1.5 优惠券管理8.1.6 公众号菜单管理8.1.7 课程订单管理8.1.8 直播管理8.2 微信公众号8.2.1 消息提醒8.2.2 课程信息8.2.3 购买课程开发时间Spring CloudVantElementUI开源项目22/10/17 - 22/11/04Hxton2.6.112.13.2atguigu-course一、快速开始1.1 后端服务系统克隆仓库使用 Git 克隆仓库或直接下载仓库压缩包到您的计算机来获取源代码。打开工程使用 IntelliJ IDEA 开发工具打开 course-server 后端服务系统模块而后使用 Maven 项目构建工具更新工程模块依赖。创建数据库并导入数据登录 MySQL 控制台依据 document/sql 目录下的 7 个 SQL 脚本文件创建七个数据库并导入数据库表和数据。修改配置修改 course-server/service/service-*/**/application.yml 六个模块中的数据库连接信息设置你自己的数据库用户名和密码。修改 course-server/service/service-*/**/application.yml 六个模块中的 Nacos 配置信息设置你的 Nacos 地址和端口默认配置为 localhost:8848。可选配置course-server/service/service-live/**/application.properties修改 欢拓云 直播平台配置信息若不修改则后台管理系统course-backend中直播课程相关的 CRUD 功能异常。course-server/service/service-user/**/application.properties修改 微信公众号测试号 的应用 ID 信息和应用密钥以及用户同意授权个人信息后的回调地址。注意此回调地址需为公网地址才能被微信平台识别并且需要在微信公众号测试号中配置网页账号授权回调页面域名详见 1.4。若不修改则手机端微信公众号中的相关功能均不可用。course-server/service/service-vod/**/application.properties修改 腾讯云对象存储 的存储空间信息和 腾讯云视频点播 服务的应用 ID 信息。若不修改则腾讯云相关图片存储服务不可用课程小节视频不能上传和查看。course-server/service/service-wechat/**/application.properties修改微信公众号测试号的配置信息以及接口配置信息并且需要在微信公众号测试号中填写接口配置信息详见 1.4。若不修改则手机端微信公众号一切功能异常。同时还需要修改微信公众号页面的服务器地址也即 course-mobile 项目的部署地址此地址需为公网地址以供微信后台调用若不修改则微信公众号中的查看课程信息功能异常不能跳转到任何页面。注service-user 和 service-wechat 中用到的公网域名地址可通过配置内网穿透的方式实现具体可参看 Ngrok 内网转发工具。具体来说需要配置两个内网穿透地址第一个内网穿透地址映射到后端服务系统course-server网关模块端口即 http://course.5gzvip.91tunnel.com - http://localhost:8888。第二个内网穿透地址映射到移动应用系统course-mobile所监听的端口即 http://mobile.vipgz4.91tunnel.com - http://localhost:8080。工程名子模块端口内网穿透地址course-server后端服务系统gateway8888http://course.5gzvip.91tunnel.comservice-vod8081service-order8082service-activity8083service-user8084service-wechat8085service-live8086course-mobile移动应用系统8080http://mobile.vipgz4.91tunnel.comcourse-backend后台管理系统9528启动 Nacos 服务进入 Nacos 安装目录下的 bin 目录在控制台以 startup.cmd -m standalone 命令以单机模式启动 Nacos 服务。启动后端服务系统在 IDEA 中批量启动所有后台服务包括一个网关gateway和六个业务服务service-*。1.2 后台管理系统注请确保1.1 后端服务系统中的一个网关和六个业务服务正常启动以提供正常的接口功能。克隆仓库使用 Git 克隆仓库或直接下载仓库压缩包到您的计算机来获取源代码。打开工程使用 WebStorm 开发工具打开 course-backend 后台管理系统模块。安装依赖在控制台使用 npm install 命令安装工程所需依赖。修改配置course-backend/.env.development修改该文件中的 VUE_APP_BASE_API 变量的值为后端服务系统网关地址默认为http://localhost:8888 即 1.1 后端服务系统中网关模块的 IP 地址和端口信息。启动系统在控制台使用 npm run dev 命令启动工程启动成功即可进入后台管理系统登录页。1.3 移动应用系统注请确保1.1 后端服务系统中的一个网关和六个业务服务正常启动以提供正常的接口功能。克隆仓库使用 Git 克隆仓库或直接下载仓库压缩包到您的计算机来获取源代码。打开工程使用 WebStorm 开发工具打开 course-mobile 移动应用系统模块。安装依赖在控制台使用 npm install 命令安装工程所需依赖。修改配置course-mobile/utils/request.js修改该文件中的 BASE_REQUEST_URL 变量的值为后端服务系统网关模块的内网穿透地址。启动系统在控制台使用 npm run serve 命令启动工程。1.4 微信公众号申请 微信公众号测试号在微信公众号测试号中配置网页账号授权回调页面域名。配置公众号测试号的接口配置信息只需要修改公网域名部分即可即修改 course.5gzvip.91tunnel.com 为你自己的公网域名。在后台管理系统中同步公众号菜单信息。关注公众号并在手机端测试公众号的相关功能。系统整个网络穿透配置和请求响应流程如下图二、项目介绍硅谷课堂是尚硅谷与腾讯云官方合作推出的项目是一款基于微信公众号 B2C 模式的在线学习平台该平台包含三大模块直播、教学与微信消息服务。平台会定期推出直播课程方便学员与名师之间的交流互动学员也可以购买教学视频在线学习分享直播与教学视频获取平台收益。平台支持直播、腾讯云视频点播、微信支付、微信授权登录、微信菜单、微信消息与腾讯云文件存储等一系列功能为学员构建了一个全方位的在线学习平台。硅谷课堂项目具有很强的实用性业务场景贴近实际技术应用紧跟市场潮流完全按照市场需求开发。既是对主流 Java 技术的系统性梳理和整合同时也是各种主流技术实际应用的练兵场能够帮助 Java 程序员积累项目经验。三、系统流程四、功能架构五、技术架构六、工程结构course-backend-- 父工程统一依赖管理├── client-- 客户端通过 Spring Cloud Feign 提供服务├── activity-- 营销活动相关服务├── order-- 订单 api 接口├── user-- 用户 api 接口├── vod-- 课程点播 api 接口├── common-- 通用模块├── model-- 通用数据模型├── util-- 通用工具类├── gateway-- 服务网关统一管理各种 service 服务解决跨域问题├── service-- 提供服务为前后台提供具体服务├── live-- 营销活动相关服务├── model-- 直播课程相关服务├── order-- 订单相关服务├── user-- 用户相关服务├── vod-- 课程点播相关服务├── wechat-- 微信公众号相关服务七、技术选型技术说明Spring BootSpring 快速开发脚手架Spring Cloud GatewaySpring 网关Spring Cloud Alibaba Nacos微服务注册中心Spring Cloud Feign远程服务调用MyBatis PlusORM 框架MySQL关系数据库Easy ExcelJava excel 操作工具Swagger项目文档生成工具JWT跨域认证解决方案Lombok简化 POJO 类开发Vue.jsJavaScript 框架Axios请求库ElementUI桌面端组件库Vant移动端组件库腾讯云对象存储对象存储腾讯云视频点播视频点播欢拓云直播视频直播微信公众号公众号八、效果展示8.1 后台管理系统8.1.1 管理员管理员登录页管理员欢迎页8.1.2 讲师管理新增讲师填写讲师必要信息上传讲师头像到腾讯云对象存储平台进行图片保存。删除讲师编辑讲师选定需要编辑的讲师回显讲师信息保存后更新讲师信息。查询讲师可根据讲师姓名、头衔等信息查询展示讲师。8.1.3 课程分类管理导入课程分类选中保存有课程分类的 excel 文件上传到服务器由服务器解析并保存课程分类信息。导出课程分类选定导出课程分类按钮由服务器处理课程分类信息并写入 excel 文件供下载。查询课程分类课程分类信息 “懒加载” 展示。8.1.4 课程管理新增课程填入课程必要信息选择课程分类信息上传课程封面。删除课程编辑课程查询课程可根据课程分类信息、课程名称以及课程讲师信息查询课程。课程访客统计编辑课程大纲一门课程下有多个章节一个章节包含多个小节一个课程小节对应一份课程视频。新增课程章节上传课程小节视频选择课程小节视频上传到腾讯云视频点播平台。发布课程将课程修改为已发布状态。8.1.5 优惠券管理新增优惠券删除优惠券编辑优惠券优惠券详情展示优惠券及已使用的优惠券信息。8.1.6 公众号菜单管理添加公众号菜单修改公众号菜单同步公众号菜单同步公众号菜单后最新的菜单信息将同步到微信公众号中。公众号菜单列表8.1.7 课程订单管理订单查询根据订单号、手机号等信息查询用户的课程订单信息。8.1.8 直播管理新增直播删除直播编辑直播直播配置直播账号8.2 微信公众号8.2.1 消息提醒关注公众号关于我子菜单8.2.2 课程信息关键字查询课程课程分类子菜单课程分类列表课程详情课程视频播放8.2.3 购买课程购买课程兑换优惠券不可用优惠券可用优惠券模拟订单支付课程购买成功支付消息推送 
长河君 · 2026/10/10 1:15:37 · 阅读 1.2k 基于 SpringCloud + Vue 的硅谷课堂前后端分离微信公众号项目
Spring-_-Bear 的 CSDN 博客导航文章目录一、快速开始1.1 后端服务系统1.2 后台管理系统1.3 移动应用系统1.4 微信公众号二、项目介绍三、系统流程四、功能架构五、技术架构六、工程结构七、技术选型八、效果展示8.1 后台管理系统8.1.1 管理员8.1.2 讲师管理8.1.3 课程分类管理8.1.4 课程管理8.1.5 优惠券管理8.1.6 公众号菜单管理8.1.7 课程订单管理8.1.8 直播管理8.2 微信公众号8.2.1 消息提醒8.2.2 课程信息8.2.3 购买课程开发时间Spring CloudVantElementUI开源项目22/10/17 - 22/11/04Hxton2.6.112.13.2atguigu-course一、快速开始1.1 后端服务系统克隆仓库使用 Git 克隆仓库或直接下载仓库压缩包到您的计算机来获取源代码。打开工程使用 IntelliJ IDEA 开发工具打开 course-server 后端服务系统模块而后使用 Maven 项目构建工具更新工程模块依赖。创建数据库并导入数据登录 MySQL 控制台依据 document/sql 目录下的 7 个 SQL 脚本文件创建七个数据库并导入数据库表和数据。修改配置修改 course-server/service/service-*/**/application.yml 六个模块中的数据库连接信息设置你自己的数据库用户名和密码。修改 course-server/service/service-*/**/application.yml 六个模块中的 Nacos 配置信息设置你的 Nacos 地址和端口默认配置为 localhost:8848。可选配置course-server/service/service-live/**/application.properties修改 欢拓云 直播平台配置信息若不修改则后台管理系统course-backend中直播课程相关的 CRUD 功能异常。course-server/service/service-user/**/application.properties修改 微信公众号测试号 的应用 ID 信息和应用密钥以及用户同意授权个人信息后的回调地址。注意此回调地址需为公网地址才能被微信平台识别并且需要在微信公众号测试号中配置网页账号授权回调页面域名详见 1.4。若不修改则手机端微信公众号中的相关功能均不可用。course-server/service/service-vod/**/application.properties修改 腾讯云对象存储 的存储空间信息和 腾讯云视频点播 服务的应用 ID 信息。若不修改则腾讯云相关图片存储服务不可用课程小节视频不能上传和查看。course-server/service/service-wechat/**/application.properties修改微信公众号测试号的配置信息以及接口配置信息并且需要在微信公众号测试号中填写接口配置信息详见 1.4。若不修改则手机端微信公众号一切功能异常。同时还需要修改微信公众号页面的服务器地址也即 course-mobile 项目的部署地址此地址需为公网地址以供微信后台调用若不修改则微信公众号中的查看课程信息功能异常不能跳转到任何页面。注service-user 和 service-wechat 中用到的公网域名地址可通过配置内网穿透的方式实现具体可参看 Ngrok 内网转发工具。具体来说需要配置两个内网穿透地址第一个内网穿透地址映射到后端服务系统course-server网关模块端口即 http://course.5gzvip.91tunnel.com - http://localhost:8888。第二个内网穿透地址映射到移动应用系统course-mobile所监听的端口即 http://mobile.vipgz4.91tunnel.com - http://localhost:8080。工程名子模块端口内网穿透地址course-server后端服务系统gateway8888http://course.5gzvip.91tunnel.comservice-vod8081service-order8082service-activity8083service-user8084service-wechat8085service-live8086course-mobile移动应用系统8080http://mobile.vipgz4.91tunnel.comcourse-backend后台管理系统9528启动 Nacos 服务进入 Nacos 安装目录下的 bin 目录在控制台以 startup.cmd -m standalone 命令以单机模式启动 Nacos 服务。启动后端服务系统在 IDEA 中批量启动所有后台服务包括一个网关gateway和六个业务服务service-*。1.2 后台管理系统注请确保1.1 后端服务系统中的一个网关和六个业务服务正常启动以提供正常的接口功能。克隆仓库使用 Git 克隆仓库或直接下载仓库压缩包到您的计算机来获取源代码。打开工程使用 WebStorm 开发工具打开 course-backend 后台管理系统模块。安装依赖在控制台使用 npm install 命令安装工程所需依赖。修改配置course-backend/.env.development修改该文件中的 VUE_APP_BASE_API 变量的值为后端服务系统网关地址默认为http://localhost:8888 即 1.1 后端服务系统中网关模块的 IP 地址和端口信息。启动系统在控制台使用 npm run dev 命令启动工程启动成功即可进入后台管理系统登录页。1.3 移动应用系统注请确保1.1 后端服务系统中的一个网关和六个业务服务正常启动以提供正常的接口功能。克隆仓库使用 Git 克隆仓库或直接下载仓库压缩包到您的计算机来获取源代码。打开工程使用 WebStorm 开发工具打开 course-mobile 移动应用系统模块。安装依赖在控制台使用 npm install 命令安装工程所需依赖。修改配置course-mobile/utils/request.js修改该文件中的 BASE_REQUEST_URL 变量的值为后端服务系统网关模块的内网穿透地址。启动系统在控制台使用 npm run serve 命令启动工程。1.4 微信公众号申请 微信公众号测试号在微信公众号测试号中配置网页账号授权回调页面域名。配置公众号测试号的接口配置信息只需要修改公网域名部分即可即修改 course.5gzvip.91tunnel.com 为你自己的公网域名。在后台管理系统中同步公众号菜单信息。关注公众号并在手机端测试公众号的相关功能。系统整个网络穿透配置和请求响应流程如下图二、项目介绍硅谷课堂是尚硅谷与腾讯云官方合作推出的项目是一款基于微信公众号 B2C 模式的在线学习平台该平台包含三大模块直播、教学与微信消息服务。平台会定期推出直播课程方便学员与名师之间的交流互动学员也可以购买教学视频在线学习分享直播与教学视频获取平台收益。平台支持直播、腾讯云视频点播、微信支付、微信授权登录、微信菜单、微信消息与腾讯云文件存储等一系列功能为学员构建了一个全方位的在线学习平台。硅谷课堂项目具有很强的实用性业务场景贴近实际技术应用紧跟市场潮流完全按照市场需求开发。既是对主流 Java 技术的系统性梳理和整合同时也是各种主流技术实际应用的练兵场能够帮助 Java 程序员积累项目经验。三、系统流程四、功能架构五、技术架构六、工程结构course-backend-- 父工程统一依赖管理├── client-- 客户端通过 Spring Cloud Feign 提供服务├── activity-- 营销活动相关服务├── order-- 订单 api 接口├── user-- 用户 api 接口├── vod-- 课程点播 api 接口├── common-- 通用模块├── model-- 通用数据模型├── util-- 通用工具类├── gateway-- 服务网关统一管理各种 service 服务解决跨域问题├── service-- 提供服务为前后台提供具体服务├── live-- 营销活动相关服务├── model-- 直播课程相关服务├── order-- 订单相关服务├── user-- 用户相关服务├── vod-- 课程点播相关服务├── wechat-- 微信公众号相关服务七、技术选型技术说明Spring BootSpring 快速开发脚手架Spring Cloud GatewaySpring 网关Spring Cloud Alibaba Nacos微服务注册中心Spring Cloud Feign远程服务调用MyBatis PlusORM 框架MySQL关系数据库Easy ExcelJava excel 操作工具Swagger项目文档生成工具JWT跨域认证解决方案Lombok简化 POJO 类开发Vue.jsJavaScript 框架Axios请求库ElementUI桌面端组件库Vant移动端组件库腾讯云对象存储对象存储腾讯云视频点播视频点播欢拓云直播视频直播微信公众号公众号八、效果展示8.1 后台管理系统8.1.1 管理员管理员登录页管理员欢迎页8.1.2 讲师管理新增讲师填写讲师必要信息上传讲师头像到腾讯云对象存储平台进行图片保存。删除讲师编辑讲师选定需要编辑的讲师回显讲师信息保存后更新讲师信息。查询讲师可根据讲师姓名、头衔等信息查询展示讲师。8.1.3 课程分类管理导入课程分类选中保存有课程分类的 excel 文件上传到服务器由服务器解析并保存课程分类信息。导出课程分类选定导出课程分类按钮由服务器处理课程分类信息并写入 excel 文件供下载。查询课程分类课程分类信息 “懒加载” 展示。8.1.4 课程管理新增课程填入课程必要信息选择课程分类信息上传课程封面。删除课程编辑课程查询课程可根据课程分类信息、课程名称以及课程讲师信息查询课程。课程访客统计编辑课程大纲一门课程下有多个章节一个章节包含多个小节一个课程小节对应一份课程视频。新增课程章节上传课程小节视频选择课程小节视频上传到腾讯云视频点播平台。发布课程将课程修改为已发布状态。8.1.5 优惠券管理新增优惠券删除优惠券编辑优惠券优惠券详情展示优惠券及已使用的优惠券信息。8.1.6 公众号菜单管理添加公众号菜单修改公众号菜单同步公众号菜单同步公众号菜单后最新的菜单信息将同步到微信公众号中。公众号菜单列表8.1.7 课程订单管理订单查询根据订单号、手机号等信息查询用户的课程订单信息。8.1.8 直播管理新增直播删除直播编辑直播直播配置直播账号8.2 微信公众号8.2.1 消息提醒关注公众号关于我子菜单8.2.2 课程信息关键字查询课程课程分类子菜单课程分类列表课程详情课程视频播放8.2.3 购买课程购买课程兑换优惠券不可用优惠券可用优惠券模拟订单支付课程购买成功支付消息推送