为什么你必须动手做项目？一个培训班前端的血泪经验

Merge前先祈祷

2026-02-22 15:07

阅读 1580

大家好，我是 VibeCoding 的讲师小林。三年前，我和你们一样，坐在电脑前刷着“零基础转行程序员”的视频，心里既兴奋又忐忑。我花了三个月背完了所有 JavaScript 语法，做了上百道 LeetCode，甚至能默写出 Vue 的生命周期钩子——可面试时，面试官问我：“你做过什么项目？”我支支吾吾，最后只拿出一个 TodoList。

结果可想而知，挂了。

后来我才明白：技术不是背出来的，是练出来的。今天这篇文章，我想用最直白的话告诉你：为什么技术探索与实践，是你从“培训班学员”蜕变成“合格开发者”的唯一路径。文章会结合 Embedding、实战经验、面试题 这三个关键词，手把手带你理解“做”比“学”更重要。

一、别被“新技术”吓到：Embedding 其实没那么玄

很多新手一听到 “Embedding” 就慌了，以为是什么高深的 AI 黑科技。其实，Embedding 本质上就是“把东西变成数字向量”。

举个生活化的例子：
你去相亲，对方问你“喜欢什么类型？”
你说：“我喜欢温柔、有责任感、爱旅行的人。”
但这些词太抽象了，AI 听不懂。于是，我们把这些特质转换成一组数字，比如：

温柔：0.8
责任感：0.9
爱旅行：0.7

这组数字 [0.8, 0.9, 0.7] 就是一个 Embedding 向量。它把“人”这个抽象概念，变成了计算机能处理的数字。

在前端开发中，Embedding 常用于：

智能搜索（比如用户搜“好看的裙子”，系统也能匹配“连衣裙”）
推荐系统（根据你浏览过的商品，推荐相似商品）
聊天机器人（理解用户意图）

简单代码示例：用现成 API 获取 Embedding

你不需要自己训练模型！现在有很多免费 API 可以直接用。比如 OpenAI 的 Embedding API：

// 假设你已经申请了 OpenAI API Key
const response = await fetch('https://api.openai.com/v1/embeddings', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer YOUR_API_KEY`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    model: "text-embedding-ada-002",
    input: "我喜欢编程"
  })
});

const data = await response.json();
console.log(data.data[0].embedding); // 输出一个长度为 1536 的数字数组

💡 新手提示：别纠结“为什么是 1536 维”？先会用，再理解。就像你学开车，先会踩油门，再研究发动机原理。

二、环境准备：5 分钟搭建你的第一个“智能前端”项目

我们不搞复杂配置！用最轻量的方式跑起来。

步骤 1：安装 Node.js

去 https://nodejs.org 下载 LTS 版本（带绿色推荐标签的），一路下一步安装。

步骤 2：创建项目

mkdir my-first-embedding-app
cd my-first-embedding-app
npm init -y

步骤 3：安装一个轻量 HTTP 服务器（用于本地测试）

npm install -g serve

步骤 4：写一个简单的 HTML 页面

新建 index.html：

<!DOCTYPE html>
<html>
<head>
  <title>我的第一个 Embedding 应用</title>
</head>
<body>
  <h1>输入一句话，看看它的“数字指纹”</h1>
  <input type="text" id="userInput" placeholder="比如：今天天气真好" />
  <button onclick="getEmbedding()">获取 Embedding</button>
  <pre id="result"></pre>

  <script>
    async function getEmbedding() {
      const input = document.getElementById('userInput').value;
      if (!input) return alert('请输入内容！');

      // 注意：实际项目中不要在前端暴露 API Key！这里仅用于演示
      const res = await fetch('https://api.openai.com/v1/embeddings', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer YOUR_API_KEY`, // 替换成你自己的
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          model: "text-embedding-ada-002",
          input: input
        })
      });

      const data = await res.json();
      document.getElementById('result').textContent = 
        JSON.stringify(data.data[0].embedding.slice(0, 10), null, 2) + 
        '\n...（共1536维，此处只显示前10个）';
    }
  </script>
</body>
</html>

步骤 5：启动服务

serve .

然后打开浏览器访问 http://localhost:3000，就能看到效果了！

⚠️ 安全警告：真实项目中，API Key 必须放在后端！前端直接调用会泄露密钥。这个 demo 仅用于学习。

三、实战经验：从“能跑”到“能用”的关键一步

我当初做项目时，最大的误区是：只要代码能跑，就以为完成了。但企业要的是“能解决问题”的产品。

场景：做一个“相似问题推荐”功能

假设你正在开发一个客服系统，用户输入问题，系统自动推荐相似的历史问题。

步骤 1：预计算常见问题的 Embedding

// 假设这是你的常见问题库
const faq = [
  "如何重置密码？",
  "订单怎么取消？",
  "什么时候发货？"
];

// 提前调用 API，把每个问题的 embedding 存下来（实际用数据库）
const faqEmbeddings = await Promise.all(
  faq.map(async (q) => {
    const emb = await getEmbeddingFromAPI(q); // 封装好的函数
    return { question: q, embedding: emb };
  })
);

步骤 2：计算用户输入与 FAQ 的相似度

用 余弦相似度（Cosine Similarity）比较两个向量：

function cosineSimilarity(a, b) {
  let dotProduct = 0;
  let normA = 0;
  let normB = 0;
  for (let i = 0; i < a.length; i++) {
    dotProduct += a[i] * b[i];
    normA += a[i] * a[i];
    normB += b[i] * b[i];
  }
  return dotProduct / (Math.sqrt(normA) * Math.sqrt(normB));
}

// 用户输入后
const userEmb = await getEmbeddingFromAPI(userInput);
const similarities = faqEmbeddings.map(item => ({
  ...item,
  score: cosineSimilarity(userEmb, item.embedding)
}));

// 按相似度排序，取最高分
similarities.sort((a, b) => b.score - a.score);
console.log("最可能的问题：", similarities[0].question);

✅ 这就是实战经验：不是会调 API，而是知道怎么用它解决业务问题。

四、面试题：为什么面试官总问“你做过什么项目”？

我带过 200+ 学员，发现一个残酷真相：面试官不关心你背了多少概念，只关心你能不能干活。

常见面试题 & 如何回答

面试题	错误回答	正确回答（体现实践）
你了解 Embedding 吗？	“知道，就是把文本转成向量。”	“我在客服系统中用它实现了相似问题推荐，准确率提升了 40%。具体做法是……”
遇到过什么技术难点？	“没有，都挺顺利的。”	“前端直接调 Embedding API 会泄露密钥，我后来用 Node.js 写了个代理接口，解决了安全问题。”
为什么选择这个技术？	“网上说它很火。”	“对比了 TF-IDF 和 Embedding，发现后者在语义理解上更准，所以选了它。”

💡 记住：面试题的本质，是考察你是否真的“做过”。没有项目，你就只能背答案；有项目，你就能讲出细节、权衡、改进。

五、新手常踩的坑 & 解决方案

❌ 坑 1：只看教程，不动手

表现：收藏了 100 个“三天学会 AI”的视频，但从没敲过一行代码。
解法：今天就开始写。哪怕只是复制上面的 HTML，改个文字，也算“动手”。

❌ 坑 2：追求“完美项目”

表现：想做个“媲美淘宝”的电商系统，结果卡在登录页三天。
解法：做最小可行产品（MVP）。比如：先实现“输入问题 → 显示最相似 FAQ”，其他功能后续加。

❌ 坑 3：害怕犯错

表现：报错就关掉编辑器，觉得自己“不适合编程”。
解法：错误是学习的信号。我当初每天看 console 报错，慢慢就懂了。记住：所有高手，都是从红字堆里爬出来的。

六、下一步学习建议：从“玩具项目”到“真实项目”

把 API Key 移到后端
用 Express.js 写一个 /api/embedding 接口，前端只调自己的服务器。
加入缓存机制
相同问题不用重复调 API，用 Map 或 Redis 缓存结果。
尝试开源 Embedding 模型
比如 Sentence Transformers，可以在本地运行，避免 API 费用。
参与开源项目
GitHub 上搜 “good first issue”，找带 Embedding 标签的小任务练手。

最后的话

我当初在培训班，也以为“学完课程=找到工作”。直到被现实打脸，才明白：企业招的是“能解决问题的人”，不是“背题机器”。

Embedding 只是一个例子。无论你学 Vue、React、还是 AI，核心逻辑不变：学一点，立刻做一点。哪怕只是改一行代码，也是进步。

技术探索的意义，不在于你知道多少，而在于你创造了多少。

现在，关掉这篇文章，打开你的编辑器——
写你的第一行代码吧。我在下一场面试的 offer 里等你。

作者：VibeCoding 前端讲师小林
专注帮助零基础学员从“培训班”走向“职场”
公众号：VibeCoding（回复“Embedding”获取完整代码）

标签:Embedding实战经验面试题

最热最新

暂无评论

为你推荐

暂无相关推荐