Spring Boot + Vue前后端分离项目开发实战教程

一、项目环境搭建

1. 后端环境

• JDK：建议使用JDK 1.8及以上版本

• Maven：用于项目依赖管理

• IDE：推荐使用IntelliJ IDEA

2. 前端环境

• Node.js：下载并安装Node.js（建议使用长期支持版本）

• Vue CLI：通过命令行安装 npm install -g @vue/cli

• IDE：推荐使用Visual Studio Code

二、创建Spring Boot后端项目

1. 使用Spring Initializr创建项目

访问 Spring Initializr，配置项目信息：

• Group：自定义包名，例如 com.example

• Artifact：项目名称，例如 spring-vue-demo

• Dependencies：勾选 Spring Web、Spring Data JPA、MySQL Driver（如果使用MySQL数据库）

下载生成的项目压缩包，解压后使用IDEA打开。

2. 配置数据库连接

在 src/main/resources/application.properties 文件中添加数据库配置：
spring.datasource.url=jdbc:mysql://localhost:3306/your_database_name?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
3. 创建实体类和Repository

创建一个实体类 User，例如：
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;

    // 省略getter和setter
}
创建对应的 UserRepository：
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {
}
4. 创建RESTful API
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/users")
public class UserController {

    @Autowired
    private UserRepository userRepository;

    @GetMapping
    public List<User> getAllUsers() {
        return userRepository.findAll();
    }

    @GetMapping("/{id}")
    public User getUserById(@PathVariable Long id) {
        return userRepository.findById(id).orElse(null);
    }

    @PostMapping
    public User createUser(@RequestBody User user) {
        return userRepository.save(user);
    }

    @PutMapping("/{id}")
    public User updateUser(@PathVariable Long id, @RequestBody User user) {
        if (userRepository.existsById(id)) {
            user.setId(id);
            return userRepository.save(user);
        }
        return null;
    }

    @DeleteMapping("/{id}")
    public void deleteUser(@PathVariable Long id) {
        userRepository.deleteById(id);
    }
}
三、创建Vue前端项目

1. 创建Vue项目

打开命令行，执行以下命令创建一个新的Vue项目：
vue create spring-vue-frontend
选择默认配置或自定义配置（推荐选择Babel、Router、Vuex等）。

2. 配置Axios进行HTTP请求

安装Axios：
npm install axios
在 src 目录下创建 http.js 文件，配置Axios：
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8080' // 后端API地址

export default axios
3. 创建组件和路由

在 src/components 目录下创建组件，例如 UserList.vue：
<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.username }}</li>
    </ul>
  </div>
</template>

<script>
import http from '../http'

export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    this.fetchUsers()
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await http.get('/users')
        this.users = response.data
      } catch (error) {
        console.error('获取用户列表失败', error)
      }
    }
  }
}
</script>
配置路由 src/router/index.js：
import Vue from 'vue'
import Router from 'vue-router'
import UserList from '../components/UserList.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'UserList',
      component: UserList
    }
  ]
})
4. 运行项目

后端：在IDEA中启动Spring Boot项目，默认端口为 8080。
前端：在项目根目录下执行 npm run serve，前端项目默认运行在 http://localhost:8081。

通过浏览器访问 http://localhost:8081，即可看到从后端获取并展示的数据。

四、前后端联调

1. 确保后端项目和前端项目都已启动。

2. 检查前端项目中Axios的 baseURL 是否与后端项目的地址和端口匹配。

3. 在浏览器中测试前端页面的功能，观察前后端数据交互是否正常。

通过以上步骤，你已经完成了一个简单的Spring Boot + Vue前后端分离项目的搭建与开发。后续可以根据实际需求，继续扩展项目功能，例如添加用户认证、文件上传等。