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

用 龙虾10 分钟搞定 C 语言 + 前端实训？我试了，真香！

用 龙虾10 分钟搞定 C 语言 + 前端实训？我试了，真香！

🚀 用龙虾10 分钟搞定 C 语言 + 前端实训？我试了，真香！ 一句话总结：选对模型 + 写好提示词，让“龙虾”帮你从零生成可运行的 C 语言成绩管理系统 + 全栈博客前端项目，连实训报告都自动生成！ 大家好，我是 VON。最近“AI 编程助手”火出圈，但很多人还在手动敲代码、调 Bug、写报告……其实，只要用对工具，一个指令就能完成整套高校实训作业！ 今天我就带大家实测：如何用 AI 智能体（俗称“龙虾”） 快速搞定两类典型课程设计—— ✅ C 语言学生成绩管理系统 ✅ React 全栈个人博客系统 全程无需打开 IDE，甚至不用看一行代码！👇 🔧 第一步：选对模型，效率翻倍！ 智能体的输出质量，70%

By Ne0inhk

使用Docker安装Ollama及Open-WebUI完整教程

作者：吴业亮 博客：wuyeliang.blog.ZEEKLOG.net 一、Ollama 简介及工作原理 1. Ollama 简介及原理 * 简介：Ollama 是一款轻量级、开源的大语言模型（LLM）运行工具，旨在简化本地部署和运行大语言模型的流程。它支持 Llama 3、Mistral、Gemini 等主流开源模型，用户无需复杂配置即可在本地设备（CPU 或 GPU）上快速启动模型，适用于开发测试、本地智能应用搭建等场景。 * 工作原理： * 采用模型封装机制，将大语言模型的运行环境、依赖库及推理逻辑打包为标准化格式，实现模型的一键下载、启动和版本管理。 * 通过优化的推理引擎适配硬件架构，支持 CPU 基础运行和 GPU 加速（如 NVIDIA CUDA），减少资源占用并提升响应速度。 * 提供简洁的

By Ne0inhk
【Linux网络系列】：JSON+HTTP，用C++手搓一个web计算器服务器！

【Linux网络系列】：JSON+HTTP，用C++手搓一个web计算器服务器！

🔥 本文专栏：Linux网络Linux实践系列 🌸作者主页：努力努力再努力wz 💪 今日博客励志语录：别害怕选错，人生最遗憾的从不是‘选错了’，而是‘我本可以’。每一次推倒重来的勇气，都是在给灵魂贴上更坚韧的勋章。 ★★★ 本文前置知识： 序列化与反序列化 引入 在之前的博客中，我详细介绍了序列化 与反序列化 的概念。对于使用 TCP 协议进行通信的双方，由于 TCP 是面向字节流的，在发送数据之前，我们通常需要定义一种结构化的数据来描述传输内容，并以此作为数据的容器。在 C++ 中，这种结构化数据通常表现为对象或结构体。然而，我们不能直接将结构体内存中对应的字节原样发送到另一端，因为直接传递内存字节会引发字节序 和结构体内存对齐 的问题。不同平台、不同编译器所遵循的内存对齐规则可能不同，这可能导致接收方在解析结构体字段时出现错误。 因此，我们需要借助序列化 。序列化 是指将结构化的数据按照预定的规则转换为连续的字节流。其主要目的是屏蔽平台差异，使得位于不同平台的进程能够以统一的方式解析该字节流。序列化通常分为两种形式：文本序列化 与二进制序列化 。 文

By Ne0inhk
从vw/vh到clamp()，前端响应式设计的痛点与进化

从vw/vh到clamp()，前端响应式设计的痛点与进化

目录 从vw/vh到clamp()，前端响应式设计的痛点与进化 一、原生响应式设计的痛点 1、使用 vw/vh/% 的蜜月期与矛盾点 2、以 px+@media 为主轴实现多端样式兼容 二、clamp()：响应式设计的新思路 1、clamp() 是什么？ 2、优势分析 三、实际应用场景示例 1、标题文字大小 2、布局容器宽度 3、按钮与间距 4、配合calc()实现更灵活布局 四、clamp() 的局限与思考 五、结语 从vw/vh到clamp()，前端响应式设计的痛点与进化 一、原生响应式设计的痛点 1、使用 vw/vh/% 的蜜月期与矛盾点

By Ne0inhk