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

鸿蒙APP开发从入门到精通：鸿蒙电商购物车全栈项目——订单管理、支付管理、AI原生

鸿蒙APP开发从入门到精通：鸿蒙电商购物车全栈项目——订单管理、支付管理、AI原生

《鸿蒙APP开发从入门到精通》第14篇：鸿蒙电商购物车全栈项目——订单管理、支付管理、AI原生 📱💳🤖 内容承接与核心价值 这是《鸿蒙APP开发从入门到精通》的第14篇——订单管理、支付管理、AI原生篇，100%承接第13篇的「用户管理、商品列表、购物车」项目架构，完成鸿蒙电商购物车全栈项目的核心业务功能实现。 学习目标： * 掌握订单管理的设计与实现； * 实现创建订单、查看订单、取消订单； * 理解支付管理的设计与实现； * 实现微信支付、支付宝支付； * 掌握AI原生的设计与实现； * 实现AI搜索、AI推荐、AI客服； * 优化订单管理、支付管理、AI原生的用户体验（响应速度、数据安全、用户反馈）。 学习重点： * 鸿蒙APP订单管理的开发流程； * 订单管理的分类与使用场景； * 支付管理的设计与实现； * AI原生的设计与实现。 一、 订单管理基础 🎯 1.1 订单管理定义 订单管理是指对应用的订单进行管理，主要包括以下方面：

By Ne0inhk

304M参数引爆AIGC效率革命：AMD Nitro-E如何重新定义图像生成范式

304M参数引爆AIGC效率革命：AMD Nitro-E如何重新定义图像生成范式 【免费下载链接】Nitro-E 项目地址: https://ai.gitcode.com/hf_mirrors/amd/Nitro-E 导语 AMD推出仅304M参数的Nitro-E轻量级扩散模型，以1.5天训练周期和39.3样本/秒的吞吐量重新定义行业标准，推动边缘设备实时AI创作普及。 行业现状：轻量化成为AIGC部署关键 2025年全球多模态大模型市场规模预计达156.3亿元，其中图像生成技术贡献超过40%商业价值。当前主流扩散模型普遍面临"三重困境"：参数量动辄数十亿导致训练成本高昂、推理速度慢难以满足实时需求、部署门槛高限制边缘应用。根据PPIO最新报告，非推理模型使用量已从3月起持续超过推理模型，反映行业对高效生成技术的迫切需求。 如上图所示，中心发光的网络球体象征AI模型核心，周围多块屏幕展示自然风景（Nitro-E生成的图像示例），地面电路板状线条体现技术架构，直观呈现了高效多模态扩散Transformer的创新设计。这一可视化清晰揭示了模型如何通过令牌压缩技术实现30

By Ne0inhk
Flutter 组件 ansi_styles 的鸿蒙化适配实战 - 驾驭极致终端交互艺术、实现 OpenHarmony 开发链路、日志系统与控制台的工业级色彩分级方案

Flutter 组件 ansi_styles 的鸿蒙化适配实战 - 驾驭极致终端交互艺术、实现 OpenHarmony 开发链路、日志系统与控制台的工业级色彩分级方案

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 组件 ansi_styles 的鸿蒙化适配实战 - 驾驭极致终端交互艺术、实现 OpenHarmony 开发链路、日志系统与控制台的工业级色彩分级方案 前言 在鸿蒙（OpenHarmony）生态的底座开发、高性能服务端侧逻辑构建、或者是对命令行交互（CLI）有极其严苛要求的自动化工程流水线中。“终端日志的可视化分级与视觉重心引导维度”是衡量整个底层调试链路效能的最终质量门禁。面对包含数万行内核日志、海量网络请求报文、甚至是 0308 批次重型打包过程产生的满屏文字流。如果仅仅依靠终端中苍白的一串 White 和 Black 或者是毫无温标感的 txt 控制台。不仅会导致在定位历史回退（Regression）时让开发工程师如同在字符废墟中盲人摸象。更会因为缺乏大局观的报错优先级呈现。令技术高层在跨终端指挥调度时陷入严重的信息盲区。 我们需要一种“色彩生动、警示分明”的终端资产汇报艺术。 ansi_styles 是一套专注于无缝整合全球公认顶级

By Ne0inhk
通义万相 2.1 × 蓝耘智算：AIGC 界的「黄金搭档」如何重塑创作未来？

通义万相 2.1 × 蓝耘智算：AIGC 界的「黄金搭档」如何重塑创作未来？

我的个人主页我的专栏：人工智能领域、java-数据结构、Javase、C语言，希望能帮助到大家！！！点赞👍收藏❤ 引言 在当今数字化浪潮席卷的时代，AIGC（生成式人工智能）领域正以惊人的速度发展和变革。通义万相 2.1 和蓝耘智算，如同两颗璀璨的新星，它们的携手合作成为了 AIGC界备受瞩目的焦点。这一「黄金搭档」正凭借各自独特的优势，为内容创作带来前所未有的变革，重塑着 AIGC 领域的未来版图。如今，通义万相 2.1 与蓝耘智算的强强联合，正在为这一行业注入新动力，成为 AIGC 界的“黄金搭档”。这次合作不仅将 AI 技术带入更多创意领域，还将加速智能创作工具的普及，带来前所未有的行业变革。 接下来，让我们深入探究它们是如何发挥强大合力，引领创作新时代的。 一、技术联姻：通义万相 2.1

By Ne0inhk