在現代Web開發中，前后端架構設計有兩種主要模式：前后端不分離和前后端分離。本文將詳細介紹這兩種模式，展示如何使用Spring Boot開發應用，并提供可運行的示例代碼。
前后端不分離的Java Web開發
在前后端不分離的架構中，前端頁面與后端代碼緊密耦合在一起，通常使用模板引擎在服務器端生成HTML頁面并返回給客戶端。
項目結構
springboot-thymeleaf
├── src
│ └── main
│ ├── java
│ │ └── com
│ │ └── example
│ │ └── DemoApplication.java
│ │ └── HelloController.java
│ └── resources
│ ├── templates
│ │ └── hello.html
│ └── application.yml
代碼和配置
DemoApplication.java:
package com.example;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class DemoApplication {public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);}
}
HelloController.java:
package com.example;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;@Controller
public class HelloController {@GetMapping("/hello")public String sayHello(Model model) {model.addAttribute("message", "Hello, World!");return "hello";}
}
hello.html:
<!DOCTYPE html>
<html>
<head><title>Hello</title>
</head>
<body><h1 th:text="${message}"></h1>
</body>
</html>
application.yml:
server:port: 8080
spring:thymeleaf:cache: false
部署和運行
-
將Spring Boot應用打包成JAR文件：
mvn clean package -
在命令行中運行：
java -jar target/springboot-thymeleaf-0.0.1-SNAPSHOT.jar -
在瀏覽器中訪問
http://localhost:8080/hello，你應該會看到“Hello, World!”。
請求處理流程
- 客戶端請求：用戶在瀏覽器中輸入URL，例如
http://localhost:8080/hello，瀏覽器發送HTTP請求到服務器。 - Spring Boot接收請求：Spring Boot內置的Tomcat服務器接收請求。
- 請求解析和路由：Spring Boot使用
DispatcherServlet作為前端控制器，將請求路由到對應的Controller。 - Controller處理請求：
HelloController中的sayHello方法被調用，處理請求并返回視圖名稱hello。 - 視圖解析和渲染：Spring Boot使用Thymeleaf模板引擎解析
hello.html模板，將數據模型中的message屬性替換為實際值。 - 生成和返回響應：生成的HTML頁面作為HTTP響應返回給客戶端。
- 客戶端顯示響應：瀏覽器接收響應并渲染HTML內容，顯示給用戶。
前后端分離的Java Web開發
在前后端分離的架構中，前端和后端是獨立開發和部署的。前端通過API調用與后端進行數據交互。前端通常使用現代JavaScript框架（如Vue.js），后端使用Spring Boot提供RESTful API。
項目結構
springboot-vue
├── backend
│ ├── src
│ │ └── main
│ │ ├── java
│ │ │ └── com
│ │ │ └── example
│ │ │ └── DemoApplication.java
│ │ │ └── HelloController.java
│ │ └── resources
│ │ └── application.yml
└── frontend├── public│ └── index.html└── src├── App.vue├── main.js└── components└── HelloWorld.vue
后端代碼和配置
DemoApplication.java:
package com.example;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class DemoApplication {public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);}
}
HelloController.java:
package com.example;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
public class HelloController {@GetMapping("/api/hello")public String sayHello() {return "Hello, World!";}
}
application.yml:
server:port: 8080
前端代碼和配置
index.html:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue App</title>
</head>
<body><div id="app"></div><script src="/dist/build.js"></script>
</body>
</html>
App.vue:
<template><div id="app"><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script>
main.js:
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
HelloWorld.vue:
<template><div><h1>{{ msg }}</h1><button @click="fetchMessage">Fetch Message</button><p>{{ message }}</p></div>
</template><script>
export default {props: {msg: String},data() {return {message: ''}},methods: {fetchMessage() {fetch('/api/hello').then(response => response.text()).then(data => {this.message = data;});}}
}
</script>
部署和運行
后端
-
將Spring Boot應用打包成JAR文件：
mvn clean package -
在命令行中運行：
java -jar backend/target/springboot-vue-0.0.1-SNAPSHOT.jar
前端
-
在frontend目錄中安裝依賴：
npm install -
啟動開發服務器：
npm run serve -
在瀏覽器中訪問
http://localhost:8081，你應該會看到Vue.js應用，點擊按鈕后顯示從后端獲取的數據。
請求處理流程
- 客戶端請求：用戶在瀏覽器中輸入URL，例如
http://localhost:8081，瀏覽器加載Vue.js應用。 - 前端發起API請求：用戶在Vue.js應用中點擊按鈕，Vue.js通過
fetchAPI向后端發起請求http://localhost:8080/api/hello。 - Spring Boot接收請求：Spring Boot內置的Tomcat服務器接收請求。
- 請求解析和路由：Spring Boot使用
DispatcherServlet將請求路由到對應的Controller。 - Controller處理請求：
HelloController中的sayHello方法被調用，處理請求并返回數據。 - 生成和返回響應：Spring Boot將Controller返回的數據封裝成HTTP響應并返回給前端。
- 前端處理響應：Vue.js應用接收響應數據并更新視圖，顯示在頁面上。
現代開發框架的簡化
傳統Java Web開發 vs. 前后端分離開發
- 傳統Java Web開發：前端頁面和后端代碼緊密耦合，通過模板引擎生成HTML頁面。
- 前后端分離開發：前端和后端獨立開發和部署，前端通過API與后端交互，前端通常使用現代JavaScript框架如Vue.js，后端使用Spring Boot提供RESTful API。
總結
無論是前后端不分離還是前后端分離，最終目標都是
提供高效、可靠的Web服務。前后端分離架構使得開發更靈活，前后端團隊可以獨立工作，提升開發效率和代碼維護性。通過示例代碼和詳細解釋，希望能幫助你更好地理解這兩種架構模式及其實現方式。如果你有更多的問題或需要更詳細的講解，歡迎留言討論！
JobSystem+Burst+批處理)
