零点博客实战复盘：C#后端结合EMLOG的前端开发与JSON解析避坑指南

大家好，我是零点博客的老博主。今天不整虚的，直接拿昨天刚上线的“在线正则表达式测试工具”做复盘。在这个项目里，我切身体会到了前端开发中数据交互的精髓，以及后端 **C#** 与 **EMLOG** 模板结合时的那些细节。

一、 需求背景：数据交互是核心

我们常说的前端开发，说白了就是数据可视化。这次我打算用 **C#** 写一个轻量级爬虫，从第三方接口抓取数据，然后通过 **JSON** 或 **XML** 格式传给 **EMLOG** 搭建的个人博客，再由前端 JS 解析渲染。整个流程涉及到了后端逻辑、数据库操作以及视图层渲染。

二、 后端逻辑：C#与MySQL的底层拆解

在后端，我选用了 **C#**，因为它在处理强类型数据和并发请求时比较稳。这里必须强调一点：直接拼接 SQL 语句是大忌，我踩过 **SQL注入防护** 的坑。

正确姿势是使用预处理语句。比如查询用户数据时：

using (MySqlConnection conn = new MySqlConnection(connString))
{
    conn.Open();
    string sql = "SELECT * FROM posts WHERE title LIKE @keyword";
    using (MySqlCommand cmd = new MySqlCommand(sql, conn))
    {
        cmd.Parameters.AddWithValue("@keyword", "%" + searchKey + "%");
        // ... 执行查询 
    }
}

这行代码比我以前直接写字符串拼接要安全得多。除此之外，在处理爬虫返回的 HTML 或 JSON 数据时，**正则表达式**是处理非结构化数据的神器，但一定要写好测试用例，否则容易匹配失败。

三、 前端实战：HTML/CSS/JS的落地应用

数据拿到了，怎么展示？这才是前端开发的战场。在 **EMLOG** 的模板文件中，我使用了原生 JS 来解析后端传来的 JSON 字符串。

这里有个坑：很多新手拿到 JSON 字符串直接操作，结果报错。必须先执行 JSON.parse()。下面的代码展示了如何动态渲染列表：

function renderData(data) {
    const listContainer = document.getElementById('result-list');
    listContainer.innerHTML = '';

    if (!data || data.length === 0) {
        listContainer.innerHTML = '
未找到相关数据
';
        return;
    }

    data.forEach(item => {
        const div = document.createElement('div');
        div.className = 'item-box';
        div.innerHTML = `
${item.title}
${item.content}
`;
        listContainer.appendChild(div);
    });
}

配合 **CSS**，我写了几个简单的 Flex 布局样式，确保工具在不同屏幕尺寸下都能自适应。整个过程不依赖任何框架，反而更锻炼功底。

四、 总结与避坑指南

经过这次实操，我发现做好一个在线工具，底层逻辑比花哨的特效更重要：

  1. 安全性第一： 永远不要相信用户输入，所有后端交互务必做参数校验和 **SQL注入防护**。
  2. 数据格式规范： 前后端约定好使用 JSON，尽量少用 XML，解析起来更省心。
  3. 调试耐心： 爬虫开发经常会遇到编码问题，记得统一使用 UTF-8。

如果你也在做类似项目，欢迎在零点博客评论区交流代码，大家一起避坑。

原文链接：零点博客实战案例