Vue + Spring Boot前後端分離

一、簡介

前後端分離是一種新的開發模式，它將前端和後端分離開發，從而實現了前後端的完全解耦。
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格式的數據。

下面是一個結合了前後端開發的例子：

#前端部分
{{ user.username }}
{{ user.password }}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/188791.html