Vue + Spring Boot前后端分离

发布时间：2023-05-17

一、简介

前后端分离是一种新的开发模式，它将前端和后端分离开发，从而实现了前后端的完全解耦。 Vue和Spring Boot是当前最受欢迎的前端和后端框架，结合使用可以让开发变得更加高效。 本文将介绍如何使用Vue和Spring Boot来进行前后端分离开发，包括前端和后端的搭建，前后端交互等内容。

二、前端部分

1、前端搭建

首先，我们需要安装Node.js和Vue CLI来创建Vue项目。在命令行中输入以下命令：

# 安装Node.js
sudo apt-get install curl  
sudo curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install nodejs
# 安装Vue CLI
npm install -g @vue/cli

接着，在命令行中输入以下命令来创建一个Vue项目：

vue create my-project

创建成功后进入项目目录:

cd my-project

2、前端交互

完成前端页面的开发后，需要与后端进行交互。我们可以使用Axios来进行Ajax请求。 下面是一个使用Axios进行GET请求的例子：

import axios from 'axios'
axios.get('/api/user')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

我们还可以使用POST方法来发送数据：

import axios from 'axios'
axios.post('/api/user', {
    username: 'example',
    password: '123456'
  })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

三、后端部分

1、后端搭建

Spring Boot提供了完整且强大的后端开发框架，可以轻松搭建REST API。 我们可以使用Spring Initializr来创建一个最基本的Spring Boot项目。 在开始之前请确保已经安装了Java和Maven。接着，打开浏览器访问 Spring Initializr。 选择项目类型为"Gradle Project"或"Maven Project"，填写相关信息后点击Generate按钮，即可下载一个未经修改的Spring Boot项目。 解压缩下载后的项目，并用你喜欢的IDE打开项目，就可以开始后端的开发了。

2、后端交互

在后端部分，我们需要使用Spring Boot提供的RestController来接收前端传递的数据。 比如接收前端发送的GET请求：

@RestController
@RequestMapping("/api")
public class UserController {
    @GetMapping("/user")
    public User getUser() {
        User user = new User();
        user.setUsername("example");
        user.setPassword("123456");
        return user;
    }
}

如果需要接收前端发送的POST请求：

@RestController
@RequestMapping("/api")
public class UserController {
    @PostMapping("/user")
    public void addUser(@RequestBody User user) {
        System.out.println(user.getUsername());
        System.out.println(user.getPassword());
    }
}

四、前后端整合

前后端都完成了开发，我们需要将它们整合起来。 简单的做法是将前端文件直接放到Spring Boot的src/main/resources/static目录下， 这样前端文件就可以被Spring Boot服务器直接访问了。 当然，更好的做法是将前后端分离开，前端通过Axios发送Ajax请求到后端的REST API， 而后端则直接返回JSON格式的数据。 下面是一个结合了前后端开发的例子：

#前端部分
 <template>
  <div class="container">
    <h1>{{ user.username }}</h1>
    <p>{{ user.password }}</p>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      user: {}
    }
  },
  created() {
    axios.get('/api/user')
      .then(response => {
        this.user = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>
#后端部分
@RestController
@RequestMapping("/api")
public class UserController {
    @GetMapping("/user")
    public User getUser() {
        User user = new User();
        user.setUsername("example");
        user.setPassword("123456");
        return user;
    }
}
#User实体类
public class User {
    private String username;
    private String password;
    //省略getter和setter方法
}

在上述例子中，前端通过GET请求访问后端的/api/user接口，后端返回了一个User实例的JSON数据。 然后前端将返回的数据渲染到界面上。

五、总结

Vue + Spring Boot前后端分离是一种新的开发模式，通过这种模式，不仅可以提升开发效率， 而且可以实现前后端的完全解耦。在开发中，需要注意前后端交互以及接口的规范化，这样可以让整个开发过程更加顺畅。

推荐文章