从零开始，我靠一个爬虫+前端小项目走进了开源世界

IDEA重度用户

2026-04-22 22:36

阅读 306

大家好，我是阿哲，一个985毕业的全栈工程师，也是掘金上那个总爱写“手把手教你XXX”的啰嗦博主。今天不讲高深算法，也不聊框架源码，就想跟你聊聊：一个完全没碰过代码的小白，怎么用不到200行代码，做出人生第一个开源项目？

我当初学编程的时候，也卡在“Hello World”后面不知道干啥。直到有一天，我突发奇想：能不能自动抓取豆瓣电影评分，然后做个网页展示出来？于是，我的第一个开源项目诞生了——它只用了两个技术：爬虫 + 前端。今天，我就带你复刻这个过程。

🛠️ 第一步：装好你的“工具箱”

别被吓到！我们要装的东西其实就三个：

工具	作用	安装方式
Python 3.8+	写爬虫用	官网下载安装（勾选“Add to PATH”）
Node.js 16+	写前端用	官网下载安装（带 npm）
VS Code	写代码的编辑器	微软官网免费下载

💡 小贴士：装完后打开终端（Mac/Linux 用 Terminal，Windows 用 CMD 或 PowerShell），输入 python --version 和 node -v，如果显示版本号，说明装好了！

🤔 爬虫和前端，到底是什么？

爬虫：互联网的“小偷”（但合法！）

想象你是个图书管理员，每天要抄录隔壁图书馆的新书目录。爬虫就是帮你自动干这事的程序——它能访问网站，把网页内容“偷”回来，存成数据。

我当初以为爬虫很神秘，结果发现核心就两步：请求网页 → 提取数据。

前端：用户看到的“门面”

前端就是你在浏览器里看到的一切：按钮、文字、图片、动画。我们用 HTML + CSS + JavaScript 来做。

别怕！HTML 是骨架，CSS 是衣服，JS 是行为。三者配合，就能做出漂亮的页面。

🚀 实战：做一个“每日一句名人名言”展示页

我们的目标：

用 Python 爬取一个名言网站的数据
把数据保存成 JSON 文件
用前端读取 JSON 并展示在网页上

整个项目结构如下：

my-quote-project/
├── crawler/
│   └── scraper.py      # 爬虫脚本
├── data/
│   └── quotes.json     # 爬下来的数据
└── frontend/
    ├── index.html      # 主页面
    ├── style.css       # 样式
    └── script.js       # 交互逻辑

第1步：写一个超简单的爬虫

我们要爬的是 http://quotes.toscrape.com —— 这是一个专门给初学者练手的网站（合法且友好！）。

先安装依赖：

pip install requests beautifulsoup4

然后新建 crawler/scraper.py，粘贴以下代码：

import requests
from bs4 import BeautifulSoup
import json
import os

# 创建 data 目录（如果不存在）
os.makedirs('../data', exist_ok=True)

# 发起请求
url = "http://quotes.toscrape.com"
response = requests.get(url)

# 解析网页
soup = BeautifulSoup(response.text, 'html.parser')
quotes = []

# 找到所有名言区块
for quote in soup.find_all('div', class_='quote'):
    text = quote.find('span', class_='text').get_text()
    author = quote.find('small', class_='author').get_text()
    quotes.append({
        'text': text,
        'author': author
    })

# 保存为 JSON
with open('../data/quotes.json', 'w', encoding='utf-8') as f:
    json.dump(quotes, f, ensure_ascii=False, indent=2)

print(f"成功爬取 {len(quotes)} 条名言！")

✅ 运行它！在 crawler 目录下执行：
python scraper.py
如果看到“成功爬取 10 条名言！”，恭喜你，爬虫跑通了！

第2步：用前端展示这些名言

现在，我们有了 data/quotes.json，接下来让它在网页上动起来。

1. 创建 `frontend/index.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>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>✨ 名人名言墙 ✨</h1>
    <div id="quote-list"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

2. 写点样式 `frontend/style.css`

body {
  font-family: "微软雅黑", sans-serif;
  background: #f0f8ff;
  margin: 0;
  padding: 20px;
}
.container {
  max-width: 800px;
  margin: 0 auto;
}
.quote-card {
  background: white;
  padding: 20px;
  margin: 15px 0;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.quote-text {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}
.quote-author {
  font-style: italic;
  color: #666;
}

3. 用 JavaScript 读取 JSON 并渲染

新建 frontend/script.js：

// 由于直接用 file:// 协议无法读取本地 JSON（安全限制）
// 我们用一个小技巧：启动一个本地服务器
// 但为了简化，这里假设你用 VS Code 的 Live Server 插件

fetch('../data/quotes.json')
  .then(response => response.json())
  .then(quotes => {
    const container = document.getElementById('quote-list');
    quotes.forEach(q => {
      const div = document.createElement('div');
      div.className = 'quote-card';
      div.innerHTML = `
        <div class="quote-text">“${q.text}”</div>
        <div class="quote-author">—— ${q.author}</div>
      `;
      container.appendChild(div);
    });
  })
  .catch(err => {
    console.error('加载失败:', err);
    document.getElementById('quote-list').innerHTML = '<p>哎呀，数据加载出错了！</p>';
  });

⚠️ 注意：直接双击 index.html 打开会报错！因为浏览器不允许网页直接读本地文件（安全机制）。
解决方案：在 VS Code 中右键 index.html → “Open with Live Server”（需先安装 Live Server 插件）。

❓ 新手常见问题 & 避坑指南

问题	原因	解决方案
爬虫返回空数据	网站反爬或结构变了	检查网页源码，确认 class 名是否正确；或加 `time.sleep(1)` 避免请求太快
前端读不到 JSON	跨域或路径错误	用 Live Server 启动；检查 JSON 路径是否是 `../data/quotes.json`
中文乱码	编码问题	Python 写文件时加 `encoding='utf-8'`；HTML 加 `<meta charset="UTF-8">`
页面空白无报错	JS 有语法错误	按 F12 打开开发者工具看 Console

我当初就卡在“直接双击 HTML 打不开 JSON”这个问题上，折腾了一晚上，后来才知道要用本地服务器！所以记住：前端开发一定要用 Live Server 或类似工具。

🌱 如何把这个项目变成“开源项目”？

现在你已经有了一个完整的小应用！下一步：

初始化 Git 仓库

git init
git add .
git commit -m "feat: initial commit"

上传到 GitHub
- 在 GitHub 新建一个仓库（比如叫 my-first-opensource-project）
- 按照提示关联本地仓库并推送

写个 README.md

# 我的第一个开源项目

一个用 Python 爬虫 + 前端展示的名人名言墙。

## 如何运行

1. 安装 Python 和 Node.js
2. `cd crawler && python scraper.py`
3. 在 VS Code 中用 Live Server 打开 `frontend/index.html`

打个标签（可选）
```
git tag v1.0.0
git push --tags
```

当你点击“Public”按钮那一刻，你就正式踏入开源世界了！🎉

🔜 下一步学什么？

这个项目只是起点。如果你想继续深入：

爬虫进阶：学 Scrapy 框架、处理登录、绕过反爬（注意合法合规！）
前端升级：用 Vue 或 React 重构页面，实现“点击换一句”
全栈整合：用 Flask/Django 提供 API，前端通过接口获取数据（告别 JSON 文件）
部署上线：把项目部署到 Vercel（前端）+ Railway（后端），让全世界都能访问

最后说两句

我写这篇教程，是因为记得自己第一次做出“能跑起来的东西”时那种狂喜。技术没有那么可怕，每一个大神，都是从“爬一行数据、写一个 div”开始的。

你的第一个项目不需要完美，甚至不需要有人 star。重要的是：你动手了，你完成了，你开源了。

现在，去创建你的文件夹吧！我在 GitHub 上等你 PR 😄

项目完整代码已开源：github.com/yourname/my-first-opensource-project（记得替换成你的用户名！）

标签:爬虫前端

最热最新

暂无评论

为你推荐

暂无相关推荐

从零开始，我靠一个爬虫+前端小项目走进了开源世界

🛠️ 第一步：装好你的“工具箱”

🤔 爬虫和前端，到底是什么？

爬虫：互联网的“小偷”（但合法！）

前端：用户看到的“门面”

🚀 实战：做一个“每日一句名人名言”展示页

第1步：写一个超简单的爬虫

第2步：用前端展示这些名言

1. 创建 `frontend/index.html`

2. 写点样式 `frontend/style.css`

3. 用 JavaScript 读取 JSON 并渲染

❓ 新手常见问题 & 避坑指南

🌱 如何把这个项目变成“开源项目”？

🔜 下一步学什么？

最后说两句

评论 0

为你推荐

精选内容

从零开始，我靠一个爬虫+前端小项目走进了开源世界

🛠️ 第一步：装好你的“工具箱”

🤔 爬虫和前端，到底是什么？

爬虫：互联网的“小偷”（但合法！）

前端：用户看到的“门面”

🚀 实战：做一个“每日一句名人名言”展示页

第1步：写一个超简单的爬虫

第2步：用前端展示这些名言

1. 创建 frontend/index.html

2. 写点样式 frontend/style.css

3. 用 JavaScript 读取 JSON 并渲染

❓ 新手常见问题 & 避坑指南

🌱 如何把这个项目变成“开源项目”？

🔜 下一步学什么？

最后说两句

评论 0

为你推荐

相关推荐

精选内容

1. 创建 `frontend/index.html`

2. 写点样式 `frontend/style.css`