哈喽，零点博客的读者们。今天不整虚的，直接来点硬菜。最近在完善博客的数据同步功能，涉及到前端 Javascript 抓取内容，然后传给后端存入 MySQL 的场景。

很多人想用 Python 爬虫，但咱们做前端交互或者轻量级应用时，直接在浏览器端用 JS 写个简单的爬虫逻辑反而更灵活，而且天然支持 JSON 数据解析。下面我就把这几天踩过的坑和实际代码复盘一下。

第一步：前端用 Javascript 提取数据

咱们得先拿到页面的 DOM 结构。假设页面里有一堆文章标题和链接。我直接在控制台跑这段代码：

const data = [];
// 简单的正则表达式提取
const htmlContent = document.body.innerHTML;
const regex = /
(.+?)
/g;
let match;
while ((match = regex.exec(htmlContent)) !== null) {
    data.push({ title: match[1], link: "..." });
}
// 转成 JSON 发给后端
fetch('/api/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
});

这段代码确实糙，但胜在够快。这里 Javascript 的灵活性和正则表达式的强匹配能力体现得淋漓尽致。

第二步：后端接收与 SQL 注入防护

前端的 JSON 数据到了后端（比如 C# 或 PHP），千万别直接字符串拼接 SQL！这是大忌。为了安全，必须用预处理语句。

这里我以 C# 为例，模拟一个简单的接口处理过程：

// 后端伪代码
string sql = "INSERT INTO posts (title, url) VALUES (@title, @url)";
using (SqlCommand cmd = new SqlCommand(sql, connection))
{
    cmd.Parameters.AddWithValue("@title", inputData.Title); // 自动处理转义，防 SQL注入
    cmd.Parameters.AddWithValue("@url", inputData.Link);
    cmd.ExecuteNonQuery();
}

看到没？参数化查询是 MySQL 安全入库的最后一道防线。哪怕你在 JSON 里插了一句恶意的 `' OR 1=1 --`，也不会被执行。

总结与避坑指南

这套流程在开发在线工具或博客系统时非常常见。如果你在开发 EMLOG 插件或者自己的 CMS，切记：

• JS 爬虫：注意跨域问题（CORS），建议直接把数据发给你自己的接口，别直接拿目标站点的数据。
• 数据库：永远不要信任前端传过来的任何 JSON 数据。

希望能帮到正在做爬虫开发的伙伴们，有问题欢迎在评论区交流。