正心全栈编程

开发环境、文件与 AI 协作 ​

写前端代码之前，先把编辑器、浏览器、项目目录和终端准备好。后面可以使用 AI 帮助生成和修改代码，但每次修改都要落到本地文件中运行，不能只看 AI 给出的文字判断结果。

认识开发环境 ​

本课程会使用四类工具：

工具主要用途
Chrome 或 Edge打开页面，使用开发者工具观察运行结果
VS Code 或 PyCharm创建目录、编辑 HTML、CSS 和 JavaScript 文件
终端进入项目目录，启动静态服务器和测试 API
代码类 AI拆分需求、解释代码、生成局部实现和辅助排错

AI 不代替浏览器和编辑器。AI 给出的代码只有保存到正确文件并实际运行后，才能确认是否有效。

创建第一个项目目录 ​

在容易找到的位置创建 frontend-start 目录，再创建 index.html：

text
frontend-start/
└── index.html

文件名由名称和扩展名组成。index 是名称，.html 是扩展名。后面还会使用：

  • .css：页面样式文件。
  • .js：JavaScript 文件。
  • .json：结构化数据或工具配置文件。
  • .md：课程说明或项目文档。

确认编辑器显示了完整扩展名，避免把文件保存成 index.html.txt。

在 index.html 中输入：

html
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>第一个前端页面</title>
</head>
<body>
<h1>前端学习开始了</h1>
</body>
</html>

保存后用浏览器打开文件。修改标题文字、再次保存并刷新浏览器，确认页面内容随文件变化。

这一步只要求会创建、保存和刷新页面。HTML 标签的正式讲解从 p01 开始。

使用终端运行命令 ​

终端用于执行项目工具。它不是另一个编程语言，也不会自动理解我们想进入哪个目录。

在编辑器中打开 frontend-start 目录，再打开集成终端。先确认终端当前位于项目目录：

bash
pwd

Windows PowerShell 可以使用：

powershell
Get-Location

常用的三个目录操作是：

bash
cd frontend-start
ls
cd ..
  • cd：进入指定目录。
  • ls：查看当前目录内容，Windows 也可以使用 dir。
  • cd ..：返回上一级目录。

看到“找不到文件”或“不是内部命令”时，先检查当前目录、命令拼写和工具是否安装，不要连续重复同一条命令。

课程后面会直接使用几组已经准备好的命令：

bash
python -m http.server 5500
uv run uvicorn app:app --reload --port 8000

当前只需要知道它们分别用于启动静态页面和测试 API。具体作用会在对应章节解释，不要求提前学习 Python 编程。

用 AI 完成一个小任务 ​

向 AI 提问时，不要只写“帮我写个网页”。把目标、已有内容、技术约束和验收标准说清楚，结果会更稳定。

可以使用下面的结构：

text
目标：把页面标题改成“学员登记”。
已有内容：下面是一份完整的 index.html。
技术约束：只使用 HTML，不添加 CSS、JavaScript 或第三方库。
验收标准：浏览器页面和标签页都显示新的标题。
请说明需要修改的位置，再给出完整代码。

拿到结果后按下面的顺序处理：

  1. 确认 AI 没有引入当前阶段未学习的技术。
  2. 查看它修改了哪些位置，不直接覆盖无法理解的大段代码。
  3. 把代码保存到本地文件。
  4. 刷新浏览器，观察实际结果。
  5. 结果不符合要求时，把页面现象、Console 报错和相关代码一起提供给 AI。

这种过程可以概括为：

text
说明需求 → 提供上下文 → 限制范围 → 小步修改 → 本地运行 → 验收结果

AI 协作边界 ​

本课程允许在所有任务中使用 AI，但要遵守四条规则：

  1. 不向 AI 提供密码、密钥、真实身份证号、手机号或其他隐私数据。
  2. 明确要求使用原生 HTML、CSS 和 JavaScript，不能让 AI 擅自引入框架或组件库。
  3. AI 可能生成不存在的属性、错误路径或过时写法，必须用浏览器和开发者工具验证。
  4. 遇到问题时提供最小相关代码和完整错误信息，不要只说“运行不了”。

“独立完成”不等于脱离 AI 默写所有语法，而是能够独立说明需求、判断修改范围、运行项目、发现问题并完成验收。

环境验收 ​

  • 能在编辑器中创建目录和带正确扩展名的文件。
  • 能保存页面并通过浏览器刷新看到变化。
  • 能打开终端、确认当前目录并执行简单命令。
  • 能按“目标、上下文、约束、验收”组织一次 AI 请求。
  • 能在 AI 给出代码后完成本地运行，而不是只阅读回答。

小结 ​

  1. 前端代码保存在项目文件中，由浏览器负责运行和显示。
  2. 终端负责启动工具，执行命令前要先确认当前目录。
  3. AI 是开发协作者，输出结果必须经过本地运行和验收。
  4. 后面的每个 Part 都会继续练习同一套 AI 协作流程。