(开源)高校实验室预约系统 全栈开发实录 采用 Java + SpringBoot + Vue + MySQL

(开源)高校实验室预约系统 全栈开发实录 采用 Java + SpringBoot + Vue + MySQL

🌟 项目概述

这套系统能解决什么？ 靠人工和表格管理数据，往往会碰到这几个麻烦：

• 信息零散地存在各个 Excel 里，想做一次汇总统计就得忙活半天
• 几个人同时维护同一份数据，版本越改越乱，还经常重复录入
• 没有权限分级，谁都能进去改，数据安全没保障

这个项目用 Java + SpringBoot + Vue + MySQL 这一整套技术栈搭建，针对上面这些问题给出了完整方案，无论是拿来做毕设、课设，还是当成企业级开发的入门样例，都很合适。

涉及的技术栈

技术	角色定位	版本要求
Java	后端主力语言	JDK 1.8+
SpringBoot	后端框架	2.x+
Vue	前端框架	2.x/3.x
ElementUI	后台 UI 组件库	2.x
MySQL	数据库	8.0+

🧩 主要功能一览

• 我的信息
• 实验室管理员管理
• 学生管理
• 教师管理
• 实验室类型管理
• 实验室管理
• 预约申请管理
• 使用记录管理
• 作业信息管理
• 作业提交管理
• 作业成绩管理
• 论坛交流
• 系统管理
• 其它功能…

🖼️ 系统界面预览

---

⚙️ 环境准备与工具清单

为什么要反复强调版本？ Java 这套生态里，大版本之间常常藏着不向下兼容的改动。拿 MySQL 来说，8.0 默认的身份验证插件跟 5.7 不一样，如果还按 5.7 那一套去连，直接就会报错。所以选一组验证过能跑通的版本，能帮你绕开一大堆这类坑。

✅ 建议的版本组合

工具	版本	备注
Java	JDK 1.8	长期支持版本，兼容性最稳
MySQL	8.0.41	本文实测版本，推荐 8.0 系列
Node.js	16.20.2	前端打包构建所需
Maven	3.6+	后端依赖管理

⚠️ 关于版本兼容

• 已跑通：上面这组版本搭配起来运行很稳定
• 没把握：再往上的版本（比如 JDK 17、MySQL 8.4）可能会有兼容问题
• 建议：第一次部署最好老老实实照着推荐版本来

🛠️ 趁手的开发工具

• 后端：IntelliJ IDEA 2022+（社区版就够用，而且免费）
• 前端：VS Code
• 数据库：Navicat / DBeaver / MySQL Workbench

---

📁 工程目录说明

压缩包解开以后，关键目录大致长这样：

📁 System/
├── JavaSpringBoot/       ← 后端源码（推荐用 IDEA 打开）
├── VueAdmin/             ← 管理后台前端（推荐用 VS Code 打开）
├── VueUser/              ← 用户端前端（推荐用 VS Code 打开）
└── MysqlDatabase/
    └── *.sql             ← 数据库脚本（推荐用 Navicat 导入）

📌 存放路径的几个注意点

• ✅ 推荐写法：D:\projects\my_app
• ❌ 别这样：D:\我的项目\app（路径里有中文容易引发编码问题）
• ❌ 也别这样：D:\Program Files\my_app（路径含空格有时会让解析出错）

---

🚀 部署上手流程

1️⃣ 先把数据库导进去

为什么数据库要排在第一步？ 后端一启动就要去连数据库，要是库还没建好、表也不全，启动那一刻就会直接报错。所以数据库初始化这一步必须先搞定。

怎么做：

1. 新建一个数据库（名字比如叫 system），字符集选 utf8mb4。

utf8mb4 和 utf8 到底差在哪？ MySQL 里的 utf8 一个字符最多占 3 字节，存不下 emoji 这种 4 字节的字符。utf8mb4 才是完整的 UTF-8 编码，建议全程统一用它。

2. 跑一遍 MysqlDatabase/*.sql 脚本，把初始数据灌进去。

怎么确认成功：

• 打开数据库客户端，看看库是不是已经建出来了
• 执行 SHOW TABLES;，核对一下表是不是都齐了

正常应该看到：

+----------------------+
| Tables_in_system     |
+----------------------+
| config               |
| token                |
| users                |
| ...   |
+----------------------+

可能遇到的问题：

现象	起因	怎么处理
字符集不对	建库时选了 utf8 没选 utf8mb4	删掉重建，记得指定 utf8mb4
提示表已存在	脚本导了不止一次	先 DROP DATABASE system; 再重新建

2️⃣ 把后端跑起来

为什么选 SpringBoot？ 它把 Tomcat 直接内嵌进去了，不用你单独装和配 Tomcat，跑一下 main 方法服务就起来了。再加上 Maven 依赖也是它自动帮你管，配置上省了不少事。

怎么做：

1. 用 IntelliJ IDEA 打开 JavaSpringBoot 这个目录。
2. 耐心等 Maven 把依赖拉完（头一回会比较慢，差不多 5-15 分钟）。

第一次为什么这么慢？ Maven 要从中央仓库把所有依赖包一个个下到本地。配上阿里云镜像能快不少，方法看后面。

3. 打开 application.yml，把数据库连接信息改成你自己的（账号、密码、库名）。
4. 运行主启动类，控制台打出 "Tomcat started on port(s): 8080" 就说明起来了。

怎么确认成功：

• 浏览器开 http://localhost:8080，应该会回一段 JSON
• 翻一下控制台日志，确认没有异常往外抛

可能遇到的问题：

现象	起因	怎么处理
端口被占	8080 被别的程序用了	改 application.yml 里的 server.port
依赖下不下来	Maven 配置有问题	配阿里云镜像（见后面的加速部分）
连不上数据库	配置写错了或数据库没开	核对 application.yml 里的数据库连接参数

3️⃣ 启动前端

为什么用 Vue？ Vue 走的是组件化路线，页面拆成一块块复用起来很方便。后台和用户端这两个项目共用同一套 API，开发效率和后期维护都更轻松。

怎么做：
分别进到 VueAdmin 和 VueUser 目录，依次敲这两条命令：

npm install     # 装依赖（只有第一次需要跑）
npm run serve   # 启动本地服务

后台默认开在 http://localhost:8081，用户端默认开在 http://localhost:8082。

怎么确认成功：

• 两个地址都打开看看，页面能正常出来就行
• 登录页正常显示、控制台没报错

可能遇到的问题：

现象	起因	怎么处理
npm install 失败	网络问题或依赖版本打架	换国内镜像（见后面的加速部分）
页面一片空白	接口地址配错了	检查 vue.config.js 里的 devServer.proxy

---

⚡ 提速窍门 & 常见疑问

🔄 配置国内镜像加速

为什么要配镜像？ npm 和 Maven 默认都是去国外服务器下东西，国内访问又慢又不稳。配上国内镜像，下载速度立竿见影。

NPM 镜像（一次配置长期有效）

npm config set registry https://registry.npmmirror.com

验证一下：

npm config get registry
# 应该输出：https://registry.npmmirror.com

Maven 镜像（改 ~/.m2/settings.xml）

<mirror>
  <id>aliyun</id>
  <mirrorOf>*</mirrorOf>
  <name>阿里云仓库</name>
  <url>https://maven.aliyun.com/repository/public</url>
</mirror>

🚫 端口被占了怎么办

碰到端口冲突，可以这么解决：

办法一：改后端端口

# application.yml
server:
  port: 8081  # 换成一个没被占用的端口

办法二：改前端端口

// vue.config.js
module.exports = {
  devServer: {
    port: 8082  # 换成一个没被占用的端口
  }
}

验证一下：

• 重启服务后，用新端口的地址访问
• 确认页面能正常打开

---

🔧 核心代码拆解

下面拿用户管理这个模块当例子，把系统从数据库一路到接口的实现链路走一遍。其余业务模块的代码骨架跟用户管理一模一样，换一下实体字段就能照搬。

实体层（Entity）—— 定义数据模型

@TableName("system_users")
public class SystemUserEntity implements Serializable {
    private static final long serialVersionUID = 1L;

    @TableId
    private Long id;          // 主键
    private String username;  // 用户名
    private String name;      // 真实姓名
    private String password;  // 密码
    private String sex;       // 性别
    private String avatar;    // 头像
    private String phone;     // 手机号
    private String role;      // 所属角色

    @JsonFormat(locale="zh", timezone="GMT+8", pattern="yyyy-MM-dd HH:mm:ss")
    @DateTimeFormat
    private Date addtime;     // 创建时间

    // getter / setter 方法（略）
}

实体类靠 @TableName 注解跟数据库表挂钩。MyBatis-Plus 会照着实体字段把基础 SQL 自动生成出来，CRUD 这些语句不用你手写。

对应的数据库表结构：

CREATE TABLE system_users (
  id bigint(20) NOT NULL COMMENT '主键',
  username varchar(100) DEFAULT NULL COMMENT '用户名',
  name varchar(100) DEFAULT NULL COMMENT '真实姓名',
  password varchar(100) DEFAULT NULL COMMENT '密码',
  sex varchar(10) DEFAULT NULL COMMENT '性别',
  avatar varchar(255) DEFAULT NULL COMMENT '头像',
  phone varchar(20) DEFAULT NULL COMMENT '手机号',
  role varchar(50) DEFAULT NULL COMMENT '角色',
  addtime datetime DEFAULT NULL COMMENT '创建时间',
  PRIMARY KEY (id)
);

接口返回的 JSON（序列化之后）：

{
  "id": 1,
  "username": "admin",
  "name": "管理员",
  "sex": "男",
  "phone": "13800138000",
  "role": "系统管理员",
  "addtime": "2026-06-01 10:00:00"
}

---

数据访问层（Mapper + XML）

Mapper 接口：

public interface SystemUserDao extends BaseMapper<SystemUserEntity> {
    // ${ew.sqlSegment} 会自动拼接前端传入的查询条件
    List<SystemUserView> selectListView(@Param("ew") Wrapper<SystemUserEntity> wrapper);
}

Mapper XML 映射：

<mapper namespace="com.dao.SystemUserDao">
    <resultMap type="com.entity.SystemUserEntity" id="userMap">
        <result property="username" column="username"/>
        <result property="name" column="name"/>
        <result property="password" column="password"/>
        <result property="sex" column="sex"/>
        <result property="avatar" column="avatar"/>
        <result property="phone" column="phone"/>
        <result property="role" column="role"/>
    </resultMap>

    <select id="selectListView" resultType="com.entity.view.SystemUserView">
        SELECT * FROM system_users
        <where> 1=1 ${ew.sqlSegment}</where>
    </select>

    <!-- 自定义统计查询示例 -->
    <select id="selectScore" resultType="java.lang.Integer">
        select sum(score) from user_scores
        where username = #{u.username}
    </select>
</mapper>

${ew.sqlSegment} 是 MyBatis-Plus 动态 SQL 的核心招数——前端传过来的分页、排序、模糊搜索这些条件，会自动接到 SQL 末尾去，每个模块都省得重复写 SQL。

---

业务逻辑层（Service）

@Service("systemUserService")
public class SystemUserServiceImpl
        extends ServiceImpl<SystemUserDao, SystemUserEntity>
        implements SystemUserService {

    @Override
    public PageUtils queryPage(Map<String, Object> params,
                               Wrapper<SystemUserEntity> wrapper) {
        Page<SystemUserView> page = new Query<SystemUserView>(params).getPage();
        List<SystemUserView> records = baseMapper.selectListView(page, wrapper);
        page.setRecords(records);
        return new PageUtils(page);
    }
}

ServiceImpl 已经把 insert、selectById、updateById、deleteBatchIds 这些基础方法都内置好了，业务层只要管查询条件怎么拼、特殊逻辑怎么处理就行。

---

控制层（Controller）—— 定义接口

@RestController
@RequestMapping("/system/user")
public class SystemUserController {

    @Autowired
    private SystemUserService systemUserService;

    @Autowired
    private TokenService tokenService;

    /**
     * 登录接口
     */
    @IgnoreAuth
    @RequestMapping("/login")
    public R login(String username, String password) {
        SystemUserEntity user = systemUserService.selectOne(
            new EntityWrapper<SystemUserEntity>().eq("username", username));
        if (user == null || !user.getPassword().equals(password)) {
            return R.error("账号或密码不正确");
        }
        String token = tokenService.generateToken(
            user.getId(), username, "system_user", "系统用户");
        return R.ok().put("token", token);
    }

    /**
     * 注册接口
     */
    @IgnoreAuth
    @RequestMapping("/register")
    public R register(@RequestBody SystemUserEntity entity) {
        // ✅ 正确做法：注册前先检查用户名是否已被占用
        SystemUserEntity exist = systemUserService.selectOne(
            new EntityWrapper<SystemUserEntity>().eq("username", entity.getUsername()));
        if (exist != null) {
            return R.error("用户已存在");
        }
        entity.setId(new Date().getTime());
        systemUserService.insert(entity);
        return R.ok();
    }

    /**
     * ❌ 反例：注册时不检查用户是否已存在
     * 后果：如果数据库中 username 字段有唯一索引，直接 insert 会抛出
     * DataIntegrityViolationException，最终返回 500 + 堆栈信息，而不是友好的提示。
     * 前端只能显示"系统异常"，用户不知道具体原因。
     */
    // @IgnoreAuth
    // @RequestMapping("/register_wrong")
    // public R registerWrong(@RequestBody SystemUserEntity entity) {
    //     entity.setId(new Date().getTime());
    //     systemUserService.insert(entity);  // 如果用户名重复，这里会报错
    //     return R.ok();
    // }

    /**
     * 分页查询
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,
                  SystemUserEntity entity) {
        EntityWrapper<SystemUserEntity> ew = new EntityWrapper<>();
        PageUtils page = systemUserService.queryPage(params,
            MPUtil.sort(MPUtil.likeOrEq(ew, entity), params));
        return R.ok().put("data", page);
    }

    /**
     * 详情查询
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id) {
        SystemUserEntity entity = systemUserService.selectById(id);
        return R.ok().put("data", entity);
    }

    /**
     * 新增
     */
    @RequestMapping("/save")
    public R save(@RequestBody SystemUserEntity entity) {
        entity.setId(new Date().getTime());
        systemUserService.insert(entity);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody SystemUserEntity entity) {
        systemUserService.updateById(entity);
        return R.ok();
    }

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids) {
        systemUserService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
}

---

前端怎么调（Vue + axios）

后端接口定义好之后，前端就用 axios 去请求。下面拿登录功能举个例子。

前端 API 封装：

// api.js - 统一接口封装
import axios from 'axios'

const request = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 10000
})

// 接口调用：用户登录
export function loginApi(data) {
  return request({
    url: '/system/user/login',
    method: 'post',
    data
  })
}

// 接口调用：分页查询
export function pageApi(params) {
  return request({
    url: '/system/user/page',
    method: 'get',
    params
  })
}

登录页里的调用逻辑（login.vue）：

// login.vue <script> 核心部分
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      loginApi(this.form).then(res => {
        if (res.data.code === 0) {
          // 登录成功，存储 token
          localStorage.setItem('token', res.data.token)
          // 跳转到首页
          this.$router.push('/home')
        } else {
          // 登录失败，显示错误提示
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        console.error('请求异常', err)
      })
    }
  }
}

前后端之间靠统一的 JSON 格式打交道。前端只用盯着 code 和 data 看，所有接口都遵守同一套响应结构（R 对象），省掉了一大堆重复的错误处理代码。

---

统一响应对象（R）

系统里所有接口都返回同样格式的 JSON，前端靠 code 来判断这次请求是什么状态：

public class R extends HashMap<String, Object> {
    private static final long serialVersionUID = 1L;

    public R() {
        put("code", 0);  // 0 表示成功
    }

    public static R ok() {
        return new R();
    }

    public static R ok(String msg) {
        return new R().put("msg", msg);
    }

    public static R error(String msg) {
        return error(500, msg);
    }

    public static R error(int code, String msg) {
        R r = new R();
        r.put("code", code);
        r.put("msg", msg);
        return r;
    }

    public R put(String key, Object value) {
        super.put(key, value);
        return this;
    }
}

接口响应格式速查：

场景	code	msg	data
操作成功	0	—	实际数据
操作成功（带提示）	0	"操作成功"	实际数据
登录失败	500	"账号或密码不正确"	—
注册冲突	500	"用户已存在"	—
未登录	401	"未登录"	—

---

🎯 实战演练：走一遍完整业务流程

下面挑系统里一条完整的业务流程，把从发起接口请求到数据落库的全过程串起来看，输入数据、接口调用、预期返回、数据库核对一个不少。

场景设定

管理员在后台开一个用户账号，这个用户拿账号密码登录系统，登录后再去改自己的资料。

第 1 步：管理员建新用户

操作：管理员登后台 → 进用户管理 → 点新增 → 填信息 → 提交

接口请求：

POST http://localhost:8080/system/user/save
Content-Type: application/json

输入数据：

{
  "username": "zhangsan",
  "name": "张三",
  "password": "123456",
  "sex": "男",
  "phone": "13800138000",
  "role": "普通用户"
}

预期返回：

{
  "code": 0
}

第 2 步：用户登录系统

操作：用户打开登录页 → 填账号密码 → 点登录

接口请求：

POST http://localhost:8080/system/user/login
Content-Type: application/x-www-form-urlencoded

username=zhangsan&password=123456

预期返回：

{
  "code": 0,
  "token": "eyJhbGciOiJIUzI1NiIs..."
}

第 3 步：用户改个人信息

操作：登录成功后 → 进个人中心 → 改手机号 → 保存

接口请求：

POST http://localhost:8080/system/user/update
Content-Type: application/json
token: {{上一步返回的token}}

{
  "id": 1,
  "phone": "13900139000"
}

预期返回：

{
  "code": 0
}

第 4 步：到数据库核对

SELECT id, username, name, phone FROM system_users WHERE username = 'zhangsan';

预期输出：

+----+----------+--------+--------------+
| id | username | name   | phone        |
+----+----------+--------+--------------+
|  1 | zhangsan | 张三   | 13900139000  |
+----+----------+--------+--------------+

第 5 步：失败场景——注册一个重名用户

真正能用的系统，不光要把成功的路走通，异常情况也得接住。下面演示一下用户注册时用户名已经被占用的处理过程。

操作：用户在前端填好注册信息点提交，可这个用户名已经被别人注册过了。

接口请求：

POST http://localhost:8080/system/user/register
Content-Type: application/json

{
  "username": "zhangsan",
  "name": "张三",
  "password": "123456"
}

预期返回：

{
  "code": 500,
  "msg": "用户已存在"
}

前端表现：页面弹出"用户已存在"的提示，输入框内容还留着，改一改就能重新提交。

❌ 反例——不做查重会怎样：

{
  "code": 500,
  "msg": "DataIntegrityViolationException: Duplicate entry 'zhangsan' for key 'username'"
}

要是省了查重这一步，直接往库里插，MySQL 的唯一索引就会抛异常。最后丢给前端的是一坨堆栈信息而不是友好提示，用户体验差到家，而且还埋着 SQL 注入这类安全隐患。

---

这条流程把系统三个核心能力都覆盖到了：新增（写入）→ 登录（鉴权）→ 修改（更新），每一步都有清清楚楚的输入数据、接口请求和能拿来核对的输出结果，正常路径和异常路径也都照顾到了。

---

🔧 踩坑回顾：我实际部署时碰到的真问题

下面这些都是我自己部署过程中实打实遇到的，按现象→排查→根因→解法的顺序整理出来。

坑 1：启动后端报 Access denied for user 'root'@'localhost'

现象：控制台报错，数据库连不上。

排查：去翻 application.yml 里的数据库配置。

根因：MySQL 8.0 默认用的是 caching_sha2_password 验证插件，老版本的 Navicat 或 JDBC 驱动可能不认这个。

解法：

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'your_password';
FLUSH PRIVILEGES;

坑 2：npm install 报 npm ERR! code ERESOLVE

现象：跑 npm install 的时候提示依赖版本对不上。

排查：看报错信息里给出的依赖树。

根因：某些依赖包之间的版本互相不兼容。

解法：

npm install --legacy-peer-deps

坑 3：前端起来后页面白屏

现象：浏览器打开前端地址是一片空白，控制台有接口 404。

排查：打开浏览器开发者工具 → Network 面板，看请求打到哪去了。

根因：前端请求指向后端 8080 端口，但后端没启动，或者地址配错了。

解法：

1. 先确认后端已经起来并且正常运行
2. 检查 vue.config.js 里的 devServer.proxy 配置
3. 确认后端接口地址没写错

配置参考：

// vue.config.js
module.exports = {
  devServer: {
    port: 8081,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
};

坑 4：前后端联调时报跨域（CORS）

现象：前端请求后端接口，浏览器控制台冒出 No 'Access-Control-Allow-Origin' header。

排查：看浏览器 Network 面板，会发现请求确实发出去了，但响应被拦下了。

根因：前后端分离部署用了不同端口（比如前端 8081、后端 8080），浏览器的同源策略把跨端口请求给挡住了。

解法（在后端加一个 CORS 全局配置）：

package com.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOriginPattern("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

---

📦 项目源码地址

平台	链接	说明
GitHub	https://github.com/Snapegit/UniversityLabBookingSystem	完整源码，建议 Fork
网盘	https://pan.xunlei.com/s/VOuu2Lytu-EaYZAQBrs6ZurhA1?pwd=7e7s#	备用下载地址

💡 下载建议

• 首选：优先去 GitHub 下，能拿到最新版本
• 留意：网盘里的不一定是最新的，只建议当备用
• 欢迎：点个 Star ⭐ 支持下项目，有问题就提 Issue 或 Pull Request

---

⚖️ 法律声明

本项目是在开源项目基础上做的二次开发，只供 个人学习和技术交流 用。

• 版权说明

  • 原项目的版权归原作者所有
  • 本项目只是在原项目上做了功能扩展和界面优化
  • 没有改动原项目的授权协议

• 使用限制

  • ❌ 不得用于商业用途
  • ❌ 不得转售或冒充成原创作品
  • ❌ 不得用于任何违法违规的场景
  • ✅ 可用于个人学习、课程设计、毕业设计
  • ✅ 可用于技术交流和经验分享

• 商业使用

  • 想商用的话，请联系原作者拿授权
  • 本项目作者不为任何商业使用引发的法律后果负责

---

📋 适用范围与边界

✅ 适合谁用

• 新手、学生练手学开发
• 学 Java + SpringBoot + Vue + MySQL 这套技术栈
• 做毕业设计、课程设计找参考
• 企业级开发入门学习

⚠️ 边界提醒

• 技术栈方面：本文示例基于上面那套技术栈，换别的组合就不适用了
• 功能方面：只覆盖核心功能模块，要扩展功能得自己写
• 环境方面：只在推荐环境下验证过，别的环境可能有兼容问题

🔄 版本兼容性

• Java：适配 JDK 1.8+，更高版本没验证过
• SpringBoot：适配 2.x，3.x 没验证过
• MySQL：适配 8.0+，5.x 没验证过
• Node.js：适配 16.x，更高版本可能要调一调

---

💡 温馨提示：部署途中要是卡住了，欢迎在评论区留言一起讨论，我看到会尽快回！觉得项目还不错就点个赞 👍 收藏 ⭐ 支持一下吧！