前后端不分离与前后端分离的Java Web开发对比介绍

在现代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通过fetch API向后端发起请求http://localhost:8080/api/hello。
Spring Boot接收请求：Spring Boot内置的Tomcat服务器接收请求。
请求解析和路由：Spring Boot使用DispatcherServlet将请求路由到对应的Controller。
Controller处理请求：HelloController中的sayHello方法被调用，处理请求并返回数据。
生成和返回响应：Spring Boot将Controller返回的数据封装成HTTP响应并返回给前端。
前端处理响应：Vue.js应用接收响应数据并更新视图，显示在页面上。