spring boot + vue3 + MySQL的全栈小测试项目

1 前期准备

1.1 整体架构

后端：SpringBoot + MyBatis-Plus + MySQL

前端：Vue3 + Vite + Axios

功能：前端展示数据列表 + 增删改数据，后端提供接口，数据库持久化

1.2 准备环境

安装JDK 17+

安装Node.js 16+

安装MySQL 8.0.34

安装Mave 3.9.10

开发工具：IDEA（后端）、VS Code（前端）

1.3 springboot讲义网址

记录一下这个小测试项目。

2 后端 SpringBoot 项目

2.1 IDEA创建空项目（java123）

2.2 创建Mave项目（可忽略）

2.3 创建springboot的网址

https://start.spring.io/

点击GENERATE，下载安装包后解压变成文件夹，复制文件夹到新建的java123项目下面

注意点

后续只打开springbootText项目时，发现启动会报错

原因：只配置了java123的设置，其实springbootText放进java123项目里面之后也是一个新项目，要重新配置内容。

解决方法：按照创建java123的配置步骤即可。

2.4 导入pom.xml依赖

2.5 pom.xml引入依赖

<!-- MyBatis-Plus 操作数据库 --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.3.1</version> </dependency>

2.6 spring boot后端代码

2.6.1 目录结构

2.6.2 controller 控制层（接口，和前端交互）

package com.lumos.springbootText.controller; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.lumos.springbootText.entity.User; import com.lumos.springbootText.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.List; @RestController @RequestMapping("/user") @CrossOrigin(origins = "*") public class UserController { @Autowired private UserService userService; @GetMapping("/list") public List<User> list() { return userService.list(); } @PostMapping("/add") public User add(@RequestBody User user) { userService.save(user); return user; } @PostMapping("/update") public String update(@RequestBody User user) { userService.updateById(user); return "修改成功"; } @GetMapping("/delete/{id}") public String delete(@PathVariable Long id) { userService.removeById(id); return "删除成功"; } @GetMapping("/search") public List<User> search(@RequestParam String name) { LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>(); wrapper.like(User::getName, name); return userService.list(wrapper); } }

2.6.3 service 业务层接口

package com.lumos.springbootText.service; import com.baomidou.mybatisplus.extension.service.IService; import com.lumos.springbootText.entity.User; public interface UserService extends IService<User> { }

2.6.4 impl 业务层实现类

package com.lumos.springbootText.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.lumos.springbootText.entity.User; import com.lumos.springbootText.mapper.UserMapper; import com.lumos.springbootText.service.UserService; import org.springframework.stereotype.Service; @Service public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService { }

2.6.5 mapper DAO/数据访问层（和数据库交互）

package com.lumos.springbootText.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.lumos.springbootText.entity.User; import org.apache.ibatis.annotations.Mapper; @Mapper public interface UserMapper extends BaseMapper<User> { }

2.6.6 entity 实体类（User 放这里）

package com.lumos.springbootText.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import lombok.Data; @Data public class User { @TableId(type = IdType.AUTO) private Long id; private String name; private Integer age; }

2.6.7 config 配置类（MybatisPlusConfig 放这里）

package com.lumos.springbootText.config; import com.baomidou.mybatisplus.annotation.DbType; import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor; import org.mybatis.spring.annotation.MapperScan; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; @Configuration @MapperScan("com.lumos.springbootText.mapper") public class MybatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }

2.6.8 SpringbootTextApplication启动类

package com.lumos.springbootText; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class SpringbootTextApplication { public static void main(String[] args) { SpringApplication.run(SpringbootTextApplication.class, args); } }

2.6.9 application.properties配置（数据库的参数在后面）

application.properties是 Spring Boot 项目的「全局配置中心」，你项目里所有和 “运行环境、参数设置” 相关的东西，都可以写在这里，不用改 Java 代码。

spring.application.name=springbootText spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/test_db?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true spring.datasource.username=root spring.datasource.password=1234 server.port=8081 # MyBatis-Plus 配置 mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl mybatis-plus.configuration.map-underscore-to-camel-case=true

2.6.10 pom.xml依赖

Lombok 就是帮你写 “重复代码” 的工具，让你的实体类、业务类更简洁，专注写核心逻辑，不用再写 getter/setter 这些模板代码。

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.18</version> <relativePath/> </parent> <groupId>com.lumos</groupId> <artifactId>springbootText</artifactId> <version>0.0.1-SNAPSHOT</version> <properties> <java.version>11</java.version> </properties> <repositories> <repository> <id>aliyun</id> <url>https://maven.aliyun.com/repository/public</url> </repository> </repositories> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.33</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <!-- MyBatis-Plus Spring Boot 2 兼容版本 --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.3.1</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <excludes> <exclude> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </exclude> </excludes> </configuration> </plugin> </plugins> </build> </project>

3 数据库（MySQL）

3.1 安装MySQL

网址：https://downloads.mysql.com/archives/community/

安装好后解压文件放到你想要的位置（这个软件就是一个文件夹）

3.2 配置数据库的环境变量

右键此电脑→属性，搜索高级系统设置

有两个方法：

3.2.1 方法一

双击Path，点击新建，直接把数据库的路径复制进去

3.2.2 方法二

3.2.3 两个路径的区别

直接复制D:\mysql\mysql-8.0.34-winx64\bin：这是硬编码的绝对路径，系统会直接按这个地址找mysql.exe，是你现在实际在用的路径。

%MYSQL_HOME%\bin：这是环境变量引用，它的实际路径取决于你有没有定义MYSQL_HOME这个变量。优点：以后升级 MySQL，只需要修改MYSQL_HOME的值，Path不用动，一劳永逸。

3.2.4 验证是否添加成功？（以方法二为例）

3.2.5 初始化

以管理员身份，运行命令行窗口：

mysqld --initialize-insecure

无报错就是可以的

3.2.6 注册MySQL服务

mysqld -install

现在计算机上已经安装好了MySQL服务了。

3.2.7 启动MySQL服务

net start mysql // 启动mysql服务 net stop mysql // 停止mysql服务

3.2.8 修改默认账户密码

这里的1234就是指默认管理员(即root账户)的密码，可以自行修改成你喜欢的。

mysqladmin -u root password 1234

3.2.9 登录

mysql -uroot -p1234

3.2.10 退出mysql

exit

3.2.11 登录参数

mysql -u用户名 -p密码 -h要连接的mysql服务器的ip地址(默认127.0.0.1) -P端口号(默认3306)

3.3 DataGrip安装

Toolbox App 安装

网址：https://www.jetbrains.com/toolbox-app/

安装后在列表找到DataGrip → InstallJetBrains

下载好打开

打开你的后端项目文件java123后，创建连接

密码是最开始启动的MySQL设置的密码：1234

测试一下，运行成功就是连接好了

3.4 MySQL 建表

3.4.1 新建 SQL 文件

1.在 IDEA 左侧「数据库资源管理器」面板，点击顶部的+号 → 选择「查询控制台」

2.把下面的 SQL 代码粘贴进去

复制SQL代码

-- 1. 创建数据库 CREATE DATABASE IF NOT EXISTS test_db; -- 2. 切换到这个数据库 USE test_db; -- 3. 创建 user 表 CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(20) NOT NULL, age INT );

运行成功会出现你创建的表

3.4.2 配置并连接 MySQL

1. 点击 IDEA 右侧边栏的「Database」（数据库）图标，点击+→Data Source→MySQL
2. 填写连接信息：
   • Host:localhost
   • Port:3306（默认端口）
   • User:root（你的 MySQL 用户名）
   • Password: 1234（你的 MySQL 密码）
   • Database:test_db（填入创建的test_db表）
3. 点击「Test Connection」测试连接，显示「Successful」就说明配置好了，点击「Apply」→「OK」

IDEA的数据库中出现你创建的test_db表就表示数据库连接成功

4 前端Vue3

4.1 创建 Vue3 项目（cmd 执行）

win+r，输入cmd进入终端

# 创建项目 npm create vite@latest vue-front -- --template vue

前端默认地址：http://localhost:5173

4.2 在VS Code中打开创建的vue-front的文件夹

4.3 配置 axios 请求

在前端的vite.config.js里编写

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { proxy: { '/api': { target: 'http://localhost:8081', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } })

4.4编写页面（App.vue）

<template> <div class="container"> <h1>用户管理系统</h1> <!-- 搜索 --> <div class="search-box"> <input v-model="searchName" placeholder="搜索姓名" /> <button @click="searchUser">搜索</button> <button @click="loadList">重置</button> </div> <!-- 新增表单 --> <div class="add-form"> <h3>新增用户</h3> <input v-model="user.name" placeholder="姓名" /> <input v-model="user.age" placeholder="年龄" type="number" /> <button @click="addUser">添加</button> </div> <!-- 修改表单 --> <div class="update-form" v-if="editId > 0"> <h3>修改用户</h3> <input v-model="editUser.name" placeholder="姓名" /> <input v-model="editUser.age" placeholder="年龄" type="number" /> <button @click="updateUser">确认修改</button> <button @click="cancelEdit">取消</button> </div> <!-- 用户列表 --> <div class="list-box"> <h3>用户列表</h3> <ul> <li v-for="u in users" :key="u.id"> <span>{{ u.id }}</span> <span>{{ u.name }}</span> <span>{{ u.age }}岁</span> <button @click="toEdit(u)">修改</button> <button @click="deleteUser(u.id)">删除</button> </li> </ul> </div> </div> </template> <script setup> import { ref, onMounted } from 'vue' const users = ref([]) const user = ref({ name: '', age: '' }) const editUser = ref({ id: '', name: '', age: '' }) const editId = ref(0) const searchName = ref('') // 加载列表 onMounted(() => loadList()) async function loadList() { const res = await fetch('/api/user/list') users.value = await res.json() } // 新增（修复版） async function addUser() { const res = await fetch('/api/user/add', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(user.value) }) await res.json() // 接收返回的用户 alert('添加成功') loadList() // 强制刷新列表 user.value = { name: '', age: '' } } // 进入修改 function toEdit(u) { editId.value = u.id editUser.value = { ...u } } // 取消修改 function cancelEdit() { editId.value = 0 } // 修改 async function updateUser() { await fetch('/api/user/update', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(editUser.value) }) alert('修改成功') loadList() cancelEdit() } // 删除 async function deleteUser(id) { if (!confirm('确定删除？')) return await fetch('/api/user/delete/' + id) alert('删除成功') await loadList() } // 搜索 async function searchUser() { const res = await fetch('/api/user/search?name=' + searchName.value) users.value = await res.json() } </script> <style scoped> .container { max-width: 800px; margin: 50px auto; padding: 20px; } .search-box, .add-form, .update-form, .list-box { margin: 20px 0; padding: 20px; background: #f5f5f5; border-radius: 8px; } input { padding: 8px; margin: 5px; width: 200px; } button { padding: 6px 12px; margin: 0 4px; background: #42b983; color: white; border: none; border-radius: 4px; cursor: pointer; } li { list-style: none; padding: 10px; margin: 5px 0; background: white; border-radius: 5px; display: flex; gap: 15px; align-items: center; } </style>

4.5 运行前端项目

cd C:\Users\chuanmeiyang\vue-front

npm run dev

4.6 验证效果

打开浏览器访问http://localhost:5173

5 结语

自此，整个项目都能够跑通了。