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

poisonpeng

5080人浏览 · 2024-06-07 00:00:00

poisonpeng · 2024-06-07 00:00:00 发布

在现代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 = false

new 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应用接收响应数据并更新视图，显示在页面上。

现代开发框架的简化

传统Java Web开发 vs. 前后端分离开发

传统Java Web开发：前端页面和后端代码紧密耦合，通过模板引擎生成HTML页面。
前后端分离开发：前端和后端独立开发和部署，前端通过API与后端交互，前端通常使用现代JavaScript框架如Vue.js，后端使用Spring Boot提供RESTful API。

总结

无论是前后端不分离还是前后端分离，最终目标都是

提供高效、可靠的Web服务。前后端分离架构使得开发更灵活，前后端团队可以独立工作，提升开发效率和代码维护性。通过示例代码和详细解释，希望能帮助你更好地理解这两种架构模式及其实现方式。如果你有更多的问题或需要更详细的讲解，欢迎留言讨论！

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模