2026山东大学软件学院项目实训个人blog（三）

你是一位资深的 Web 前端开发专家，精通 HTML、CSS 和原生 JavaScript。你擅长构建响应式、美观且代码整洁的单页面网站。

你的任务是根据用户提供的网站描述，生成一个完整、独立的单页面网站。你需要一步步思考，并最终将所有代码整合到一个 HTML 文件中。

约束:
1. 技术栈: 只能使用 HTML、CSS 和原生 JavaScript。
2. 禁止外部依赖: 绝对不允许使用任何外部 CSS 框架、JS 库或字体库。所有功能必须用原生代码实现。
3. 独立文件: 必须将所有的 CSS 代码都内联在 `<head>` 标签的 `<style>` 标签内，并将所有的 JavaScript 代码都放在 `</body>` 标签之前的 `<script>` 标签内。最终只输出一个 `.html` 文件，不包含任何外部文件引用。
4. 响应式设计: 网站必须是响应式的，能够在桌面和移动设备上良好显示。请优先使用 Flexbox 或 Grid 进行布局。
5. 内容填充: 如果用户描述中缺少具体文本或图片，请使用有意义的占位符。例如，文本可以使用 Lorem Ipsum，图片可以使用 https://picsum.photos 的服务 (例如 `<img src="https://picsum.photos/800/600" alt="Placeholder Image">`)。
6. 代码质量: 代码必须结构清晰、有适当的注释，易于阅读和维护。
7. 交互性: 如果用户描述了交互功能 (如 Tab 切换、图片轮播、表单提交提示等)，请使用原生 JavaScript 来实现。
8. 安全性: 不要包含任何服务器端代码或逻辑。所有功能都是纯客户端的。
9. 输出格式: 你的最终输出必须包含 HTML 代码块，可以在代码块之外添加解释、标题或总结性文字。格式如下：

```html
... HTML 代码 ...
```

这里特别提一下 Lorem ipsum 占位文本的使用。它是前端与设计领域常用的虚拟文字，当用户需求描述较为简洁时，AI 可通过这类占位内容自动填充页面结构，让生成的网页更完整、更接近真实可用效果。

2）生成多文件模式的提示词：

你是一位资深的 Web 前端开发专家，你精通编写结构化的 HTML、清晰的 CSS 和高效的原生 JavaScript，遵循代码分离和模块化的最佳实践。

你的任务是根据用户提供的网站描述，创建构成一个完整单页网站所需的三个核心文件：HTML, CSS, 和 JavaScript。你需要在最终输出时，将这三部分代码分别放入三个独立的 Markdown 代码块中，并明确标注文件名。

约束：
1. 技术栈: 只能使用 HTML、CSS 和原生 JavaScript。
2. 文件分离:
- index.html: 只包含网页的结构和内容。它必须在 `<head>` 中通过 `<link>` 标签引用 `style.css`，并且在 `</body>` 结束标签之前通过 `<script>` 标签引用 `script.js`。
- style.css: 包含网站所有的样式规则。
- script.js: 包含网站所有的交互逻辑。
3. 禁止外部依赖: 绝对不允许使用任何外部 CSS 框架、JS 库或字体库。所有功能必须用原生代码实现。
4. 响应式设计: 网站必须是响应式的，能够在桌面和移动设备上良好显示。请在 CSS 中使用 Flexbox 或 Grid 进行布局。
5. 内容填充: 如果用户描述中缺少具体文本或图片，请使用有意义的占位符。例如，文本可以使用 Lorem Ipsum，图片可以使用 https://picsum.photos 的服务 (例如 `<img src="https://picsum.photos/800/600" alt="Placeholder Image">`)。
6. 代码质量: 代码必须结构清晰、有适当的注释，易于阅读和维护。
7. 输出格式: 每个代码块前要注明文件名。可以在代码块之外添加解释、标题或总结性文字。格式如下：

```html
... HTML 代码 ...
```

```css
... CSS 代码 ...
```

```javascript
... JavaScript 代码 ...
```

2.大模型技术选型

大模型的能力决定了 AI 生成结果的上限。

在选型时，我主要从生成效果、响应速度、使用成本、Java 接入难度、生态成熟度这几个关键维度综合评估。像用的比较多的是阿里的通义系列大模型，因为阿里的生态完善，并且能很轻松地在 Java 中接入，因此我先通过阿里云百炼平台进行了初步验证，结果能够满足基本需求。

但在多轮对比测试后我发现，DeepSeek 在前端代码生成场景下的表现更稳定，语法规范、结构清晰、页面还原度更高，更适合我们本次 AI 原生网页生成的核心任务。

除了生成效果，我也重点考虑了开发成本和功能完整性：查阅官方文档后确认，DeepSeek 的接口与 OpenAI API 完全兼容，这意味着我们可以直接使用成熟的 Java 客户端快速接入，几乎不需要额外适配，大幅降低团队开发成本。

在实际开发中，我也对模型做了区分：

开发调试阶段：使用 deepseek-chat，响应更快，便于测试与快速迭代；
最终验证与线上使用：使用 deepseek-reasoner，生成逻辑更严谨，适合复杂页面与高质量输出。

3.AI开发框架选型

在项目开发中，AI 功能的实现绝不仅仅是简单调用接口就可以完成，还需要处理上下文管理、工具调用、异常处理、统一配置等一系列工程化问题。因此，选择一个稳定、成熟、适配团队技术栈的 AI 开发框架至关重要。

结合项目背景与技术生态，我对目前 Java 领域主流的两大 AI 框架进行了分析：

Spring AI

生态体系成熟，与 Spring Boot 深度集成，对国内大模型支持友好，文档与社区资源丰富，适合团队标准化开发。
LangChain4j

整体轻量简洁，注解式开发体验友好，兼容主流大模型，不强制依赖 Spring 环境，灵活度高，适合快速搭建 AI 服务。

结合团队技术栈、开发效率以及后续扩展需求，我最终确定以LangChain4j为主框架完成 AI 模块搭建。

（三）LangChain4j框架

LangChain4j 是目前 Java 生态中轻量化、高成熟度的 AI 开发框架，专为简化大模型集成而设计，非常适合我们这种快速落地、稳定扩展的项目需求：

1.声明式编程风格，开发效率极高

框架采用面向接口的声明式设计，只需要定义接口并添加简单注解，就能自动实现 AI 对话、内容生成等能力，无需编写大量重复的请求、解析、异常处理代码，整体逻辑清晰、可读性强，非常适合团队协作开发。

2.模型兼容性极强，支持无缝切换

LangChain4j 内置支持几乎所有主流大模型服务，包括 OpenAI、DeepSeek、阿里通义千问、文心一言等，不需要为不同模型重写适配代码。在本次项目中，我可以轻松切换不同模型进行效果对比，大幅提升了测试与迭代效率。

3.与 Spring Boot 深度集成，开箱即用

框架对 Spring Boot 提供原生支持，配置简单、侵入性低，能够与项目现有架构完美融合。只需要在配置文件中填写密钥与模型信息，即可快速构建稳定的 AI 服务，非常符合企业级项目的开发规范。

4.完善的工程化能力

除了基础的 AI 调用外，框架还提供对话历史管理、工具调用、异常处理、结果解析等工程化能力，让 AI 功能不再是简单的接口调用，而是真正可维护、可扩展、可稳定运行的企业级服务。

三、实现AI应用生成

1.大模型接入

参考 LangChain4j 的官方文档，需要添加 OpenAI 大模型的依赖：

        <!-- langchain4j -->
        <dependency>
            <groupId>dev.langchain4j</groupId>
            <artifactId>langchain4j</artifactId>
            <version>1.1.0</version>
        </dependency>
        <!-- langchain4j-open-ai-spring-boot-starter -->
        <dependency>
            <groupId>dev.langchain4j</groupId>
            <artifactId>langchain4j-open-ai-spring-boot-starter</artifactId>
            <version>1.1.0-beta7</version>
        </dependency>

为了保护敏感信息，我们需要在 .gitignore 中添加本地配置文件 application-local.yml，忽略该文件的提交，之后就可以放心地将敏感配置都写在这个文件里了。

### CUSTOM ###
application-local.yml

创建本地配置文件 application-local.yml，填写 Chat Model 配置。并在主配置文件中激活本地环境。

# AI
langchain4j:
  open-ai:
    chat-model:
      base-url: https://api.deepseek.com
      api-key: <API Key>
      model-name: deepseek-chat
      log-requests: true
      log-responses: true

2.开发AI服务

按照 LangChain4j 推荐的 AI Service 开发模式，在 ai 包下创建服务接口：

考虑到系统提示词较长，我将提示词与代码分离，单独维护在资源文件中：

codegen-html-system-prompt.txt：单文件 HTML 生成提示词
codegen-multi-file-system-prompt.txt：多文件分离模式提示词

在服务接口中定义两个生成方法，分别对应两种生成模式，并通过 LangChain4j 注解绑定对应的系统提示词：

public interface AiCodeGeneratorService {

    /**
     * 生成 HTML 代码
     *
     * @param userMessage 用户提示词
     * @return AI 的输出结果
     */
    @SystemMessage(fromResource = "prompt/codegen-html-system-prompt.txt")
    String generateHtmlCode(String userMessage);

    /**
     * 生成多文件代码
     *
     * @param userMessage 用户提示词
     * @return AI 的输出结果
     */
    @SystemMessage(fromResource = "prompt/codegen-multi-file-system-prompt.txt")
    String generateMultiFileCode(String userMessage);

}

创建工厂类完成 AI 服务的初始化：

@Configuration
public class AiCodeGeneratorServiceFactory {
    @Resource
    private ChatModel chatModel;
    @Bean
    public AiCodeGeneratorService aiCodeGeneratorService() {
        return AiServices.create(AiCodeGeneratorService.class, chatModel);
    }
}

3.功能测试

@SpringBootTest
class AiCodeGeneratorServiceTest {
    @Resource
    private AiCodeGeneratorService aiCodeGeneratorService;
    @Test
    void generateHtmlCode() {
        String result = aiCodeGeneratorService.generateHtmlCode("做个带有爱心的页面");
        Assertions.assertNotNull(result);
    }
    @Test
    void generateMultiFileCode() {
        String multiFileCode = aiCodeGeneratorService.generateMultiFileCode("做个带有爱心的页面");
        Assertions.assertNotNull(multiFileCode);
    }
}

以 Debug 模式运行测试，可以在控制台看到详细的请求和响应日志：

测试结果符合预期，AI 成功生成了完整的网页代码：

四、开发过程中的问题与解决方案

问题：AI 返回内容带多余文字，代码提取失败

现象：

AI 生成网页代码时，会附带 “好的，我来为你生成”“以下是代码” 等自然语言描述，导致程序无法正确截取纯代码，写入文件后无法运行。

原因：

提示词约束不够严格，AI 没有严格遵循 “只输出代码” 的要求；程序没有做精准的内容截取逻辑。

解决方案：

1.优化提示词，强制 AI 只返回必须性回答和代码块，不允许任何额外描述；

2.在提示词末尾增加格式约束，要求代码用 html 包裹；

3.在后端增加文本处理逻辑，按标记符截取中间纯代码内容。

五、实训收获与技术成长

本周我完成了 AI 网页生成模块从 0 到 0.1 的开发验证，整体收获十分充实：

掌握 AI 应用完整开发流程：从需求分析、提示词设计、大模型选型到框架接入与功能落地，完成了 AI 能力的全流程实现。
熟练使用 Java AI 技术栈：掌握 LangChain4j 的使用方法，熟悉主流大模型接入方式，对 Java 生态下的 AI 开发有了更清晰的认识。

六、后续开发计划

1.完善 AI 生成能力：进一步优化提示词工程，提升复杂页面、响应式布局、交互逻辑的生成质量，让 AI 输出更稳定、更贴近真实项目标准。

2.与用户模块对接：将 AI 生成功能与已完成的用户体系打通，实现 “用户登录 → 新建项目 → AI 生成网页 → 项目保存与管理” 的完整业务流程。

3.推进应用模块开发：实现应用的创建、在线生成、列表浏览、预览、部署与全生命周期管理，完善 AI 零代码生成平台的整体闭环。

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

多款方案全面适配开源鸿蒙OpenHarmony 6.1，将纳入官方LTS 长期支持版本

AtomGit开源社区

FreeModbus移植与使用

FreeModbus简介：FreeModbus是一款开源的Modbus协议栈，采用C语言编写，轻量级且跨平台，广泛用于嵌入式系统中实现Modbus通信。它支持RTU、ASCII和TCP模式，具有高可移植性，可运行于裸机或RTOS环境，适用于STM32、ARM、AVR等多种微控制器。使用场景：工业自动化中连接PLC与传感器；能源管理中用于智能电表数据采集；楼宇自控系统中实现设备通信；物联网终端中作为