最后更新：2026-09-04 00:01
实验15 ai+前端开发¶
难度：★★☆ | 预估时长：90 分钟
15.1 实验目的¶
- 知识目标：掌握面向前端网页样式与基础算法生成的结构化提示词（Prompt）编写方法，理解保持 HTML 结构不变、只对 CSS 做局部增量迭代的思路。
- 技能目标：能完成 VS Code 基础配置与常用扩展插件安装（Chinese、Live Server、Python），能用豆包辅助生成 HTML/CSS 代码并局部优化，能用 Live Server 运行网页、用终端命令行运行 Python 脚本。
- 素养目标：养成「报错信息回喂 AI 排错」的闭环工程习惯，建立结构化提示词精准表达需求的意识。
15.2 实验环境¶
- 操作系统：Windows 10 或 Windows 11
- 编程工具：VS Code，Python 3.10
- 浏览器：Chrome
- 大模型工具：豆包（doubao.com）
15.3 实验重难点¶
- 重点：在 VS Code 中配置 HTML 与 Python 运行环境；编写结构化提示词引导豆包生成精准的网页组件与穷举法算法代码。
- 难点：保持 HTML 结构不变的前提下，引导 AI 局部精准重构 CSS 样式；掌握在 VS Code 终端中切换路径、执行 Python 脚本并处理报错反馈的闭环操作。
15.4 实验内容¶
15.4.0 环境配置与插件准备¶
1. 任务描述
安装配置 VS Code 编辑器及相关基础开发插件，为 HTML 前端页面预览和 Python 脚本运行搭建保姆级实操环境。
插件是什么？为什么要装这些插件？
插件就像给 VS Code 装的「APP」：装上中文包界面变中文好认，装上 Live Server 才能一键本地运行网页，装上 Python 插件才能运行 .py 文件。
2. 实验步骤
- 步骤 1：双击运行电脑桌面上的 VS Code 安装包完成安装。打开 VS Code 软件，点击左侧活动栏底部的 扩展/插件（Extensions） 图标（快捷键：Ctrl + Shift + X），如图所示：
- 步骤 2：在插件市场搜索框中输入 Chinese，找到 Chinese (Simplified) (简体中文) 语言包插件，点击 Install 进行安装。安装完成后根据右下角弹窗提示重启 VS Code，界面将自动切换为中文（如果这一步弄不好也没事不影响，直接跳过这步）：
- 步骤 3：在扩展搜索框中输入 Live Server，点击 Install/安装 完成安装：
- 步骤 4：在扩展搜索框中输入 Python，找到下图，点击 Install/安装 完成安装。
常见错误与排错
- 若扩展面板搜不到插件：检查网络后重试，或重启 VS Code 再搜索；
- 若安装中文包后界面没变中文：重启 VS Code 生效，实在不行可跳过，不影响后续任务。
15.4.1 任务 1：使用 AIGC 辅助编程实现带下拉菜单的导航栏（基础版）¶
1. 任务描述
通过豆包获取带下拉菜单的导航栏单文件代码，利用 VS Code 建立前端页面并配置本地服务器运行，实现基础深灰色视觉效果。
什么是「单文件形式」？
HTML 和 CSS 都写在同一个 index.html 里，就像一封信连信纸信封装在一起：只需要这一个文件，运行它就能看到完整网页。
2. 实验步骤
- 步骤 1：打开 Chrome 浏览器，登录豆包官网（doubao.com），在消息发送框点击选择"思考"：
- 步骤 2：在对话框中输入结构化提示词：
- 步骤 3：在你的桌面上右键 -> 新建 -> 文件夹，然后把文件夹拖入到 VS Code 里面。接着在 VS Code 中左侧点击刚才的文件夹，上方点击下图按钮：
并将文件命名为 index.html：
- 步骤 4：复制豆包生成的完整代码，然后将代码粘贴到右侧 index.html 里面进去并保存（快捷键 Ctrl + S）。
- 步骤 5：在编辑器中右键点击 index.html 代码编辑区的任意空白位置，在弹出的右键菜单中点击 Open with Live Server（使用 Live Server 打开）。如图所示：
- 步骤 6：一般情况下系统会自动唤起 Chrome 浏览器并创建本地服务器端口（通常为 http://127.0.0.1:5500），查看效果。（如果没有自动弹出，请手动打开浏览器，最上方输入：127.0.0.1:5500）
常见错误与排错
- 若浏览器没有自动弹出：手动打开浏览器，地址栏输入 127.0.0.1:5500；
- 若页面空白或样式不对：检查代码是否完整粘贴、是否按 Ctrl + S 保存。
15.4.2 任务 2：AIGC 辅助局部样式迭代优化——导航栏增强版（深红色主题）¶
1. 任务描述
保持现有的 HTML 页面结构完全不改动，通过增量提示词引导豆包精准修改 CSS 样式代码，将导航栏升级为深红色和橙色撞色风格。
为什么要保持同一个豆包对话？
AI 记得上一轮生成的代码，才能做到「保持 HTML 不动、只改 CSS」的局部修改；新开一个对话它就「失忆」了，只能整个重写。
2. 实验步骤
- 步骤 1：回到刚才的豆包对话界面（切勿开启新对话，保持上下文连续感知），针对上一轮的代码直接输入优化提示词：
- 步骤 2：回到 VS Code 中，在 index.html 编辑区使用快捷键 Ctrl + A 全选，按退格键清空，然后一键复制并粘贴豆包生成的全新深红色风格代码，按 Ctrl + S 保存。
- 步骤 3：由于 Live Server 具备热重载特性，无需重新点击运行，直接切换到已经打开的浏览器标签页。检查导航栏背景是否成功改变，且鼠标悬停"产品"或"服务"时能正常弹出橙色下拉菜单。
- 步骤 4：如果没有达到效果，继续追问豆包：
常见错误与排错
- 若样式没有变化：确认粘贴的是豆包新生成的完整代码，并且已经保存（Live Server 要检测到文件保存才会热重载）；
- 若下拉菜单弹不出来：检查代码中的 HTML 结构是否被误删，可让豆包重新输出完整代码。
15.4.3 任务 3：导航栏自定义¶
1. 任务描述
你需要把上一步的导航栏里面的任意文字改为你的姓名。
为什么删文字时不能碰尖括号？
<a> 这类尖括号是 HTML 的「标签盒子」，文字都装在盒子里；盒子或盒壁（尖括号）被删了，整段内容的显示就乱了。
2. 实验步骤
- 步骤 1：回到 VS Code 软件中，确保当前打开的依然是刚才修改好的 index.html 文件。
- 步骤 2：在代码编辑区中向下滚动，找到包含导航栏文字的具体代码行，也就是含有"首页"两个字的那行代码。
- 步骤 3：小心地将原有的文字（例如"首页"或"关于我们"）删除，注意：千万不要误删左右两边的尖括号和里面的英文字母，然后输入你自己的真实姓名（例如：张三）。
- 步骤 4：修改完成后，按下键盘快捷键 Ctrl + S 进行保存。
- 步骤 5：回到浏览器查看 127.0.0.1:5500 页面效果是不是有你的名字了。
常见错误与排错
- 若改完页面显示错乱：多半是误删了尖括号或标签内的英文字母，按 Ctrl + Z 撤销后重新小心修改。
15.4.4 任务 4：使用 AIGC 编写"鸡兔同笼"经典算法¶
1. 任务描述
利用豆包生成解决经典数理问题"鸡兔同笼"的 Python 穷举法代码，并学习在 VS Code 终端及图形界面中进行脚本运行与调试。
什么是穷举法？
就像开密码锁把 0000 到 9999 一个个试过去：把笼子里鸡的数量从 0 到 35 一只只列举，哪种组合的脚数正好等于 94，答案就是它。
2. 实验步骤
- 步骤 1：在桌面上右键 -> 新建 -> 文件夹，然后把文件夹拖入到 VS Code：
- 步骤 2：看图新建文件，输入文字 rabbit.py 然后回车：
- 步骤 3：打开浏览器进入豆包，输入明确的结构化算法提示词：
- 步骤 4：复制豆包生成的完整 Python 穷举法代码，粘贴到 VS Code 的 rabbit.py 文件中，并保存。如图所示：
- 步骤 5：【核心脚本运行方法一：图形化点击运行】 确保已正确激活 VS Code 的 Python 插件。在右侧代码编辑区的右上角，找到并点击 小三角形"运行 Python 文件 (Run Python File)" 按钮。如图所示：
VS Code 无法运行 Python 或提示找不到环境？（手动指定解释器）
故障原因：VS Code 的 Python 插件没有自动检测到你安装的 Python 3.10。
解决办法：
- 首先：在 VS Code 界面中，按下快捷键 Ctrl + Shift + P，正上方会弹出一个命令面板搜索框；
- 然后：在搜索框中输入 Python: Select Interpreter（如果安装了中文包，可以输入 Python: 选择解释器）；
- 其次：在弹出的列表中，选择"输入解释器路径..." (Enter interpreter path...)，然后点击"查找..." (Find...)；
- 接着：在弹出的文件选择窗口中，找到你第一步安装 Python 的确切路径。按照默认安装位置，通常在：C:\Users\你的电脑用户名\AppData\Local\Programs\Python\Python310\python.exe，找到 python.exe 文件，选中并点击右下角的"选择解释器"；
- 最后：配置完成后，查看 VS Code 右下角状态栏，如果显示了 3.10.6 字样，说明手动连接成功，此时再次点击右上角的运行按钮即可正常执行代码。
- 步骤 6：【核心脚本运行方法二：终端命令行运行（工程标准规范）】 点击 VS Code 顶部菜单栏的 "终端" → "新终端"。此时编辑器底部会弹出一个 Terminal 终端窗口。确保当前光标所在的路径与 rabbit.py 文件所在目录一致，在符号 > 后面直接输入运行命令并回车：
如图所示：
15.5 实验总结¶
本次实验掌握了以下要点：
- 一是掌握了结构化提示词的编写方法，能引导豆包生成导航栏组件与穷举法算法代码（对应知识目标）；
- 二是完成了 VS Code 基础配置与 Chinese、Live Server、Python 等扩展插件的安装（对应技能目标）；
- 三是能用 Live Server 运行 HTML 页面，并在保持 HTML 结构不变的前提下引导 AI 局部重构 CSS 样式（对应技能目标）；
- 四是掌握了图形化点击与终端命令行两种 Python 脚本运行方法，能通过手动指定解释器解决环境报错（对应素养目标）。
15.6 作业提交¶
- 提交地点：吾爱作业网
- 提交资料：提交以下任务的高清全屏截图，各至少 1 张：
截图 1：展示 15.4.1 中，基础版深灰色导航栏在浏览器中成功运行，且鼠标悬停展开下拉菜单的渲染效果；
截图 2：展示 15.4.2 中，增强版深红色/橙色撞色导航栏在浏览器中成功运行并展开二级菜单的渲染效果；
截图 3：展示 15.4.3 中，你的代码和效果截到一张图里面；
截图 4：展示 15.4.4 中，VS Code 编辑器界面的完整全屏截图。【画面必须同时包含上方的 rabbit.py 代码以及下方终端（Terminal）成功打印出"鸡: 23只, 兔: 15只"的正确运行结果】。
15.7 知识检测¶
- [ ] （填空）在 VS Code 中预览 HTML 页面，需要右键选择______打开。（Open with Live Server）
- [ ] （填空）Live Server 本地服务器的默认端口是______。（5500）
- [ ] （填空）鸡兔同笼 35 头 94 脚的正确结果是鸡__只、兔____只。（23、15）
- [ ] （选择）样式迭代优化时，给豆包的提示词要求保持什么完全不动？A. HTML 结构 B. 文件名 C. 端口号 D. 浏览器
查看解析
正确答案：A。增量提示词要求「保持 HTML 结构完全不动，仅修改 CSS 部分」，避免整体重写引入新问题。
本课相关资源¶
| 序号 | 资源名称 | 类型 | 说明 |
|---|---|---|---|
| 1 | 实验 15 AIGC 在前端开发与算法编程中的应用 (1).docx | Word | 实验原始文档 |
实验素材下载
点击下方链接获取本节课全部资源（含课件、任务清单、安装包等）： 🔗 夸克网盘