手把手教你如何搭建SpringBoot+Vue前后端分离
1. 准备工作
在开始搭建前，需要先安装并配置好以下软件：
- Java8及以上版本
- Node.js
- Vue CLI 4
- Git
2. 搭建后端环境
2.1. 创建SpringBoot项目
使用IntelliJ IDEA 或者其它集成开发环境，选择 Spring Initializr 创建一个新的 SpringBoot 项目。
2.2. 配置pom.xml文件
在SpringBoot项目的pom.xml文件中添加以下依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 引入Mybatis框架 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.0</version>
</dependency>
<!-- 引入MySQL驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.12</version>
</dependency>
<!-- 引入Swagger2文档 -->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.10.5</version>
</dependency>
<!-- 引入Swagger UI文档 -->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.10.5</version>
</dependency>
2.3. 创建数据库
创建一个名为 test 的数据库，并在其下创建一个名为 user 的表，其中包含 id、username 和 password 三个字段。
2.4. 编写配置文件
在 application.properties 配置文件中添加如下配置：
spring.datasource.url=jdbc:mysql://localhost:3306/test
spring.datasource.username=root
spring.datasource.password=123456
#MyBatis配置
mybatis.mapper-locations=classpath:mapper/*.xml
mybatis.type-aliases-package=com.example.demo.domain
#Swagger配置
swagger.path=/swagger-ui.html
swagger.enabled=true
2.5. 编写实体和Mapper接口
在 domain 文件夹中创建 User 类：
public class User {
private Integer id;
private String username;
private String password;
// 省略getter和setter方法
}
在 mapper 文件夹中创建 UserMapper 接口：
@Mapper
public interface UserMapper {
List<User> getAllUsers();
User getUserById(Integer id);
void insertUser(User user);
void updateUser(User user);
void deleteUser(Integer id);
}
2.6. 编写Controller类
在 controller 文件夹中创建 UserController 类：
@RestController
@RequestMapping("/api/v1")
public class UserController {
@Autowired
private UserMapper userMapper;
@ApiOperation(value = "获取所有用户信息", notes = "获取所有用户信息的API")
@GetMapping("/users")
public List<User> getAllUsers() {
return userMapper.getAllUsers();
}
@ApiOperation(value = "根据ID获取用户信息", notes = "根据ID获取用户信息的API")
@GetMapping("/users/{id}")
public User getUserById(@PathVariable Integer id) {
return userMapper.getUserById(id);
}
@ApiOperation(value = "添加新用户", notes = "添加新用户的API")
@PostMapping("/users")
public void insertUser(@RequestBody User user) {
userMapper.insertUser(user);
}
@ApiOperation(value = "修改用户信息", notes = "修改用户信息的API")
@PutMapping("/users")
public void updateUser(@RequestBody User user) {
userMapper.updateUser(user);
}
@ApiOperation(value = "删除指定用户", notes = "删除指定用户的API")
@DeleteMapping("/users/{id}")
public void deleteUser(@PathVariable Integer id) {
userMapper.deleteUser(id);
}
}
2.7. 运行项目
启动 SpringBoot 项目，通过浏览器访问 http://localhost:8080/swagger-ui.html 即可查看到接口文档，并测试接口的功能。
3. 搭建前端环境
3.1. 创建Vue项目
在终端中执行以下命令：
vue create vue-demo
3.2. 安装开发依赖
在项目根目录下执行以下命令安装依赖：
npm install --save axios
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
3.3. 配置环境
在 src 文件夹下创建 config.js 文件，配置如下：
const baseURL = 'http://localhost:8080/api/v1'
export {baseURL}
在 vue.config.js 文件中添加如下配置：
module.exports = {
devServer: {
port: 8081,
}
}
3.4. 编写Vue组件
在 components 文件夹下创建 dashboard.vue 文件，内容如下：
<template>
<div>
<el-button type="primary" @click="getUsers()">获取所有用户</el-button>
<el-button type="primary" @click="addUser()">添加新用户</el-button>
<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
<el-button @click="resetForm('form')">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="users" style="width: 100%">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="password" label="密码"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="editUser(scope.row)">编辑</el-button>
<el-button type="danger" @click="deleteUser(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import axios from 'axios'
import {baseURL} from "../config";
export default {
data() {
return {
users: [],
form: {
username: '',
password: ''
},
rules: {
username: [
{required: true, message: '请输入用户名', trigger: 'blur'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'}
]
}
}
},
methods: {
getUsers() {
axios.get(`${baseURL}/users`).then(response => {
this.users = response.data;
})
},
addUser() {
axios.post(`${baseURL}/users`, this.form).then(response => {
this.$message({
message: '添加成功',
type: 'success'
});
this.getUsers();
})
},
editUser(row) {
this.form = {...row};
},
deleteUser(row) {
axios.delete(`${baseURL}/users/${row.id}`).then(response => {
this.$message({
message: '删除成功',
type: 'success'
});
this.getUsers();
})
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.form.id == null) {
this.addUser();
} else {
this.updateUser();
}
}
})
},
updateUser() {
axios.put(`${baseURL}/users`, this.form).then(response => {
this.$message({
message: '修改成功',
type: 'success'
});
this.form.id = null;
this.form.username = '';
this.form.password = '';
this.getUsers();
})
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
mounted() {
this.getUsers();
}
}
</script>
<style scoped>
.el-button {
margin-right: 10px;
}
</style>
3.5. 运行项目
终端中执行以下命令启动前端项目：
npm run serve
通过浏览器访问 http://localhost:8081 即可查看到前端页面，并测试前后端接口的功能。
4. 示例
此处提供两个示例：
4.1. 获取所有用户
在浏览器中访问前端项目的首页，点击“获取所有用户”按钮，即可调用后端接口并显示出所有用户的信息。
4.2. 添加新用户
在前端项目的首页，填写要添加的用户的信息并点击“提交”按钮，即可调用后端接口添加新用户。
参考资料
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：手把手教你如何搭建SpringBoot+Vue前后端分离 - Python技术站
微信扫一扫 
支付宝扫一扫 