Java基础教程（303）Spring Cloud之编写UI：Spring Cloud UI架构全解析，从传统模板到前后端分离的微服务界面开发

如何构建高效且灵活的微服务UI层，Spring Cloud提供了多种解决方案。

Spring Cloud微服务架构中，UI层作为用户交互的入口，其设计直接影响系统体验和可维护性。与传统单体应用不同，微服务下的UI需要协调多个后端服务，并应对分布式环境的复杂性。

1 微服务中UI层的角色与架构选择

在Spring Cloud微服务体系中，UI层（或称Web层）并非简单的页面渲染工具，而是承担了服务组合、用户认证、请求转发等重要职责。一个设计良好的UI层能够有效提升系统整体性能和维护性。

微服务UI层主要有两种架构模式：

• 服务器端渲染架构：使用模板引擎（如Thymeleaf、Pebble）在服务端生成HTML页面，适合传统Web应用。
• 前后端分离架构：前端作为独立应用（如Vue.js、Angular），通过API与后端微服务交互，更适合现代复杂企业应用。

以下是两种架构的对比：

特性	服务器端渲染架构	前后端分离架构
页面渲染位置	服务器端	客户端浏览器
开发语言	Java+模板语法	JavaScript/TypeScript
性能特点	首屏加载快，SEO友好	后续交互流畅，服务器压力小
典型技术	Thymeleaf, Pebble	Vue.js, Angular, React
部署方式	与后端耦合或独立部署	完全独立部署（常通过Nginx）

2 服务器端渲染UI开发

2.1 模板引擎集成

Spring Boot支持多种模板引擎，只需简单配置即可使用。以Thymeleaf为例：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

配置文件示例（application.yml）：

pebble:
  prefix: /templates/
  suffix: .html

模板文件需放在src/main/resources/templates/目录下。

2.2 控制器与视图开发

控制器负责准备模型数据并选择视图：

@Controller
public class WeatherReportController {
    
    @Autowired
    private CityDataService cityDataService;
    
    @GetMapping("/rep