Spring Boot+Vue 前后端分離是一種非常流行且高效的開發模式，以下是關于其相關方面的詳細介紹：
前端（Vue）部分
? 項目搭建
? 使用 Vue CLI 創建項目，它提供了豐富的插件和配置選項，能夠快速生成項目基礎結構。例如，執行`vue create my-vue-app`命令，根據提示選擇需要的特性，如 Babel、ESLint 等，即可創建一個 Vue 項目。
? 項目目錄結構清晰，`src`目錄下包含`components`（組件）、`views`（頁面視圖）、`router`（路由配置）、`store`（狀態管理）、`assets`（靜態資源）等子目錄，方便進行模塊化開發。
? 頁面開發
? 組件化開發：將頁面拆分成多個獨立的組件，每個組件負責特定的功能和樣式。例如，一個商品列表頁面可以拆分成商品列表組件、商品詳情組件、分頁組件等。通過在父組件中引入并使用子組件，實現頁面的組裝。組件之間可以通過 props 傳遞數據，也可以通過事件進行通信。
? 路由管理：利用 Vue Router 實現頁面的跳轉和管理。在`router/index.js`文件中定義路由規則，將不同的 URL 路徑映射到對應的組件。例如：
? ```javascript
? ? const routes = [
? ? ? {
? ? ? ? path: '/',
? ? ? ? name: 'Home',
? ? ? ? component: Home
? ? ? },
? ? ? {
? ? ? ? path: '/about',
? ? ? ? name: 'About',
? ? ? ? component: () => import('../views/About.vue')
? ? ? }
? ? ]
? ? ```
? 狀態管理：對于復雜的應用，使用 Vuex 進行狀態管理。Vuex 通過定義全局的狀態存儲，使得組件之間能夠方便地共享狀態。例如，一個購物車應用中，購物車商品列表的狀態可以存儲在 Vuex 中，多個組件通過調用 Vuex 的 action 和 mutation 來更新購物車狀態，通過 getters 獲取購物車狀態。
?
? 與后端交互
?
? 使用 axios 庫發送 HTTP 請求與后端進行數據交互。在項目中安裝 axios，然后創建一個請求實例，配置請求的 baseURL、headers 等參數。例如：
?
? ```javascript
? ? import axios from 'axios'
? ? const instance = axios.create({
? ? ? baseURL: 'http://localhost:8080', // 后端接口地址
? ? ? timeout: 10000,
? ? ? headers: {'X-Custom-Header': 'foobar'}
? ? })
? ? ```
? 在組件中調用 axios 實例發送請求獲取數據。例如，獲取用戶列表數據：
? ```javascript
? ? instance.get('/users').then(response => {
? ? ? this.users = response.data
? ? }).catch(error => {
? ? ? console.error(error)
? ? })
? ? ```
?
?
? 對于登錄等操作，發送請求將用戶名和密碼等信息發送給后端，后端返回 token 等認證信息，前端將其存儲在本地存儲（如 localStorage）中，后續請求攜帶 token 進行認證。
?
?
后端（Spring Boot）部分
?
?
? 項目搭建
?
? 使用 Spring Initializr（Spring Boot 項目。選擇項目的基本信息，如 Group（包名）、Artifact（項目名）、Java 版本等，同時添加所需的依賴，如 Spring Web、Spring Data JPA、MyBatis 等，然后生成項目壓縮包并解壓到本地。
? 項目結構清晰，`src/main/java`下是 Java 代碼目錄，包含 controller、service、dao、entity 等包；`src/main/resources`下包含配置文件，如`application.properties`或`application.yml`，用于配置數據庫連接、服務器端口等信息。
?
? 接口開發
?
? Controller 層：定義 RESTful 風格的接口，通過`@RestController`注解標記控制器類，使用`@RequestMapping`、`@GetMapping`、`@PostMapping`等注解定義接口路徑和請求方法。例如：
?
? ```java
? ? @RestController
? ? @RequestMapping("/users")
? ? public class UserController {
?
? ? ? ? @GetMapping
? ? ? ? public List<User> getAllUsers() {
? ? ? ? ? ? // 調用 Service 層方法獲取用戶列表
? ? ? ? ? ? return userService.findAll();
? ? ? ? }
?
? ? ? ? @PostMapping
? ? ? ? public User addUser(@RequestBody User user) {
? ? ? ? ? ? // 調用 Service 層方法添加用戶
? ? ? ? ? ? return userService.save(user);
? ? ? ? }
? ? }
? ? ```
?
?
? Service 層：負責業務邏輯處理。在該層中調用 Dao 層的方法進行數據操作，并對數據進行處理和封裝。例如，對用戶信息進行加密處理、驗證用戶輸入數據的合法性等。
?
? Dao 層：與數據庫進行交互。可以使用 Spring Data JPA 或 MyBatis 等技術。以 Spring Data JPA 為例，定義一個繼承自`JpaRepository`的接口，即可實現基本的增刪改查操作。例如：
?
? ```java
? ? public interface UserRepository extends JpaRepository<User, Long> {
? ? ? ? // 可以在這里定義一些自定義的查詢方法
? ? ? ? List<User> findByUsername(String username);
? ? }
? ? ```
?
?
? 數據交互
?
? 接收前端發送的請求數據，如 JSON 格式的請求體，Spring Boot 會自動將其轉換為對應的 Java 對象。例如，前端發送一個包含用戶信息的 JSON 對象，后端的`@RequestBody User user`參數會自動接收并轉換。
?
? 將處理后的數據以 JSON 格式返回給前端。Spring Boot 默認使用 Jackson 庫進行對象與 JSON 的轉換，通過在實體類中使用注解如`@JsonProperty`、`@JsonIgnore`等，可以控制 JSON 的序列化和反序列化過程。
?
?
前后端交互與部署
?
?
? 開發階段交互
?
? 跨域問題：由于前后端端口不同，默認情況下瀏覽器會阻止跨域請求。可以在 Spring Boot 后端項目中配置跨域資源共享（CORS），允許前端項目訪問后端接口。例如，在全局配置類中添加 CORS 配置：
?
? ```java
? ? @Configuration
? ? public class GlobalCorsConfig {
? ? ? ? @Bean
? ? ? ? public WebMvcConfigurer corsConfigurer() {
? ? ? ? ? ? return new WebMvcConfigurer() {
? ? ? ? ? ? ? ? @Override
? ? ? ? ? ? ? ? public void addCorsMappings(CorsRegistry registry) {
? ? ? ? ? ? ? ? ? ? registry.addMapping("/**") // 允許跨域訪問的路徑
? ? ? ? ? ? ? ? ? ? ? ? ? ? .allowedOrigins("http://localhost:8081") // 允許跨域訪問的前端域名和端口
? ? ? ? ? ? ? ? ? ? ? ? ? ? .allowedMethods("GET", "POST", "PUT", "DELETE") // 允許的請求方法
? ? ? ? ? ? ? ? ? ? ? ? ? ? .allowedHeaders("*") // 允許的請求頭
? ? ? ? ? ? ? ? ? ? ? ? ? ? .allowCredentials(true); // 允許攜帶 cookie
? ? ? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? }
? ? }
? ? ```
?
?
? 接口調試：前后端開發人員可以通過 Postman 等工具直接調用后端接口進行測試，也可以在前端項目中使用 axios 發送請求調試接口。同時，后端可以通過日志輸出等方式查看請求參數、響應數據等信息，以便定位問題。
?
? 部署階段
?
? 前端部署：將 Vue 項目構建生成的`dist`目錄（包含靜態資源文件）部署到服務器的靜態資源目錄下，如 Nginx 的`html`目錄。配置 Nginx 服務器，設置靜態資源的訪問路徑和路由轉發規則。例如：
?
? ```nginx
? ? server {
? ? ? ? listen 80;
? ? ? ? server_name example.com;
?
? ? ? ? location / {
? ? ? ? ? ? root /usr/share/nginx/html;
? ? ? ? ? ? try_files $uri $uri/ /index.html;
? ? ? ? }
? ? }
? ? ```
?
?
? 后端部署：將 Spring Boot 項目打包成 jar 包，上傳到服務器，通過命令`java -jar app.jar`啟動應用。可以使用 Docker 容器進行部署，編寫 Dockerfile 構建鏡像，然后運行容器。同時，配置數據庫連接信息、服務器端口等參數，確保后端應用能夠正常運行并提供接口服務。
?
? 前后端整合：確保前端頁面能夠正確訪問后端接口，可以通過配置前端項目的代理規則，在開發階段將請求代理到后端服務器。在生產環境中，通過 Nginx 等反向代理服務器將前端頁面請求和后端接口請求分別轉發到對應的服務器和端口，實現前后端的整合部署。
?
這種前后端分離的開發模式使得前后端可以獨立開發、獨立部署，提高了開發效率和項目的可維護性。同時，前后端通過定義好的接口進行交互，使得項目的擴展性和靈活性更強。
)
)
