🤖 Assistant

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# 🌿 SpringBoot + Vue 全栈开发指南

## 📚 目录
1. [环境准备](#-环境准备)  
2. [前后端项目创建](#-前后端项目创建)  
3. [SpringBoot基础接口开发](#-springboot基础接口开发)  
4. [Vue前端基础搭建](#-vue前端基础搭建)  
5. [前后端联调实战](#-前后端联调实战)  
6. [数据库整合](#-数据库整合)  
7. [项目打包部署](#-项目打包部署)  
8. [实战：图书管理系统](#-实战项目)  

---

## 🔧 环境准备
### 必备工具清单
| 工具              | 用途                      | 下载地址                                |
|-------------------|---------------------------|----------------------------------------|
| **JDK 17+**       | Java开发环境              | [Oracle JDK](https://www.oracle.com/java/) |
| **Node.js 18+**   | Vue运行环境               | [Node.js](https://nodejs.org/)         |
| **Maven 3.6+**    | 项目管理工具              | [Maven](https://maven.apache.org/)     |
| **VS Code**       | 前端开发IDE               | [VS Code](https://code.visualstudio.com/) |
| **IntelliJ IDEA** | 后端开发IDE               | [IDEA](https://www.jetbrains.com/idea/) |

### 环境验证
```bash
# 检查Java环境
java -version

# 检查Node环境
node -v  
npm -v

# 检查Maven
mvn -v

🛠️ 前后端项目创建

后端SpringBoot项目

  1. 通过Spring Initializr创建
    访问 start.spring.io，选择：

    1
    2
    3
    4
    Project: Maven  
    Language: Java  
    Spring Boot: 3.2.x  
    Dependencies: Spring Web, Lombok

  2. 项目结构

    1
    2
    3
    4
    5
    6
    7
    src/
      main/
        java/
          com/example/bookstore/
            BookstoreApplication.java  # 启动类
        resources/
          application.properties

前端Vue项目

  1. 使用Vue脚手架创建

    1
    2
    3
    npm install -g @vue/cli  
    vue create book-frontend  
    # 选择默认配置（Vue 3 + babel）

  2. 项目结构

    1
    2
    3
    4
    5
    6
    7
    src/
      assets/       # 静态资源
      components/   # 组件
      router/       # 路由
      views/        # 页面
      App.vue       # 根组件
      main.js       # 入口文件

📡 SpringBoot基础接口开发

1. 编写RESTful接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@RestController
@RequestMapping("/api/books")
public class BookController {

    @GetMapping
    public List<Book> getBooks() {
        return Arrays.asList(
            new Book(1, "Spring Boot实战", "王五"),
            new Book(2, "Vue3指南", "李四")
        );
    }

    @PostMapping
    public Book addBook(@RequestBody Book book) {
        return book; // 模拟保存操作
    }
}

2. 跨域配置（关键！）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Configuration
public class CorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:8080") // Vue默认端口
                        .allowedMethods("*");
            }
        };
    }
}

🎨 Vue前端基础搭建

1. 安装必要依赖

1
npm install axios vue-router@4 --save

2. 配置axios实例

1
2
3
4
5
6
7
8
9
// src/utils/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: 'http://localhost:8081/api', // SpringBoot端口
  timeout: 5000
});

export default service;

3. 调用接口示例

1
2
3
4
5
6
7
8
9
10
11
<script setup>
import { ref, onMounted } from 'vue';
import request from '@/utils/request';

const books = ref([]);

onMounted(async () => {
  const res = await request.get('/books');
  books.value = res.data;
});
</script>

🔌 前后端联调实战

联调流程

1
2
3
4
graph LR
  A[Vue前端] -->|发送请求| B(SpringBoot后端)
  B -->|返回JSON数据| A
  A -->|渲染数据| C[浏览器]

常见问题解决

  1. 跨域问题

    • 确认后端已配置CORS
    • 检查请求端口号是否正确

  2. 404错误

    • 确认后端接口路径与前端请求路径一致
    • 查看SpringBoot控制台是否注册了对应接口

🗃️ 数据库整合

1. 集成MyBatis-Plus

1
2
3
4
5
6
7
8
9
10
11
<!-- pom.xml -->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.5.5</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.33</version>
</dependency>

2. 数据库配置

1
2
3
4
5
# application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/book_db?useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

📦 项目打包部署

前端打包

1
npm run build  # 生成dist目录

后端整合静态资源

  1. 将dist目录内容复制到src/main/resources/static
  2. 修改SpringBoot配置：
    1
    spring.web.resources.static-locations=classpath:/static/

打包运行

1
2
mvn clean package
java -jar target/bookstore-0.0.1-SNAPSHOT.jar

🎯 实战项目：图书管理系统

功能模块

  • 图书列表展示 📚
  • 添加/编辑图书 ✏️
  • 删除图书 🗑️
  • 模糊搜索 🔍

技术亮点

模块 技术点
前端 Vue3 + Element Plus + Axios
后端 SpringBoot + MyBatis-Plus
认证 JWT令牌验证
部署 Docker容器化

效果预览

1
2
3
4
5
6
7
8
<!-- BookList.vue -->
<template>
  <el-table :data="books">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="title" label="书名"></el-table-column>
    <el-table-column prop="author" label="作者"></el-table-column>
  </el-table>
</template>

💡 提示：建议从基础CRUD功能开始，逐步添加搜索、分页等高级功能，通过实际调试加深理解！
🚧 常见问题：接口报500错误时，优先检查后端控制台日志，前端通过开发者工具查看网络请求详情。


![效果示意图](https://via.placeholder.com/800x400.png?text=图书管理系统界面预览)