Spring Boot 视图层与模板引擎

Ne0inhk

— 17 min read
Spring Boot 视图层与模板引擎

Spring Boot 视图层与模板引擎

在这里插入图片描述
19.1 学习目标与重点提示

学习目标：掌握Spring Boot视图层与模板引擎的核心概念与使用方法，包括Spring Boot视图层的基本方法、Spring Boot与Thymeleaf的集成、Spring Boot与Freemarker的集成、Spring Boot与Velocity的集成、Spring Boot的静态资源管理、Spring Boot的实际应用场景，学会在实际开发中处理视图层问题。
重点：Spring Boot视图层的基本方法、Spring Boot与Thymeleaf的集成、Spring Boot与Freemarker的集成、Spring Boot与Velocity的集成、Spring Boot的静态资源管理、Spring Boot的实际应用场景。

19.2 Spring Boot视图层概述

Spring Boot视图层是指使用Spring Boot进行Web应用开发的方法。

19.2.1 视图层的定义

定义：视图层是指使用Spring Boot进行Web应用开发的方法。
作用：

  • 实现Web页面的渲染。
  • 实现数据的展示。
  • 实现用户交互。

✅ 结论：视图层是指使用Spring Boot进行Web应用开发的方法，作用是实现Web页面的渲染、数据的展示、用户交互。

19.2.2 视图层的常用组件

定义：视图层的常用组件是指Spring Boot提供的视图层组件。
组件：

  • Thymeleaf：用于Thymeleaf模板。
  • Freemarker：用于Freemarker模板。
  • Velocity：用于Velocity模板。

✅ 结论：视图层的常用组件包括Thymeleaf、Freemarker、Velocity。

19.3 Spring Boot与Thymeleaf的集成

Spring Boot与Thymeleaf的集成是最常用的视图层方法之一。

19.3.1 集成Thymeleaf的步骤

定义：集成Thymeleaf的步骤是指使用Spring Boot与Thymeleaf集成的方法。
步骤：

  1. 在pom.xml文件中添加Thymeleaf依赖。
  2. 在application.properties或application.yml文件中配置Thymeleaf。
  3. 创建实体类。
  4. 创建Repository接口。
  5. 创建控制器类。
  6. 创建Thymeleaf模板文件。
  7. 测试应用。

示例：
pom.xml文件中的Thymeleaf依赖：

<dependencies><!-- Web依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- Thymeleaf依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!-- Data JPA依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><!-- H2数据库依赖 --><dependency><groupId>com.h2database</groupId><artifactId>h2</artifactId><scope>runtime</scope></dependency><!-- 测试依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies>

application.properties文件中的Thymeleaf配置：

# 服务器端口 server.port=8080 # 数据库连接信息 spring.datasource.url=jdbc:h2:mem:testdb spring.datasource.driver-class-name=org.h2.Driver spring.datasource.username=sa spring.datasource.password=password # JPA配置 spring.jpa.hibernate.ddl-auto=update spring.jpa.show-sql=true # H2数据库控制台 spring.h2.console.enabled=true spring.h2.console.path=/h2-console # Thymeleaf配置 spring.thymeleaf.cache=false spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html

实体类：

importjavax.persistence.*;@Entity@Table(name ="product")publicclassProduct{@Id@GeneratedValue(strategy =GenerationType.IDENTITY)privateLong id;privateString productId;privateString productName;privatedouble price;privateint sales;publicProduct(){}publicProduct(String productId,String productName,double price,int sales){this.productId = productId;this.productName = productName;this.price = price;this.sales = sales;}// Getter和Setter方法publicLonggetId(){return id;}publicvoidsetId(Long id){this.id = id;}publicStringgetProductId(){return productId;}publicvoidsetProductId(String productId){this.productId = productId;}publicStringgetProductName(){return productName;}publicvoidsetProductName(String productName){this.productName = productName;}publicdoublegetPrice(){return price;}publicvoidsetPrice(double price){this.price = price;}publicintgetSales(){return sales;}publicvoidsetSales(int sales){this.sales = sales;}@OverridepublicStringtoString(){return"Product{"+"id="+ id +",+ productId +'\''+",+ productName +'\''+", price="+ price +", sales="+ sales +'}';}}

Repository接口：

importorg.springframework.data.jpa.repository.JpaRepository;importorg.springframework.stereotype.Repository;importjava.util.List;@RepositorypublicinterfaceProductRepositoryextendsJpaRepository<Product,Long>{List<Product>findBySalesGreaterThan(int sales);}

控制器类：

importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Controller;importorg.springframework.ui.Model;importorg.springframework.web.bind.annotation.*;importjava.util.List;@Controller@RequestMapping("/products")publicclassProductController{@AutowiredprivateProductRepository productRepository;@GetMapping("/")publicStringgetAllProducts(Model model){List<Product> products = productRepository.findAll(); model.addAttribute("products", products);return"products";}@PostMapping("/")publicStringaddProduct(@ModelAttributeProduct product){ productRepository.save(product);return"redirect:/products/";}@GetMapping("/top-selling")publicStringgetTopSellingProducts(@RequestParamint topN,Model model){List<Product> products = productRepository.findBySalesGreaterThan(0); products.sort((p1, p2)-> p2.getSales()- p1.getSales());if(products.size()> topN){ products = products.subList(0, topN);} model.addAttribute("products", products);return"products";}}

Thymeleaf模板文件（src/main/resources/templates/products.html）：

<!DOCTYPEhtml><htmlxmlns:th="http://www.thymeleaf.org"><head><metacharset="UTF-8"><title>产品列表</title><style>table{border-collapse: collapse;width: 100%;}th, td{border: 1px solid #ddd;padding: 8px;text-align: left;}th{background-color: #f2f2f2;}.add-product{margin-bottom: 20px;}</style></head><body><h1>产品列表</h1><divclass="add-product"><formth:action="@{/products/}"method="post"th:object="${product}"><label>产品ID：</label><inputtype="text"th:field="*{productId}"required><br><label>产品名称：</label><inputtype="text"th:field="*{productName}"required><br><label>价格：</label><inputtype="number"th:field="*{price}"step="0.01"required><br><label>销量：</label><inputtype="number"th:field="*{sales}"required><br><buttontype="submit">添加产品</button></form></div><div><formth:action="@{/products/top-selling}"method="get"><label>销量TOP：</label><inputtype="number"name="topN"value="3"min="1"required><buttontype="submit">查询</button></form></div><table><thead><tr><th>ID</th><th>产品ID</th><th>产品名称</th><th>价格</th><th>销量</th></tr></thead><tbody><trth:each="product : ${products}"><tdth:text="${product.id}"></td><tdth:text="${product.productId}"></td><tdth:text="${product.productName}"></td><tdth:text="${#numbers.formatDecimal(product.price, 0, 'COMMA', 2, 'POINT')}"></td><tdth:text="${product.sales}"></td></tr></tbody></table></body></html>

测试类：

importorg.junit.jupiter.api.Test;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.boot.test.context.SpringBootTest;importorg.springframework.boot.test.web.client.TestRestTemplate;importorg.springframework.boot.web.server.LocalServerPort;importstaticorg.assertj.core.api.Assertions.assertThat;@SpringBootTest(webEnvironment =SpringBootTest.WebEnvironment.RANDOM_PORT)classProductApplicationTests{@LocalServerPortprivateint port;@AutowiredprivateTestRestTemplate restTemplate;@TestvoidcontextLoads(){}@TestvoidtestHomePage(){String response = restTemplate.getForObject("http://localhost:"+ port +"/products/",String.class);assertThat(response).contains("产品列表");}}

✅ 结论：集成Thymeleaf的步骤包括添加Thymeleaf依赖、配置Thymeleaf、创建实体类、创建Repository接口、创建控制器类、创建Thymeleaf模板文件、测试应用。

19.4 Spring Boot与Freemarker的集成

Spring Boot与Freemarker的集成是常用的视图层方法之一。

19.4.1 集成Freemarker的步骤

定义：集成Freemarker的步骤是指使用Spring Boot与Freemarker集成的方法。
步骤：

  1. 在pom.xml文件中添加Freemarker依赖。
  2. 在application.properties或application.yml文件中配置Freemarker。
  3. 创建实体类。
  4. 创建Repository接口。
  5. 创建控制器类。
  6. 创建Freemarker模板文件。
  7. 测试应用。

示例：
pom.xml文件中的Freemarker依赖：

<dependencies><!-- Web依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- Freemarker依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId></dependency><!-- Data JPA依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><!-- H2数据库依赖 --><dependency><groupId>com.h2database</groupId><artifactId>h2</artifactId><scope>runtime</scope></dependency><!-- 测试依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies>

application.properties文件中的Freemarker配置：

# 服务器端口 server.port=8080 # 数据库连接信息 spring.datasource.url=jdbc:h2:mem:testdb spring.datasource.driver-class-name=org.h2.Driver spring.datasource.username=sa spring.datasource.password=password # JPA配置 spring.jpa.hibernate.ddl-auto=update spring.jpa.show-sql=true # H2数据库控制台 spring.h2.console.enabled=true spring.h2.console.path=/h2-console # Freemarker配置 spring.freemarker.cache=false spring.freemarker.prefix=classpath:/templates/ spring.freemarker.suffix=.ftl

实体类、Repository接口、控制器类与集成Thymeleaf的示例相同。

Freemarker模板文件（src/main/resources/templates/products.ftl）：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>产品列表</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .add-product { margin-bottom: 20px; } </style> </head> <body> <h1>产品列表</h1> <div> <form action="/products/" method="post"> <label>产品ID：</label> <input type="text" name="productId" required> <br> <label>产品名称：</label> <input type="text" name="productName" required> <br> <label>价格：</label> <input type="number" name="price" step="0.01" required> <br> <label>销量：</label> <input type="number" name="sales" required> <br> <button type="submit">添加产品</button> </form> </div> <div> <form action="/products/top-selling" method="get"> <label>销量TOP：</label> <input type="number" name="topN" value="3" min="1" required> <button type="submit">查询</button> </form> </div> <table> <thead> <tr> <th>ID</th> <th>产品ID</th> <th>产品名称</th> <th>价格</th> <th>销量</th> </tr> </thead> <tbody> <#list products as product> <tr> <td>${product.id}</td> <td>${product.productId}</td> <td>${product.productName}</td> <td>${product.price?string(",###.00")}</td> <td>${product.sales}</td> </tr> </#list> </tbody> </table> </body> </html>

测试类：

importorg.junit.jupiter.api.Test;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.boot.test.context.SpringBootTest;importorg.springframework.boot.test.web.client.TestRestTemplate;importorg.springframework.boot.web.server.LocalServerPort;importstaticorg.assertj.core.api.Assertions.assertThat;@SpringBootTest(webEnvironment =SpringBootTest.WebEnvironment.RANDOM_PORT)classProductApplicationTests{@LocalServerPortprivateint port;@AutowiredprivateTestRestTemplate restTemplate;@TestvoidcontextLoads(){}@TestvoidtestHomePage(){String response = restTemplate.getForObject("http://localhost:"+ port +"/products/",String.class);assertThat(response).contains("产品列表");}}

✅ 结论：集成Freemarker的步骤包括添加Freemarker依赖、配置Freemarker、创建实体类、创建Repository接口、创建控制器类、创建Freemarker模板文件、测试应用。

19.5 Spring Boot与Velocity的集成

Spring Boot与Velocity的集成是常用的视图层方法之一。

19.5.1 集成Velocity的步骤

定义：集成Velocity的步骤是指使用Spring Boot与Velocity集成的方法。
步骤：

  1. 在pom.xml文件中添加Velocity依赖。
  2. 在application.properties或application.yml文件中配置Velocity。
  3. 创建实体类。
  4. 创建Repository接口。
  5. 创建控制器类。
  6. 创建Velocity模板文件。
  7. 测试应用。

示例：
pom.xml文件中的Velocity依赖：

<dependencies><!-- Web依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- Velocity依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-velocity</artifactId><version>1.5.22.RELEASE</version></dependency><!-- Data JPA依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><!-- H2数据库依赖 --><dependency><groupId>com.h2database</groupId><artifactId>h2</artifactId><scope>runtime</scope></dependency><!-- 测试依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies>

application.properties文件中的Velocity配置：

# 服务器端口 server.port=8080 # 数据库连接信息 spring.datasource.url=jdbc:h2:mem:testdb spring.datasource.driver-class-name=org.h2.Driver spring.datasource.username=sa spring.datasource.password=password # JPA配置 spring.jpa.hibernate.ddl-auto=update spring.jpa.show-sql=true # H2数据库控制台 spring.h2.console.enabled=true spring.h2.console.path=/h2-console # Velocity配置 spring.velocity.cache=false spring.velocity.prefix=classpath:/templates/ spring.velocity.suffix=.vm

实体类、Repository接口、控制器类与集成Thymeleaf的示例相同。

Velocity模板文件（src/main/resources/templates/products.vm）：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>产品列表</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .add-product { margin-bottom: 20px; } </style> </head> <body> <h1>产品列表</h1> <div> <form action="/products/" method="post"> <label>产品ID：</label> <input type="text" name="productId" required> <br> <label>产品名称：</label> <input type="text" name="productName" required> <br> <label>价格：</label> <input type="number" name="price" step="0.01" required> <br> <label>销量：</label> <input type="number" name="sales" required> <br> <button type="submit">添加产品</button> </form> </div> <div> <form action="/products/top-selling" method="get"> <label>销量TOP：</label> <input type="number" name="topN" value="3" min="1" required> <button type="submit">查询</button> </form> </div> <table> <thead> <tr> <th>ID</th> <th>产品ID</th> <th>产品名称</th> <th>价格</th> <th>销量</th> </tr> </thead> <tbody> #foreach ($product in $products) <tr> <td>$product.id</td> <td>$product.productId</td> <td>$product.productName</td> <td>$product.price.format("###,###.00")</td> <td>$product.sales</td> </tr> #end </tbody> </table> </body> </html>

测试类：

importorg.junit.jupiter.api.Test;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.boot.test.context.SpringBootTest;importorg.springframework.boot.test.web.client.TestRestTemplate;importorg.springframework.boot.web.server.LocalServerPort;importstaticorg.assertj.core.api.Assertions.assertThat;@SpringBootTest(webEnvironment =SpringBootTest.WebEnvironment.RANDOM_PORT)classProductApplicationTests{@LocalServerPortprivateint port;@AutowiredprivateTestRestTemplate restTemplate;@TestvoidcontextLoads(){}@TestvoidtestHomePage(){String response = restTemplate.getForObject("http://localhost:"+ port +"/products/",String.class);assertThat(response).contains("产品列表");}}

✅ 结论：集成Velocity的步骤包括添加Velocity依赖、配置Velocity、创建实体类、创建Repository接口、创建控制器类、创建Velocity模板文件、测试应用。

19.6 Spring Boot的静态资源管理

Spring Boot的静态资源管理是视图层的重要组件。

19.6.1 静态资源管理的定义

定义：静态资源管理是指使用Spring Boot管理静态资源的方法。
作用：

  • 管理Web应用的静态资源，如CSS、JavaScript、图片等。
  • 提高开发效率。
  • 提供统一的编程模型。

常用静态资源目录：

  • src/main/resources/static：用于存放静态资源。
  • src/main/resources/public：用于存放静态资源。
  • src/main/resources/resources：用于存放静态资源。
  • src/main/resources/templates：用于存放模板文件。

示例：
创建静态资源文件（src/main/resources/static/css/style.css）：

body{font-family: Arial, sans-serif;margin: 0;padding: 0;}h1{color: #333;margin: 20px 0;}table{border-collapse: collapse;width: 100%;}th, td{border: 1px solid #ddd;padding: 8px;text-align: left;}th{background-color: #f2f2f2;}.add-product{margin-bottom: 20px;}

在Thymeleaf模板文件中引用静态资源：

<!DOCTYPEhtml><htmlxmlns:th="http://www.thymeleaf.org"><head><metacharset="UTF-8"><title>产品列表</title><linkrel="stylesheet"th:href="@{/css/style.css}"></head><body><h1>产品列表</h1><divclass="add-product"><formth:action="@{/products/}"method="post"th:object="${product}"><label>产品ID：</label><inputtype="text"th:field="*{productId}"required><br><label>产品名称：</label><inputtype="text"th:field="*{productName}"required><br><label>价格：</label><inputtype="number"th:field="*{price}"step="0.01"required><br><label>销量：</label><inputtype="number"th:field="*{sales}"required><br><buttontype="submit">添加产品</button></form></div><div><formth:action="@{/products/top-selling}"method="get"><label>销量TOP：</label><inputtype="number"name="topN"value="3"min="1"required><buttontype="submit">查询</button></form></div><table><thead><tr><th>ID</th><th>产品ID</th><th>产品名称</th><th>价格</th><th>销量</th></tr></thead><tbody><trth:each="product : ${products}"><tdth:text="${product.id}"></td><tdth:text="${product.productId}"></td><tdth:text="${product.productName}"></td><tdth:text="${#numbers.formatDecimal(product.price, 0, 'COMMA', 2, 'POINT')}"></td><tdth:text="${product.sales}"></td></tr></tbody></table></body></html>

✅ 结论：静态资源管理是指使用Spring Boot管理静态资源的方法，常用静态资源目录包括src/main/resources/static、src/main/resources/public、src/main/resources/resources、src/main/resources/templates。

19.7 Spring Boot的实际应用场景

在实际开发中，Spring Boot视图层与模板引擎的应用场景非常广泛，如：

  • 实现商品的展示与购买。
  • 实现订单的管理。
  • 实现用户的管理。
  • 实现博客的发布与管理。

示例：

importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.boot.SpringApplication;importorg.springframework.boot.autoconfigure.SpringBootApplication;importorg.springframework.data.jpa.repository.JpaRepository;importorg.springframework.stereotype.Repository;importorg.springframework.stereotype.Controller;importorg.springframework.ui.Model;importorg.springframework.web.bind.annotation.*;importjavax.persistence.*;importjava.util.List;// 产品类@Entity@Table(name ="product")publicclassProduct{@Id@GeneratedValue(strategy =GenerationType.IDENTITY)privateLong id;privateString productId;privateString productName;privatedouble price;privateint sales;publicProduct(){}publicProduct(String productId,String productName,double price,int sales){this.productId = productId;this.productName = productName;this.price = price;this.sales = sales;}// Getter和Setter方法publicLonggetId(){return id;}publicvoidsetId(Long id){this.id = id;}publicStringgetProductId(){return productId;}publicvoidsetProductId(String productId){this.productId = productId;}publicStringgetProductName(){return productName;}publicvoidsetProductName(String productName){this.productName = productName;}publicdoublegetPrice(){return price;}publicvoidsetPrice(double price){this.price = price;}publicintgetSales(){return sales;}publicvoidsetSales(int sales){this.sales = sales;}@OverridepublicStringtoString(){return"Product{"+"id="+ id +",+ productId +'\''+",+ productName +'\''+", price="+ price +", sales="+ sales +'}';}}// 产品Repository@RepositorypublicinterfaceProductRepositoryextendsJpaRepository<Product,Long>{List<Product>findBySalesGreaterThan(int sales);}// 产品控制器@Controller@RequestMapping("/products")publicclassProductController{@AutowiredprivateProductRepository productRepository;@GetMapping("/")publicStringgetAllProducts(Model model){List<Product> products = productRepository.findAll(); model.addAttribute("products", products); model.addAttribute("product",newProduct());return"products";}@PostMapping("/")publicStringaddProduct(@ModelAttributeProduct product){ productRepository.save(product);return"redirect:/products/";}@GetMapping("/top-selling")publicStringgetTopSellingProducts(@RequestParamint topN,Model model){List<Product> products = productRepository.findBySalesGreaterThan(0); products.sort((p1, p2)-> p2.getSales()- p1.getSales());if(products.size()> topN){ products = products.subList(0, topN);} model.addAttribute("products", products); model.addAttribute("product",newProduct());return"products";}}// 应用启动类@SpringBootApplicationpublicclassProductApplication{publicstaticvoidmain(String[] args){SpringApplication.run(ProductApplication.class, args);}@AutowiredprivateProductRepository productRepository;publicvoidrun(String... args){// 初始化数据 productRepository.save(newProduct("P001","手机",1000.0,100)); productRepository.save(newProduct("P002","电脑",5000.0,50)); productRepository.save(newProduct("P003","电视",3000.0,80)); productRepository.save(newProduct("P004","手表",500.0,200)); productRepository.save(newProduct("P005","耳机",300.0,150));}}// 测试类@SpringBootTest(webEnvironment =SpringBootTest.WebEnvironment.RANDOM_PORT)classProductApplicationTests{@LocalServerPortprivateint port;@AutowiredprivateTestRestTemplate restTemplate;@TestvoidcontextLoads(){}@TestvoidtestHomePage(){String response = restTemplate.getForObject("http://localhost:"+ port +"/products/",String.class);assertThat(response).contains("产品列表");}}

输出结果：

  • 访问http://localhost:8080/products/：显示产品列表页面。
  • 访问http://localhost:8080/products/top-selling?topN=3：显示销量TOP3的产品列表页面。

✅ 结论：在实际开发中，Spring Boot视图层与模板引擎的应用场景非常广泛，需要根据实际问题选择合适的模板引擎。

总结

本章我们学习了Spring Boot视图层与模板引擎，包括Spring Boot视图层的基本方法、Spring Boot与Thymeleaf的集成、Spring Boot与Freemarker的集成、Spring Boot与Velocity的集成、Spring Boot的静态资源管理、Spring Boot的实际应用场景，学会了在实际开发中处理视图层问题。其中，Spring Boot视图层的基本方法、Spring Boot与Thymeleaf的集成、Spring Boot与Freemarker的集成、Spring Boot与Velocity的集成、Spring Boot的静态资源管理、Spring Boot的实际应用场景是本章的重点内容。从下一章开始，我们将学习Spring Boot的其他组件、微服务等内容。

Read more

Spring Boot 3.x开发中CSP(内容安全策略)配置导致前端资源加载失败问题详解及解决方案

目录 * Spring Boot 3.x开发中CSP(内容安全策略)配置导致前端资源加载失败问题详解及解决方案 * 引言 * 1. 问题表现：CSP拦截的典型症状 * 2. 原因分析：CSP指令与Spring Boot配置 * 2.1 CSP指令概览 * 2.2 Spring Boot 3.x 中配置CSP的方式 * 2.3 常见的配置失误 * 3. 解决方案：从诊断到修复的完整步骤 * 3.1 步骤一：查看浏览器控制台错误 * 3.2 步骤二：整理资源来源清单 * 3.3 步骤三：调整CSP策略 * 3.3.1 允许外部域名 * 3.3.2

By Ne0inhk

OpenClaw Webhook 详解：完整指南

Webhook 是将 OpenClaw 从“聊天助手”快速转变为“响应式系统”的最佳方式。无需等待您主动发送消息，GitHub 可以在 PR 提交时通知 OpenClaw，Stripe 可以在支付失败时通知 OpenClaw，n8n 也可以按计划通知 OpenClaw。OpenClaw 会接收这些传入事件，并将其转换为代理运行或轻量级唤醒操作，然后将结果路由回您实际使用的任何渠道。 本文重点介绍 OpenClaw 网关上的 HTTP Webhook。OpenClaw 中还有另一种东西，在一些文档和配置中也被称为“钩子”。这些是网关内部的事件钩子，当本地生命周期事件触发时运行。它们也很有用，但 Stripe 或 GitHub 与服务器通信的方式并非通过它们。 如果您的 OpenClaw 实例是刚刚部署在 VPS 上，并且您仍然使用 SSH 进行基本操作，那么首先要确保网关稳定，

By Ne0inhk

Web 创建设计

下面为你整理一份系统全面、通俗易懂、适合初学者与进阶者的 《Web 创建与设计指南》（Web Creation & Design Guide）。 它覆盖从网站构思、设计、前端、后端、交互、发布到维护的完整流程。 如果你愿意，我还可以将它扩展成 PDF、PPT、Markdown 或课程体系。 🌐 Web 创建与设计指南 （Web Creation & Design Guide） 1. 什么是 Web 创建与设计？ Web 创建（Web Development）= 网站功能的开发（HTML/CSS/JS + 后端 + 数据库） Web 设计（Web Design）= 网站视觉与体验设计（UI/UX）

By Ne0inhk
前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践

前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践

🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志 🎐 个人CSND主页——Micro麦可乐的博客 🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程，入门到实战 🌺《RabbitMQ》专栏19年编写主要介绍使用JAVA开发RabbitMQ的系列教程，从基础知识到项目实战 🌸《设计模式》专栏以实际的生活场景为案例进行讲解，让大家对设计模式有一个更清晰的理解 🌛《开源项目》本专栏主要介绍目前热门的开源项目，带大家快速了解并轻松上手使用 🍎 《前端技术》专栏以实战为主介绍日常开发中前端应用的一些功能以及技巧，均附有完整的代码示例 ✨《开发技巧》本专栏包含了各种系统的设计原理以及注意事项，并分享一些日常开发的功能小技巧 💕《Jenkins实战》专栏主要介绍Jenkins+Docker的实战教程，让你快速掌握项目CI/CD，是2024年最新的实战教程 🌞《Spring Boot》专栏主要介绍我们日常工作项目中经常应用到的功能以及技巧，代码样例完整 👍《Spring Security》专栏中我们将逐步深入Spring Security的各个

By Ne0inhk