springboot整合VUE之在线教育管理系统简介

news2025/6/15 2:57:30

可以学习到的技能
学会常用技术栈的使用
独立开发项目
学会前端的开发流程
学会后端的开发流程
学会数据库的设计
学会前后端接口调用方式
学会多模块之间的关联
学会数据的处理
适用人群
在校学生，小白用户，想学习知识的
有点基础，想要通过项目实操提高自己的开发能力的
找不到完整项目跟着练的
网上项目比较大，会提供资料，太大
业务功能描述
功能模块
管理员信息：用户名、密码、姓名、头像、角色
教师信息：用户名、密码、姓名、性别、职称、所属专业、角色
学生信息：用户名、密码、姓名、性别、学号、总学分、所属学院、角色
学院信息：学院名称、学院介绍、最低学分
专业信息：专业名称、系名、所属学院
课程信息：课程名称、介绍、学分、所属学院、上课教师、开班人数、上课时段、上课地点、已选人数。如果某个课程被选过，那么该课程不允许被删除。
选课信息：课程名称、授课教师、选课学生。选课后可以取消选课，学生对应的学分也会跟着自动计算，课程已选人数也会自动计算。
系统公告：管理员维护，教师和学生查看
登录注册、修改密码、个人信息管理、退出登录
系统角色
管理员：管理员可以看到以上所有模块，管理所有模块信息。
教师：教师可以看到学院信息、专业信息，但只能查看；可以查看自己的课程信息；可以查看自己课程的选课信息
学生：学生可以查看学院、专业信息；可以对课程进行选课，可以在选课信息模块对已选的课程进行取消。
系统技术栈
后端：Springboot3、MyBatis、SpringMVC
前端：Vue3、Element-Plus
数据库：MySQL 5.7 或者 MySQL 8
前后端：分离
编辑器：IDEA2024
官方文档
hutool官网：https://doc.hutool.cn/pages/index/
Vue：https://cn.vuejs.org/
Element-Plus：https://element-plus.org/
nodejs下载、安装
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，用于构建可扩展的网络应用程序。
Node下载地址：https://nodejs.org/en
内存足够建议一路下一步【省事不易出错】，或者根据需要确定存放的位置。
安装完成后用命令检查，显示了版本号就说明安装成功了
node -v
npm -v
使用win+R,以管理员身份运行cmd.exe
查询全局包存放位置：
查询全局包存放位置：
查询缓存地址：
显示全局安装包路径
Vue3创建脚手架
创建脚手架其实就是创建一个项目文件，但是这个项目文件已经为我们添加了很多代码，所以我们就不需要去写，直接拿来用就可以了
选择一个存放脚手架文件的位置
这里我直接选择桌面，然后已终端的形式打开这个文件
执行命令
会安装并执行create-vue
然后命令行会问我们这个项目要取什么名字，需不需要什么功能，这里的功能我们全都选择否
我们会得到一个文件，我们来用终端来打开这个文件
用来安装vue的模块依赖，后续指令需要它来实现
启动项目，启动完了项目终端会给我们一个链接，这个链接对应的地址就是本地服务器的网页，让我们打开终端给我们的链接。在这里插入图片描述

这是vue给我们的初始页面，这样很多东西就不需要我们自己去配置，直接下载到本地直接用就可以了，这种东西我们称为脚手架。
在这里插入图片描述

node_modules里面有很多我们环境需要使用到的包，不如vue包，这样我们就不需要到官网去获取vue的数据，直接安装在本地直接拿来用就可以了
package.json用来管理项目的文件
src/main.js是整个项目打包的入口
App.vue是vue代码的入口
index.html是项目入口网页
src下的所有代码都会被vite打包成css/js/html交给index.html然后呈现在观众眼前
分析脚手架中三个入口级代码
三个入口文件分别是：main.js，App.vue，index.html
在这里插入图片描述