【项目实战】谷粒学院项目回顾

已于 2024-03-14 19:08:45 修改
阅读量1.1k 收藏 32
点赞数 27
分类专栏： 项目实战 文章标签： spring cloud spring boot vue elementui
于 2024-02-03 13:19:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Slience_me/article/details/136006945
版权
本文介绍了谷粒学院项目，一个采用SpringCloud和SpringCloudAlibaba的在线教育平台，涉及前端Vue+Element-ui、Nuxt，后端SpringBoot，以及微服务架构、数据库管理、缓存和安全策略。详述了系统模块、架构设计、技术选型和环境搭建步骤，以及注意事项和问题汇总。
摘要由CSDN通过智能技术生成

在这里插入图片描述

本文作者： slience_me

文章目录

谷粒学院

谷粒学院项目致力于打造一个B2C模式的职业技能在线教育系统平台，采用现阶段流行技术来实现，采用前后端分离编写。

GitHub 地址

项目学习资源

  • 项目文档

    slience_me的博客

  • 接口文档

    • 谷粒学院完整代码: https://github.com/slience-me/GuliEdu.git

项目介绍

谷粒学院项目是一套在线教育项目，包括前台系统以及后台管理系统，基于 SpringCloud、SpringCloud Alibaba、MyBatis Plus实现。前台系统包括：用户登录、注册、名师列表、名师详情、课程列表、课程详细、视频在线播放等模块。后台管理系统包括：首页、权限管理、讲师分类、课程分类、课程管理、统计分析等模块。

系统模块

系统架构

架构设计需要考虑的几个方面：

  • 性能： 主要考虑访问频率，每个用户每天的访问次数。项目初始阶段用户的访问量并不大，如果考虑做运营推广，可能会迎来服务器访问量骤增，因此要考虑 ** 分布式部署，引入缓存
  • 可扩展性： 系统功能会随着用户量的增加以及多变的互联网用户需求不断地扩展，因此考虑到系统的可扩展性的要求需要使用微服务架构，引入消息中间件
  • 高可用： 系统一旦宕机，将会带来不可挽回的损失，因此必须做负载均衡，甚至是异地多活这类复杂的方案。如果数据丢失，修复将会非常麻烦，只能靠人工逐条修复，这个很难接受，因此需要考虑存储高可靠。我们需要考虑多种异常情况：机器故障、机房故障，针对机器故障，我们需要设计 MySQL 同机房主备方案；针对机房故障，我们需要设计 MySQL 跨机房同步方案。
  • 安全性： 系统的信息有一定的隐私性，例如用户的个人身份信息，不包含强隐私（例如玉照、情感）的信息，因此使用账号密码管理、数据库访问权限控制即可。
  • 成本： 视频类网站的主要成本在于服务器成本、流量成本、存储成本、流媒体研发成本，中小型公司可以考虑使用云服务器和云服务。

在这里插入图片描述

项目演示

前台商品系统

首页

在这里插入图片描述

登录注册

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

课程详情

在这里插入图片描述

课程详情页

在这里插入图片描述

订单支付页面

在这里插入图片描述
在这里插入图片描述

名师列表功能

在这里插入图片描述

名师详情功能

在这里插入图片描述

视频播放

image-20210427235857418

后台管理系统

登录

image-20210427173911453

权限管理

用户管理

在这里插入图片描述

角色管理

image-20210427174108641

菜单管理

image-20210427174135611

其他系统

组织结构

完整结构

GuliEdu/
├── guli-admin
│   ├── build
│   ├── config
│   ├── favicon.ico
│   ├── index.html
│   ├── LICENSE
│   ├── package.json
│   ├── package-lock.json
│   ├── README.md
│   ├── README-zh.md
│   ├── src
│   └── static
├── guli-front
│   ├── api
│   ├── assets
│   ├── components
│   ├── layouts
│   ├── middleware
│   ├── nuxt.config.js
│   ├── package.json
│   ├── package-lock.json
│   ├── pages
│   ├── plugins
│   ├── README.md
│   ├── static
│   ├── store
│   └── utils
├── guli-parent
│   ├── 目录结构.md
│   ├── canal_clientedu
│   ├── common
│   ├── infrastructure
│   ├── pom.xml
│   └── service
├── README.md
└── sql
    ├── guli_acl.sql
    ├── guli_cms.sql
    ├── guli_edu.sql
    ├── guli_order.sql
    ├── guli_statistics.sql
    └── guli_ucenter.sql

后端

GuliEdu/guli-parent/
├── 目录结构.md
├── canal_clientedu
│   ├── pom.xml
│   └── src
├── common
│   ├── common_utils
│   ├── pom.xml
│   ├── service_base
│   └── spring_security
├── infrastructure
│   ├── api_gateway
│   └── pom.xml
├── pom.xml
└── service
    ├── pom.xml
    ├── service_acl
    ├── service_cms
    ├── service_edu
    ├── service_msm
    ├── service_order
    ├── service_oss
    ├── service_statistics
    ├── service_ucenter
    └── service_vod

前端guli_admin

GuliEdu/guli-admin/
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── favicon.ico
├── index.html
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
├── README-zh.md
├── src
│   ├── api
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── icons
│   ├── main.js
│   ├── permission.js
│   ├── router
│   ├── store
│   ├── styles
│   ├── utils
│   └── views
└── static
    ├── 01.jpg
    ├── 01.xlsx
    └── tinymce4.7.5

前端guli_front

GuliEdu/guli-front/
├── api
│   ├── banner.js
│   ├── commonedu.js
│   ├── course.js
│   ├── index.js
│   ├── login.js
│   ├── orders.js
│   ├── register.js
│   ├── teacher.js
│   └── vod.js
├── assets
│   ├── css
│   ├── img
│   ├── js
│   ├── photo
│   └── README.md
├── components
│   ├── AppLogo.vue
│   └── README.md
├── layouts
│   ├── default.vue
│   ├── README.md
│   ├── sign.vue
│   └── video.vue
├── middleware
│   └── README.md
├── nuxt.config.js
├── package.json
├── package-lock.json
├── pages
│   ├── article
│   ├── course
│   ├── index.vue
│   ├── login.vue
│   ├── orders
│   ├── pay
│   ├── player
│   ├── qa
│   ├── README.md
│   ├── register.vue
│   └── teacher
├── plugins
│   ├── nuxt-swiper-plugin.js
│   └── README.md
├── README.md
├── static
│   ├── favicon.ico
│   └── README.md
├── store
│   └── README.md
└── utils
    └── request.js

技术选型

后端技术

技术说明官网
SpringBoot容器+MVC框架https://spring.io/projects/spring-boot
SpringCloud微服务架构https://spring.io/projects/spring-cloud
SpringCloudAlibaba一系列组件https://spring.io/projects/spring-cloud-alibaba
MyBatis-PlusORM框架https://mp.baomidou.com
OSS对象云存储https://github.com/aliyun/aliyun-oss-java-sdk
EasyExcel处理Excel工具https://www.yuque.com/easyexcel/doc
Docker应用容器引擎https://www.docker.com
jenkins自动化部署https://www.jenkins.io/

前端技术

技术说明官网
Vue前端框架https://vuejs.org
Element-ui前端UI框架https://element.eleme.cn/#/zh-CN
Nuxt前端UI框架https://zh.nuxtjs.org/
node.js服务端的jshttps://nodejs.org/en
Echarts数据可视化图表https://echarts.apache.org/zh/index.html

环境搭建

开发工具

工具说明官网
IDEA开发Java程序https://www.jetbrains.com/idea/download
RedisDesktopredis客户端连接工具https://redisdesktop.com/download
X-shellLinux远程连接工具http://www.netsarang.com/download/software.html
Navicat数据库连接工具http://www.formysql.com/xiazai.html
PowerDesigner数据库设计工具http://powerdesigner.de
PostmanAPI接口调试工具https://www.postman.com
TyporaMarkdown编辑器https://typora.io

开发环境

工具版本号下载
JDK1.8https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
Mysql5.7https://www.mysql.com
RedisRedishttps://redis.io/download
Nginx1.1.6http://nginx.org/en/download.html

注意：以上的除了jdk都是采用docker方式进行安装，详细安装步骤可参考百度!!!

​ Nginx 可以不使用，本项目后期都替换了使用GateWay 来作为网关

搭建步骤

准备工作

IDEA，Visual Studio Code，JDK >= 1.8 (推荐1.8版本)， Mysql >= 5.7， Maven

Windows环境部署

  • 必须先启动 先启动 nacos 注册中心

    在这里插入图片描述

后端启动

  • 克隆整个后端项目 GuliEdu，并导入 IDEA 中完成编译
git clone https://github.com/slience-me/GuliEdu.git

  • 创建数据库guli_edu并导入数据脚本sql / **
    在这里插入图片描述

  • 修改各个模块的application.properties文件的MySQL配置信息

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/你的数据库名称?autoReconnect=true&useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=你的密码
  • 修改guli-teacher、guli-acl、guli_cms、guli_msm、guli_order、guli_ucenter模块的application.properties文件的Redis配置信息
spring.redis.host=redis IP 地址
spring.redis.port=6379
spring.redis.database= 0
spring.redis.timeout=1800000
  • 修改 guli_oss 模块的application.properties文件，阿里OSS的 endpoint、 keyid、keysecret、bucketname、filehost
#阿里云 OSS
#不同的服务器，地址不同
aliyun.oss.file.endpoint=oss-cn-shenzhen.aliyuncs.com
aliyun.oss.file.keyid=<you keyid>
aliyun.oss.file.keysecret=<you keysecret>
#bucket可以在控制台创建，也可以使用java代码创建
aliyun.oss.file.bucketname=oypicbed
aliyun.oss.file.filehost=ossTest

获取方式
在这里插入图片描述

  • 修改 guli_msm 模块的 MsmServiceImpll 类中的短信模板以及keyid、keysecret，模板的话需要自己去阿里云短信服务自己申请
DefaultProfile profile = DefaultProfile.getProfile("default", "<you keyid>", "<you keysecret>");
        DefaultAcsClient client = new DefaultAcsClient(profile);

        // 设置相关固定的参数
        CommonRequest request = new CommonRequest();
        request.setMethod(MethodType.POST);
        request.setDomain("dysmsapi.aliyuncs.com");
        request.setVersion("2017-05-25");
        request.setAction("SendSms");

        // 设置相关的参数
        request.putQueryParameter("PhoneNumbers",phone); // 手机号
        request.putQueryParameter("SignName","<签名>"); // 申请阿里云 签名失败
        request.putQueryParameter("TemplateCode","<模板>" ); //申请阿里云 模板code
        request.putQueryParameter("TemplateParam", JSONObject.toJSONString(param)); //验证码数据，转换json数据传递

在这里插入图片描述

  • 修改 guli_vod 模块的application.properties文件，阿里视频点播 的 keyid、keysecret
#阿里云 vod
#不同的服务器，地址不同
aliyun.vod.file.keyid=<you keyid>
aliyun.vod.file.keysecret=<you keysecret>

谷粒学院相关环境

链接：https://pan.baidu.com/s/1oRCwM0voI7Mfmkl_1ueQyQ?pwd=eyfv
提取码：eyfv --来自百度网盘超级会员V5的分享

侵权联系，立即删除

问题汇总

node版本管理工具见nvm

1. guli-admin项目相关

注意node版本问题，我使用了node版本为10.14.2，相关安装包见百度网盘

"dependencies": {
    "axios": "0.18.0",
    "echarts": "^4.3.0",
    "element-ui": "^2.4.6",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "vue": "2.5.17",
    "vue-router": "3.0.1",
    "vuex": "3.0.1",
    "vuex-persistedstate": "^4.1.0"
  },

2. guli-front项目相关

注意node版本问题，我使用了node版本为18.19.0，相关安装包见百度网盘

 "dependencies": {
    "axios": "^0.21.1",
    "element-ui": "^2.15.1",
    "js-cookie": "^2.2.1",
    "nuxt": "^2.0.0",
    "vue-awesome-swiper": "^3.1.3",
    "vue-qriously": "^1.1.1"
  },

文档参考链接

slience_me
关注
  • 27
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
谷粒商城，简历优化，项目技术要点
02-21
谷粒商城，简历优化，项目技术要点，快人一步
谷粒学院项目总结
小七自学博客
03-16 2453
谷粒学院项目总结 文章目录谷粒学院项目总结后台管理系统的功能登录功能权限功能讲师管理课程分类添加课程课程分类列表课程管理课程列表-分页条件查询添加课程添加小节视频统计分析前台用户系统首页数据显示幻灯片显示热门课程显示热门老师显示注册功能登陆功能普通登陆微信扫码登陆名师列表名师详情课程列表课程详情课程视频在线播放课程支付功能前端技术点前后端分离开发VueElement-uinode-jsNPMBable前端模块化后台系统使用vue-admin-template前台系统使用NuxtEcharts后端技术总结项目
谷粒学院权限管理模块
最新发布
2401_84103135的博客
05-04 1004
1.数据库表这里系统权限控制采用的访问控制模型是RBAC 即基于角色的权限访问控制（Role-Based Access Control）。这是一种通过角色关联权限，角色同时又关联用户的授权的方式。简单地说：一个用户可以拥有若干角色，每一个角色又可以被分配若干权限，这样就构造成“用户-角色-权限” 的授权模型。acl_roleacl_user几个表之间的关系：2.菜单相关操作。
guli_online_edu：谷粒学院在线教育项目
02-23
guli_online_edu：谷粒学院在线教育项目
谷粒学院在线教育项目
weixin_44348734的博客
07-18 692
前后端分离概念讲师管理模块创建父模块管理依赖版本和放公共依赖findAll返回的json时间格式需要在yml文件设置json格式和时区使用对象存储->管理控制台->创建bucket(相当于包或文件夹)->java代码上传文件到阿里云OSS准备工作创建操作阿里云oss许可证（阿里云颁发id和秘钥）Accesskey->创建Accesskey开发文档->快速入门。...
谷粒学院在线教育项目（待更新）
Burial_DH的博客
01-04 1238
谷粒学院在校教育项目 项目介绍 项目名称：谷粒在线教育 商业模式：B2C ①普通用户： ②管理员用户： 开发技术：前后端分离技术 ①前端技术：vue,element-ui,axios,nodejs,es6,npm,babel,webpack,nuxt,echarts… ②后端技术：springboot,springcloud,MybatisPlus,springsecurity,redis,maven,easyExcel,jwt,OAuth2,swagger… ③其他技术：阿里云oss，阿里云视频点播，
在线教育-谷粒学院项目(第一天)
qq_44297220的博客
06-28 393
前言 需要掌握的知识点：循序渐进需要掌握以下知识 两种比较常见的商业模式 B2C模式（在线教育就是使用的这种模式） 两个角色：管理员 和 普通用户 管理员：添加 删除 修改 普通用户： 查询 B2B2C模式（商家到商家到用户，很多电商项目是这种模式） 京东：普通用户：可以自营的 也可以买普通商家的 在线教育最核心的模块：课程模块 项目架构 b2c模式 项目分为两个部分： 系统后台------管理员使用 讲师管理模块 课程分类管理模块 课程管理模块 (1) 视频 统计分析模块
在线教育 项目 谷粒学院整理01
m0_55299825的博客
07-13 384
谷粒学院在线教育 八种商业模式 C2C模式 用户到用户的模式 用户到用户，这种模式本质是将自己的流量或者用户转卖给视频或者直播的内容提供者，通过出售内容 分成获利。 平台模式避开了非常沉重的内容和服务，扩张迅速，但实际这种模式也有缺陷，在线教育这两年的发展 使内容迅速贬值，比较难带来更免费用户和流量。 B2C模式 商家到用户的模式 两个角色： 管理员 和普通用户 管理员： 添加 修改 删除 普通用户：查询 B2B2C 商家到商家到用户 京东 项目采用前后端分离开发 后端技术 springboot
谷粒学院项目的数据库文件
10-31
谷粒学院项目的数据库文件
谷粒学院相关项目资料
04-21
包含1 测试视频 2 代码生成器 3 前端相关资源 4 数据库脚本 5 docker脚本五个内容
谷粒商城项目课程笔记.zip
01-11
谷粒商城项目课程笔记
guli_parent:谷粒学院项目
03-24
guli_parent:谷粒学院项目源码
谷粒学院（一）项目介绍
星海IT学习之路
09-26 1万+
谷粒商城项目介绍 工程介绍 谷粒学院，是一个B2C模式的职业技能在线教育系统，分为前台用户系统和后台运营平台。 二、技术架构 系统开发阶段使用了前后端分离架构，部署阶段使用了容器技术 后端环境搭建 ......
尚硅谷的谷粒学院在线教育项目笔记
weixin_45184159的博客
09-07 1596
不特意写格式了 免得多花时间 项目简介：全后端分离项目 在线教育业务 官网+后台 功能模块： 技术栈： MyBatis-Plus的主键生成策略： 参考链接：https://www.cnblogs.com/haoxinyue/p/5208136.html （1）ID-WOKER 全局唯一ID，是MyBatis-Plus默认的主键策略。 随机生成一个Long类型的19位随机纯数字作为主键。（看弹幕说是雪花算法实现的） （2） ...
谷粒在线教育系统项目总结
doubleStrong
05-16 2785
谷粒教育项目知识点总结 项目后台管理系统 权限管理模块 讲师管理模块 课程分类模块 课程管理模块 统计分析模块 订单管理模块 项目前台管理系统 首页数据列表显示 分页条件查询 数据的增删查改 项目前台用户系统 登录模块 轮播图功能 用户手机注册用户 微信扫码登录 单点登录 微信支付功能 后端技术点 SpringBoot MybatisPlus SpringCloud SpringCloud Alibaba EasyExcel SpringSecurity OSS ...
谷粒学院【网上教育】总结
热门推荐
星海IT学习之路
11-07 1万+
一、项目的启动运行 1、启动nacos D:\develop\nacos-server-1.1.4\nacos\bin下双击 startup.cmd 即可 2、启动Redis D:\develop\redis-2.8.9 下双击服务端redis-server.exe即可 2、启动nginx cmd中：nginx.exe 关闭：需要使用 nginx.exe -s stop 3、后端接口启动起来 springboot一个一个启动 4、启动前端项目 终端中输入：npm run dev 后台系统：http://lo
谷粒学院 02_谷粒学院项目介绍
lbw18的博客
07-09 1322
谷粒学院，是一个B2C模式的职业技能在线教育系统，分为前台用户系统和后台运营平台。 系统开发阶段使用了前后端分离架构，部署阶段使用了容器技术
1.谷粒学院概要
weixin_45267102的博客
07-28 609
1、介绍项目的背景 详情见《2.在线教育行业介绍》 2、介绍项目采用的商业模式 B2C 两个角色：管理员和普通用户 管理员：添加修改删除的权限 普通用户：查询 在线教育项目使用这种模式 B2B2C 京东（电商平台）：普通用户可以买自营也可买普通的商家的商品； 3、介绍项目实现功能模块 系统后台–管理员使用 讲师管理模块 课程分类管理模块 课程管理模块 视频 统计分析模块 订单管理 banner管理 权限管理 系统前台–普通用户使用 首页数据显示 讲师列表和详情 课程列表和课
谷粒学院——第七章、课程分类管理
ZMMMOO的博客
01-04 385
1、数据导入:减轻录入工作量2、数据导出:统计信息归档3、数据传输:异构系统之间数据传输。
node.js10.14.2安装包
07-27
您可以从 Node.js 的官方网站上下载适用于您的操作系统的安装包。请注意，10.14.2 版本可能已经不再是最新版本，因此建议您查看官方网站以获取最新版本。 以下是 Node.js 官方网站的链接：https://nodejs.org/ 在该网站上，您可以选择适用于您操作系统的版本并下载相应的安装包。下载完成后，运行安装包并按照提示进行安装即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

slience_me

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值