创建一个简单的Spring Boot + Vue前后端分离项目
在现代Web开发中，前后端分离是一种流行的架构方式。它将前端的用户界面与后端的业务逻辑分别开发，提高了开发、测试和维护的效率。本文将引导你创建一个简单的Spring Boot + Vue前后端分离项目。
一、环境准备
在开始之前，请确保你已经安装了以下环境：
- Java JDK 8+
- Node.js 和 npm
- Maven
- IDE（如IntelliJ IDEA或Eclipse）
二、创建Spring Boot项目
- 使用Spring Initializr
打开Spring Initializr，选择如下配置：
- Project: Maven Project
- Language: Java
- Spring Boot: 选最新版本
- Group: com.example
- Artifact: myapp
- Dependencies: Spring Web, Spring Data JPA, H2 Database
点击“Generate”，下载生成的项目包，并解压后导入IDE。
- 编写后端代码
在com.example.myapp包下创建一个控制器UserController，代码如下：
package com.example.myapp.controller;
import com.example.myapp.model.User;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Arrays;
import java.util.List;
@RestController
public class UserController {
@GetMapping("/api/users")
public List<User> getUsers() {
return Arrays.asList(
new User(1, "张三"),
new User(2, "李四")
);
}
}
然后在model包下创建一个User类：
package com.example.myapp.model;
public class User {
private int id;
private String name;
public User(int id, String name) {
this.id = id;
this.name = name;
}
// getters 和 setters
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
- 启动应用
在IDE中运行MyappApplication类，启动Spring Boot服务，默认地址为http://localhost:8080。
三、创建Vue前端项目
- 创建Vue项目
打开终端，使用Vue CLI创建新的Vue项目：
vue create my-vue-app
在项目选项中选择默认配置。创建完成后，进入项目目录：
cd my-vue-app
- 安装Axios
为了与后端进行HTTP请求，需要安装Axios：
npm install axios
- 编写前端代码
在src目录下，编辑App.vue，添加以下内容：
<template>
<div id="app">
<h1>用户列表</h1>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
users: []
};
},
created() {
this.fetchUsers();
},
methods: {
fetchUsers() {
axios.get('http://localhost:8080/api/users')
.then(response => {
this.users = response.data;
});
}
}
};
</script>
四、运行Vue项目
在终端中进入my-vue-app目录，并运行以下命令启动Vue应用：
npm run serve
默认地址为http://localhost:8081。
五、访问应用
打开浏览器，访问http://localhost:8081，你将看到用户列表，数据来自于Spring Boot后端API。
总结
通过以上步骤，我们创建了一个简单的Spring Boot + Vue前后端分离项目。后端使用Spring Boot提供RESTful API，前端使用Vue进行用户界面展示。这个项目是一个很好的起点，之后你可以在此基础上扩展更多功能，比如用户注册、登录等。
这种前后端分离的架构使得开发更灵活，前后端的团队可以并行工作，提高了开发效率。同时，后端服务还可以为其他前端应用（如移动端）提供API，真正实现互联互通。希望你能在此项目的基础上不断进步和拓展！
