软件的三层结构与网页文件的交付形态
任何一个软件都由界面、逻辑、数据三层构成。界面给人看，逻辑负责算和判断，数据负责记住。
把内容摆给人看，接住人的点击和输入。不做判断，也不记东西。
负责计算和判断。同一批数据，逻辑不同，结果就不同。
软件记住的内容。关掉、重开、换个时间再来，仍然在。
| 软件 | 界面 | 逻辑 | 数据 |
|---|---|---|---|
| 教务系统 | 课表、成绩单、选课按钮 | 判断学分够不够、这门课还有没有名额 | 选课记录、历年成绩 |
| 微信 | 聊天窗口、朋友圈 | 判断消息发给谁、有没有发送成功 | 聊天记录、通讯录 |
三层各自独立，可以分别出问题。页面出了问题，先判断出在哪一层，再动手处理。
按界面、逻辑、数据判断问题出在哪一层，再去处理那一层。
页面有问题，就一处一处试着改
费时，比先分层慢得多
先判断是界面、逻辑还是数据
直接处理出问题的那一层
源代码是一段纯文本，用记事本就能打开、修改。名片页的样式和脚本都写在同一个 .html 文件里。
写成纯文本的程序。本身不做任何事，用记事本就能打开、修改。
分别写网页的内容、样子和动作，可以合在一个 .html 文件里。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* ……7 行样式：配色、圆角、间距 */ </style> </head> <body> <div class="card"> <h1>李明</h1> <!-- ……专业、介绍、擅长、项目 --> <div class="item"><span class="label">联系</span><span id="contact">点下方按钮显示</span></div> <button onclick="showContact()">显示联系方式</button> </div> <script> // 整页唯一的逻辑层 function showContact() { document.getElementById('contact').textContent = 'liming@example.edu.cn'; } </script> </body> </html>
AI 拆成网页、样式、脚本三个文件
少拷一个文件就打不开
"全部合并到一个 .html 文件里"
拷一个文件，双击就能看
<script> 那一整块删掉，页面会变成什么样？按钮还在不在？判断依据：按钮写在哪一块代码里，点按钮之后的动作写在哪一块里。系统按扩展名决定把文件交给哪个程序。代码要有执行环境才能运行，浏览器就是网页的执行环境。
文件名末尾的 .html、.txt、.py。系统靠它决定把文件交给哪个程序。
能运行代码的程序。浏览器是网页的执行环境，电脑出厂就装好了。
Python 的执行环境。没有安装时，系统中没有能执行 .py 的程序。
页面从网上引用的字体、图标库等，不在文件里，断网就取不到。
直接另存为 card.html
被存成 card.html.txt，打开是一堆代码
再输入文件名 card.html
得到 .html 文件，双击出现页面
AI 倾向于这样写，联网时看不出问题
断网的机房里字体退回默认，图标显示为空方框
"不要引用任何外部链接、字体或图标库"
断网照常显示，交给别人也能打开
保存文件用的编码和浏览器解读用的编码必须一致。本课程统一用 UTF-8。
文字和字节之间的对照规则，相当于一本密码本。
一套通用的字符编码。本课程的文件一律按它保存。
编码下拉框用默认值
中文变成方块、问号或一串怪字
另存时编码下拉框选 UTF-8
中文正常显示
没有 <meta charset="UTF-8">
浏览器不知道按哪一套解读，中文变方块
<meta charset="UTF-8"> 放在 <head> 里
浏览器按 UTF-8 解读
代码全部由大模型生成；说清要做什么、判断对不对、交到别人手上，由你完成。
一件作品也不亲手做
看不出 AI 漏了哪一条校验，看不出汇总表少了十二行
执行交给 AI，定义与验收自己做
能判断 AI 这一次改对了没有
成绩由作业、课堂表现、期中、期末四部分构成。作品在自己电脑上双击能运行，就算完成。
| 项目 | 规定 |
|---|---|
| 分组 | 全班 28 人，分 14 组，每组 2 人，本学期固定不换 |
| 作品 | 两人各自独立完成自己的作品，不合交一份 |
| 同组互助 | 上机遇到问题，先问同组同学；作品交出去之前，请对方看一遍 |
| 题目 | 每章三个题目任选其一。选哪个不影响分值权重，影响的是你练到什么程度 |
| 换题材 | 允许更换题材，验收标准不变 |
需求里写明交付形态：单文件、不引用外部资源、UTF-8 编码。不写明，AI 替你决定。
作品交到别人手上时的样子。本课程要的是一个能双击打开、拷给任何人都能看的文件。
| 约束 | 不写时的问题 | 验收时怎样检查 |
|---|---|---|
| 单文件 | 拆成三个文件，少拷一个就打不开 | 看文件夹里是不是只有一个 .html |
| 无外链 | 断网页面就变样，交给别人也打不开 | 断开网络，刷新一次 |
| UTF-8 | 中文变成方块或乱码 | 页面上每一处中文都看一遍 |
页面上是"张三"、13800138000
这是流传多年的示例号码，等于写了"此处应有电话"
姓名、电话、机构名称交付前一律替换
页面上是自己的真实信息
三题选一，需求末尾加上三句约束。做出一个能双击打开的文件，再换一台设备验证。
用 1.8 的提示词，改成自己的题目；后三句约束一个字不改
产出：一整段代码全选复制 AI 返回的代码，原样粘进记事本
产出：记事本里的一段文本如 card.html。保存类型选「所有文件」，编码选 UTF-8
产出：一个 .html 文件页面出现，地址栏以 file:// 开头
产出：能看的成品在记事本里改示例内容，Ctrl+S 保存，回浏览器刷新
产出：属于你的作品拷进 U 盘或发到手机，确认在别处也能看
产出：经过验证的交付物页面不对时，先按现象判断是哪一层、哪一步出了问题，再按表处理。
| 现象 | 原因 | 处理 |
|---|---|---|
| 双击打开是一堆代码 | 存成了 card.html.txt | 先在资源管理器「查看」里勾上「文件扩展名」，再重新另存，保存类型选「所有文件」 |
| 中文全是方块 | 保存时编码不是 UTF-8 | 重新另存，编码下拉框选 UTF-8 |
| 只复制了一半，页面缺东西 | AI 把代码分成几块给出，漏了后面的 | 让 AI 把完整代码合成一整份再给一次 |
| 页面全是文字，没有配色 | 漏掉了 <style> 那一块 | 对照 1.3 检查代码是否完整 |
| 按钮点了没反应 | 漏掉了 <script> 那一块，逻辑层整块不见了 | 对照 1.3 检查代码是否完整 |
| 改了内容，页面没变化 | 没保存，或保存了没刷新 | 记事本里 Ctrl+S 保存，再回浏览器刷新 |
| 电脑上很宽，手机上错乱 | 少了 viewport 那一行 | 让 AI 补上，或在需求里写明「手机屏幕优先」 |
| 字体和 AI 演示的不一样 | 引用了网上的字体，本机没有 | 需求里加「不要引用任何外部链接、字体或图标库」，重新生成 |
| 页面上出现张三、13800138000 | AI 编的示例内容 | 全部替换成自己的真实信息 |
提交四项内容，按七条标准验收；选做一项。
按作业模板（Word）填写，开头注明所选题目，当堂提交；提交渠道见课堂通知。
零代码应用开发 · 第 1 章 软件是什么做的