从零基础开始实现一个Spring Boot + Vue 项目的详细步骤指南
一、准备工作
1. 开发环境搭建
- 安装 JDK（Java Development Kit）：前往 Oracle 官网（https://www.oracle.com/java/technologies/javase-jdk11-downloads.html ，以 JDK 11 为例）下载适合你操作系统的 JDK 安装包，按照安装向导完成安装。安装完成后，配置系统环境变量，确保在命令行中能通过
java -version命令查看到正确的 Java 版本信息。 - 安装 IDE（集成开发环境）：推荐使用 IntelliJ IDEA（https://www.jetbrains.com/idea/download/ ）或 Eclipse（https://www.eclipse.org/downloads/ ）。下载并安装对应版本，在 IDE 中配置好 JDK 路径。
- 安装 Node.js 和 npm（Node Package Manager）：前往 Node.js 官网（https://nodejs.org/en/download ）下载对应操作系统的安装包进行安装。安装完成后，在命令行中输入
node -v和npm -v分别查看 Node.js 和 npm 的版本信息，确保安装成功。
2. 创建项目基础结构
- 新建一个项目根目录，比如命名为
my-project，在该目录下分别创建用于存放后端（Spring Boot）代码的子目录和前端（Vue）代码的子目录，例如backend和frontend。
二、Spring Boot 后端项目开发
1. 初始化 Spring Boot 项目
- 打开 IDE，选择创建新项目，在项目创建向导中选择 Spring Initializr（不同 IDE 入口位置稍有不同）。
- 在 Spring Initializr 的配置页面，填写项目基本信息，如项目的坐标（Group 和 Artifact）、选择构建工具（推荐 Maven 或 Gradle，这里以 Maven 为例）、Java 版本等。
- 添加项目依赖，至少要添加
Spring Web依赖，以便支持构建 Web 应用。如果后续需要连接数据库、使用安全认证等功能，可以按需添加如Spring Data JPA、Spring Security等相关依赖。完成配置后点击生成项目，然后将生成的项目导入到 IDE 中，此时项目结构会出现在 IDE 的工作区中。
2. 配置数据库（若项目需要）
- 如果项目需要与数据库交互，以 MySQL 数据库为例，首先确保 MySQL 数据库已经安装并启动。
- 在
backend项目目录下的src/main/resources目录中，找到application.properties（或者也可以使用application.yml，格式稍有不同但功能一样）配置文件，添加如下数据库连接配置内容：
spring.datasource.url=jdbc:mysql://localhost:3306/your_database_name
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
将上述配置中的 your_database_name、your_username、your_password 替换为你实际使用的数据库名、用户名和密码。
3. 编写业务逻辑代码
- 创建实体类（Entity）：在
src/main/java目录下按照业务模块创建对应的包结构，比如com.example.myproject.entity，在该包下创建实体类，用于映射数据库表结构。例如创建一个User实体类代表用户信息：
package com.example.myproject.entity;
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 方法
public User() {
}
public User(String username, String password) {
this.username = username;
this.password = password;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
- 创建数据访问层（Repository）接口：在
src/main/java/com/example/myproject/repository包下创建接口，继承Spring Data JPA的JpaRepository接口来操作实体类。例如对于User实体创建UserRepository接口：
package com.example.myproject.repository;
import com.example.myproject.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository<User, Long> {
}
- 创建服务层（Service）类：在
src/main/java/com/example/myproject/service包下创建服务类，用于编写业务逻辑代码，调用Repository层接口方法实现具体功能。例如创建UserService类：
package com.example.myproject.service;
import com.example.myproject.entity.User;
import com.example.myproject.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserService {
@Autowired
private UserRepository userRepository;
public List<User> getUsers() {
return userRepository.findAll();
}
public User saveUser(User user) {
return userRepository.save(user);
}
}
- 创建控制器（Controller）类：在
src/main/java/com/example/myproject/controller包下创建控制器类，用于接收前端发送的 HTTP 请求，并调用服务层方法处理请求，返回相应的结果。例如创建UserController类：
package com.example.myproject.controller;
import com.example.myproject.entity.User;
import com.example.myproject.service.UserService;
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 UserService userService;
@GetMapping
public List<User> getUsers() {
return userService.getUsers();
}
@PostMapping
public User saveUser(@RequestBody User user) {
return userService.saveUser(user);
}
}
4. 运行 Spring Boot 项目
- 在 IDE 中找到项目的启动类（通常带有
@SpringBootApplication注解的类），右键点击选择Run（或者使用快捷键等方式）来启动 Spring Boot 项目。启动成功后，可以通过浏览器访问项目的接口进行测试，比如访问http://localhost:8080/users（默认端口是 8080，如果在配置文件中修改了端口则使用修改后的端口号）查看是否能获取到数据（如果已经有数据的话）。
三、Vue 前端项目开发
1. 创建 Vue 项目
- 打开命令行，进入之前创建的
frontend目录，运行命令vue create my-vue-app（my-vue-app是前端项目名称，可以自行修改）来创建 Vue 项目。在创建过程中，会提示选择一些项目配置，例如选择默认预设（包含 Babel 和 ESLint 等基础配置）或者手动选择添加其他插件（如 Vue Router、Vuex 等，根据项目需求决定）。创建完成后，进入新创建的my-vue-app目录，通过命令npm run serve启动 Vue 项目的开发服务器，此时可以在浏览器中访问http://localhost:8081（默认端口是 8081，若有冲突会提示修改）看到 Vue 项目的初始页面。
2. 搭建项目页面结构和组件
- 在
src目录下，App.vue是整个 Vue 应用的根组件，可以对其进行修改来定义整体的页面布局。例如：
<template>
<div id="app">
<header>
<h1>My Spring Boot + Vue Projecth1>
header>
<main>
<router-view>router-view>
main>
<footer>
© {{ new Date().getFullYear() }}
footer>
div>
template>
<script>
export default {
name: "App"
};
script>
<style>
#app {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
header {
background-color: #333;
color: white;
padding: 20px;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
padding: 10px;
}
style>
- 在
src/components目录下创建各个功能对应的组件，比如创建一个UserList.vue组件用于展示用户列表信息：
<template>
<div>
<h2>User Listh2>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.username }}
li>
ul>
div>
template>
<script>
export default {
data() {
return {
users: []
};
}
};
script>
<style scoped>
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
style>
3. 实现与后端交互
- 首先安装
axios（一个常用的用于发送 HTTP 请求的 JavaScript 库），在命令行中进入frontend项目目录（即my-vue-app目录），运行命令npm install axios。 - 在组件中使用
axios来调用后端接口获取数据或提交数据等操作。例如在UserList.vue组件中添加方法来获取用户列表数据：
<template>
<div>
<h2>User Listh2>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.username }}
li>
ul>
div>
template>
<script>
import axios from "axios";
export default {
data() {
return {
users: []
};
},
mounted() {
this.fetchUsers();
},
methods: {
fetchUsers() {
axios.get("http://localhost:8080/users")
.then((response) => {
this.users = response.data;
})
.catch((error) => {
console.error(error);
});
}
}
};
script>
<style scoped>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
}
style>
这里在组件的 mounted 生命周期钩子中调用 fetchUsers 方法，通过 axios 发送 GET 请求到后端的 http://localhost:8080/users 接口获取用户列表数据，并在获取成功后将数据赋值给组件的 users 数据属性，进而在页面上展示出来。
4. 构建前端项目
- 当前端项目开发完成后，在命令行进入
frontend项目目录，运行命令npm run build，这个命令会将 Vue 项目打包生成一系列静态文件，存放在dist目录下，包括index.html、js文件、css文件等，这些文件可以部署到 Web 服务器上供用户访问。
四、项目部署（可选，根据实际需求）
1. 前后端分离部署
- 部署后端项目：将 Spring Boot 项目打包成可执行的 JAR 文件（在 IDE 中使用对应的打包功能或者在命令行中进入
backend项目目录，运行mvn package命令，对于 Maven 项目），然后将生成的 JAR 文件部署到服务器上，通过命令java -jar your_project.jar（your_project.jar为实际的 JAR 文件名）启动后端服务。 - 部署前端项目：将 Vue 项目构建生成的
dist目录下的静态文件部署到如 Nginx 等 Web 服务器上，配置 Nginx 的反向代理规则，将前端页面发起的 API 请求代理到后端 Spring Boot 项目的接口地址上，例如配置如下的 Nginx 反向代理规则（在 Nginx 配置文件中添加）：
server {
listen 80;
server_name your_domain_name;
location / {
root /path/to/your/vue/dist;
index index.html index.htm;
}
location /api {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
将上述配置中的 your_domain_name 替换为实际的域名，/path/to/your/vue/dist 替换为 Vue 项目 dist 目录在服务器上的实际路径。
2. 一体化部署
- 将 Vue 项目构建生成的
dist目录下的静态文件复制到 Spring Boot 项目的src/main/resources/static目录下，然后重新打包 Spring Boot 项目并部署到服务器上启动，这样 Spring Boot 应用启动时会自动提供这些前端静态文件服务，前端页面发起的请求也能直接与后端接口交互，实现一体化部署。