Vue3搭建MyBatisPlus轻松实现Spring Boot前后端分离

Android

2023-12-15 19:43:57

前后端分离：提高开发效率和代码质量的利器

什么是前后端分离？

前后端分离是一种软件开发架构，它将应用程序的前端（负责用户界面和交互）与后端（负责数据处理和业务逻辑）分开。这种分离允许前后端团队独立工作，从而提高开发效率和代码质量。

前后端分离的优势

提高开发效率： 前端和后端可以并行开发，缩短开发时间。
提高代码质量： 前端和后端可以分开测试和维护，确保代码的可靠性和可维护性。
提高可扩展性： 前端和后端可以独立扩展，使系统更具弹性和适应性。

使用Spring Boot + Vue3 + ElementPlus + Axios + MyBatisPlus 搭建前后端分离项目

以下是一个使用上述技术栈搭建前后端分离项目的逐步指南：

准备工作

安装Java JDK 8或更高版本
安装Maven或Gradle
安装Spring Boot CLI
安装Node.js
安装Vue CLI
安装Element Plus

创建Spring Boot项目

spring init spring-boot-vue3

创建Vue项目

vue create vue-app

集成Spring Boot和Vue项目

在Spring Boot项目中添加对Vue项目的依赖：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
  <groupId>com.google.guava</groupId>
  <artifactId>guava</artifactId>
  <version>31.1-jre</version>
</dependency>
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.13.3</version>
</dependency>

在Vue项目中添加对Spring Boot项目的依赖：

{
  "proxyTable": {
    "/api": {
      "target": "http://localhost:8080",
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  }
}

启动项目

Spring Boot项目：

mvn spring-boot:run

Vue项目：

npm run serve

实现增删改查功能

Spring Boot端： 定义一个处理API请求的Controller类。

Vue端： 定义一个用于显示数据的Vue组件。

代码示例：

@RestController
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping("/users")
    public User createUser(@RequestBody User user) {
        return userService.createUser(user);
    }

    // 其余API方法...
}

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get("/api/users").then(response => {
        this.users = response.data;
      });
    }
  }
};
</script>