编程语言速览：看懂 AI 写的代码

完成时间：约 30 分钟。读完后你能看懂 AI 生成的 Go、JavaScript、SQL 代码的大意。

你不需要学会写任何语言。你需要的是看懂 AI 写了什么——就像你不需要会做菜，但看得懂菜谱就能判断这道菜合不合理。

---

为什么有这么多编程语言？

类比：语言就像工具箱里的不同工具。

• 锤子（Go）——结实、高效，专门用来盖房子（后端服务器）
• 画笔（JavaScript）——灵活、表现力强，专门用来装修（前端界面）
• 计算器（SQL）——专做一件事：查数据
• 瑞士军刀（Python）——什么都能干一点，特别擅长数据和 AI

没有”最好的语言”，只有”最适合的语言”。本课程用 Go 做后端、JavaScript 做前端，这是业界主流的组合之一。

---

看懂代码的 5 个通用概念

不管什么语言，代码都是这 5 个概念的组合。先理解它们，看任何语言都不慌。

1. 变量 — 给数据起个名字

想法：记住用户的名字叫"小明"
代码：name = "小明"

就像 Excel 里给单元格命名。之后用 name 就能拿到”小明”。

2. 函数 — 把一段操作打包

想法：把"计算总价"这个操作打包起来，以后反复用
代码：
function 计算总价(单价, 数量) {
    return 单价 × 数量
}

就像菜谱——写一次，做一百次。

3. 条件判断 — 如果…就…否则…

想法：库存够就卖，不够就提示
代码：
if 库存 > 0 {
    卖出商品
} else {
    提示"已售罄"
}

4. 循环 — 对每一个…做同样的事

想法：给购物车里每件商品算小计
代码：
for 商品 in 购物车 {
    小计 = 商品.单价 × 商品.数量
}

5. 数据结构 — 把数据组织起来

列表（多个同类东西）：购物车 = ["苹果", "牛奶", "面包"]
字典（键值对）：      用户 = { 名字: "小明", 年龄: 25 }

掌握了这 5 个概念，你就能看懂 80% 的代码逻辑。 剩下的 20% 是语言特有的语法糖，遇到不懂的直接问 AI。

---

Go 语言速览

本课程的后端语言。

一句话定位

Google 出品，专为服务器和后端设计。语法极简，编译后直接运行，速度快。

特点

特性	说明
强类型	变量必须声明类型（或让编译器推断）
编译型	写完要先编译成机器码再运行（go build）
错误处理	不用 try/catch，用 if err != nil
并发	内置 goroutine，天然适合高并发服务器

10 行代码认识 Go

这是一个完整的 HTTP 接口——返回”你好世界”：

package main                          // 每个 Go 文件都属于一个包

import "github.com/gin-gonic/gin"     // 导入 Gin 框架

func main() {                         // 程序入口
    r := gin.Default()                // 创建一个路由器
    r.GET("/hello", func(c *gin.Context) {  // 定义 GET /hello 接口
        c.JSON(200, gin.H{           // 返回 JSON
            "message": "你好世界",
        })
    })
    r.Run(":8080")                    // 启动服务，监听 8080 端口
}

Vibe Coding 视角：你会反复看到的 5 个 Go 模式

1. 函数签名

func GetUsers(c *gin.Context) {
//   ^^^^^^^^  ^^^^^^^^^^^^^
//   函数名     参数（Gin的上下文，用来读请求、写响应）

2. 错误处理（Go 代码里最常见的 3 行）

user, err := db.FindUser(id)  // 调用函数，返回结果和错误
if err != nil {                // 如果有错误
    return err                 // 把错误往上抛
}

3. 结构体（定义数据长什么样）

type User struct {
    ID    uint   `json:"id"`      // 用户ID
    Name  string `json:"name"`    // 用户名
    Email string `json:"email"`   // 邮箱
}
// 类比 Excel 表头：| ID | Name | Email |

4. GORM 数据库查询

var users []User
db.Where("role = ?", "admin").Find(&users)
// 翻译：从数据库找出所有 role 是 admin 的用户

5. Gin 路由（URL 和函数的对应关系）

r.GET("/api/users", GetUsers)       // GET 请求 → 查询用户
r.POST("/api/users", CreateUser)    // POST 请求 → 创建用户
r.PUT("/api/users/:id", UpdateUser) // PUT 请求 → 更新用户
r.DELETE("/api/users/:id", DeleteUser) // DELETE 请求 → 删除用户

---

JavaScript 速览

本课程的前端语言。

一句话定位

浏览器的原生语言。所有网页交互（点击、动画、数据加载）都靠它。配合 React 框架写 UI 组件。

特点

特性	说明
动态类型	变量不用声明类型，写起来更灵活
解释型	不用编译，浏览器直接运行
事件驱动	用户点击、输入都是”事件”，JS 负责响应
异步	用 async/await 处理网络请求等耗时操作

10 行代码认识 JavaScript（React 组件）

这是一个显示用户列表的组件：

function UserList() {                          // 定义一个组件
  const [users, setUsers] = useState([])       // 声明一个状态：用户列表

  useEffect(() => {                            // 组件加载时执行
    fetch('/api/users')                        // 请求后端接口
      .then(res => res.json())                 // 把响应转成 JSON
      .then(data => setUsers(data))            // 把数据存到状态里
  }, [])

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}  {/* 循环渲染每个用户 */}
    </ul>
  )
}

Vibe Coding 视角：你会反复看到的 5 个 JS/React 模式

1. 箭头函数（简写的函数）

// 传统写法
function add(a, b) { return a + b }

// 箭头函数（AI 生成的代码几乎都用这种）
const add = (a, b) => a + b

2. React 组件（一个函数 = 一块 UI）

function Button({ text, onClick }) {    // 接收参数
  return (
    <button onClick={onClick}>          {/* 点击时触发 */}
      {text}                            {/* 显示文字 */}
    </button>
  )
}

3. useState（组件的”记忆”）

const [count, setCount] = useState(0)
// count = 当前值（初始为 0）
// setCount = 修改这个值的函数
// 调用 setCount(5) → count 变成 5，页面自动更新

4. fetch 调用后端接口

const response = await fetch('/api/expenses', {
  method: 'POST',                      // 请求方式
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ amount: 100 }) // 发送数据
})
const data = await response.json()     // 读取返回结果

5. map 渲染列表（循环显示多条数据）

{expenses.map(item => (
  <div key={item.id}>
    <span>{item.category}</span>
    <span>¥{item.amount}</span>
  </div>
))}
// 对 expenses 数组里的每一项，生成一个 <div>

---

Python 速览

本课程不强制使用，但你可能在 AI/脚本场景中遇到它。

一句话定位

最接近自然语言的编程语言。AI/机器学习/数据分析的首选。写脚本也非常方便。

特点

特性	说明
动态类型	不用声明类型
缩进敏感	用缩进（空格）代替大括号，代码天然整齐
库丰富	pip install 一行就能装各种工具

5 行代码认识 Python

import requests                           # 导入HTTP库

response = requests.get('/api/users')     # 请求接口
users = response.json()                   # 解析JSON

for user in users:                        # 循环每个用户
    print(f"姓名: {user['name']}")        # 打印名字

什么时候你会遇到 Python

• 写自动化脚本（批量重命名文件、处理 Excel）
• 调用 AI API（OpenAI、Claude）
• 数据分析和可视化

---

TypeScript 速览

JavaScript 的”加强版”，你可能在一些项目中看到 .ts 或 .tsx 文件。

一句话定位

TypeScript = JavaScript + 类型检查。大项目用它更安全，能在编译时发现错误。

和 JavaScript 的区别

// JavaScript — 不声明类型
const name = "小明"
function greet(name) { return "你好 " + name }

// TypeScript — 加了类型标注
const name: string = "小明"
function greet(name: string): string { return "你好 " + name }
//                 ^^^^^^    ^^^^^^
//                 参数类型    返回值类型

就多了 : 类型 这一点。如果你看懂了 JavaScript，TypeScript 自然就能看懂。

---

SQL 速览

和数据库对话的语言。AI 操作数据库时会自动生成 SQL，你能看懂就行。

一句话定位

SQL 不是编程语言，是”查询语言”——用来告诉数据库”给我什么数据”或”帮我改什么数据”。

4 句核心

-- 查：查询所有用户
SELECT * FROM users;

-- 增：新增一条记录
INSERT INTO expenses (amount, category) VALUES (99.9, '餐饮');

-- 改：修改一条记录
UPDATE users SET name = '小红' WHERE id = 1;

-- 删：删除一条记录
DELETE FROM expenses WHERE id = 5;

实战示例：查询本月支出 TOP 5

SELECT category, SUM(amount) as total    -- 查分类和总金额
FROM expenses                            -- 从支出表
WHERE created_at >= '2024-01-01'         -- 本月的数据
  AND created_at < '2024-02-01'
GROUP BY category                        -- 按分类汇总
ORDER BY total DESC                      -- 按金额从大到小
LIMIT 5;                                 -- 只取前 5 条

什么时候你会遇到 SQL

• AI 生成 GORM 代码时，底层就是 SQL
• 调试数据问题时，直接在数据库工具里执行 SQL 查数据
• 你不用手写 SQL，但看得懂能帮你判断 AI 的查询逻辑对不对

---

HTML + CSS 速览

网页的骨骼和皮肤。AI 生成前端代码时大量涉及。

HTML = 结构

<div>                           <!-- 一个容器 -->
  <h1>记账工具</h1>              <!-- 标题 -->
  <p>欢迎回来，小明</p>          <!-- 段落 -->
  <input type="text" />         <!-- 输入框 -->
  <button>提交</button>          <!-- 按钮 -->
</div>

HTML 用”标签”包裹内容：<标签名>内容</标签名>。你看到 <div>、<h1>、<button> 就知道这是在描述页面结构。

CSS = 样式

.button {
  background-color: blue;    /* 背景蓝色 */
  color: white;              /* 文字白色 */
  padding: 10px 20px;        /* 内边距 */
  border-radius: 8px;        /* 圆角 */
}

Tailwind CSS（本课程前端使用）

传统 CSS 写在单独的文件里。Tailwind 的思路是把样式直接写在 HTML 标签上：

<!-- 传统方式：HTML + 单独的 CSS 文件 -->
<button class="button">提交</button>

<!-- Tailwind 方式：样式就在标签上 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">提交</button>
<!--            蓝色背景    白色文字  水平内边距 垂直内边距 圆角 -->

常见的 Tailwind 类名一看就懂：

类名	含义
text-red-500	红色文字
bg-white	白色背景
p-4	内边距 4 个单位
mt-2	上方外边距 2 个单位
flex	弹性布局（横排/竖排）
hidden	隐藏
w-full	宽度占满

---

语言对比总览

语言	用在哪	代码风格	本课程角色
Go	后端服务器	简洁、严格、强类型	✅ 主力后端语言
JavaScript	前端浏览器	灵活、动态	✅ 主力前端语言
SQL	数据库查询	声明式、像英语	✅ AI 自动生成
HTML/CSS	网页结构样式	标记语言	✅ AI 自动生成
Python	AI/脚本/数据	极简、易读	⚠️ 可选，遇到就查
TypeScript	前端大项目	JS + 类型标注	⚠️ 可能遇到

---

Vibe Coding 不需要你写，但需要你读

你的目标不是”学会写 Go/JavaScript”，而是：

1. 看懂大意 — AI 生成的代码在做什么？逻辑对不对？
2. 发现明显错误 — 变量名拼错了？查询条件写反了？
3. 能提出修改方向 — “这里应该加个判断”、“这个查询少了个条件”

遇到看不懂的代码，直接问 AI：

这段代码在做什么？帮我逐行解释：

[粘贴代码]

随着项目推进，你会自然越读越快。两周后你会发现，Go 的 if err != nil 和 React 的 useState 就像你每天见面的老朋友。

---

下一步：回到主线，开始 Step 1：思考框架。