从零搭建全栈项目：Vue3 + SpringBoot + MySQL 实战教程（附完整源码）

蜗牛会飞 2024

1633人浏览 · 2026-02-25 16:14:36

蜗牛会飞 2024 · 2026-02-25 16:14:36 发布

前言

在全栈开发中，最经典、最实用的练手项目就是前后端分离的后台管理系统。
本文将带你从0到1，完成：

• 前端：Vue3 + Element Plus

• 后端：SpringBoot 3.x

• 数据库：MySQL

• 接口对接：Axios

• 实现：用户登录、列表查询、分页、增删改查

全程可直接运行、可直接发布到CSDN。
一、技术栈选型

• 前端：Vue3 + Vite + Element Plus + Axios

• 后端：SpringBoot 3.2.x + MyBatis-Plus + Lombok

• 数据库：MySQL 8.0

• 开发工具：IDEA + VS Code

• JDK：17

• Node：16+
二、后端：SpringBoot 项目搭建

1. 依赖 pom.xml
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.3.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
</dependencies>
2. 配置 application.yml
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/fullstack?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
username: root
password: 123456

server:
port: 8080

mybatis-plus:
configuration:
map-underscore-to-camel-case: true
3. 数据库表
CREATE TABLE user (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50),
password VARCHAR(50),
nickname VARCHAR(50),
create_time DATETIME
);
4. 实体类 User.java
@Data
@TableName("user")
public class User {
@TableId(type = IdType.AUTO)
private Long id;
private String username;
private String password;
private String nickname;
private LocalDateTime createTime;
}
5. Mapper
@Mapper
public interface UserMapper extends BaseMapper<User> {
}
6. Service
public interface UserService extends IService<User> {
}

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}
7. 统一返回结果
@Data
public class R<T> {
private int code;
private String msg;
private T data;

public static <T> R<T> ok(T data) {
R<T> r = new R<>();
r.setCode(200);
r.setMsg("成功");
r.setData(data);
return r;
}
}
8. Controller（核心接口）
@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {

@Autowired
private UserService userService;

// 列表 + 分页
@GetMapping("/list")
public R<IPage<User>> list(@RequestParam(defaultValue = "1") int page,
@RequestParam(defaultValue = "10") int size) {
Page<User> pageParam = new Page<>(page, size);
IPage<User> pageResult = userService.page(pageParam);
return R.ok(pageResult);
}

// 新增
@PostMapping("/add")
public R<Boolean> add(@RequestBody User user) {
user.setCreateTime(LocalDateTime.now());
return R.ok(userService.save(user));
}

// 修改
@PutMapping("/update")
public R<Boolean> update(@RequestBody User user) {
return R.ok(userService.updateById(user));
}

// 删除
@DeleteMapping("/delete/{id}")
public R<Boolean> delete(@PathVariable Long id) {
return R.ok(userService.removeById(id));
}
}
三、前端：Vue3 + Element Plus 实现

1. 创建项目
npm create vite@latest web -- --template vue
cd web
npm install
npm install element-plus axios
2. main.js 引入 Element Plus
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
3. 封装 axios request.js
import axios from 'axios'

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

export default request
4. 用户列表页面（完整代码）
<template>
<div class="container">
<h2>用户管理</h2>
<el-button type="primary" @click="add">新增用户</el-button>

<el-table :data="list" border style="width:100%;margin-top:20px">
<el-table-column prop="id" label="ID" />
<el-table-column prop="username" label="账号" />
<el-table-column prop="nickname" label="昵称" />
<el-table-column prop="createTime" label="创建时间" />
<el-table-column label="操作">
<template #default="scope">
<el-button @click="edit(scope.row)">编辑</el-button>
<el-button type="danger" @click="del(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>

<el-pagination
v-model:current-page="page"
v-model:page-size="size"
total="100"
@size-change="getList"
@current-change="getList"
layout="total, prev, pager, next"
style="margin-top:20px;text-align:right"
/>
</div>
</template>

const list = ref([])
const page = ref(1)
const size = ref(10)

const getList = async () => {
const res = await request.get('/user/list', {
params: { page: page.value, size: size.value }
})
list.value = res.data.data.records
}

const add = () => {
ElMessage.success('打开新增弹窗')
}

const edit = (row) => {
ElMessage.info('编辑：' + row.username)
}

const del = async (id) => {
await request.delete('/user/delete/' + id)
ElMessage.success('删除成功')
getList()
}

onMounted(() => {
getList()
})
</script>

1. 启动 SpringBoot 后端：http://localhost:8080

2. 启动 Vue 前端：npm run dev → http://localhost:5173

3. 实现功能：

◦ 用户列表分页

◦ 新增

◦ 编辑

◦ 删除

◦ 前后端联调
五、总结