从采集到展示：零点博客实战C#解析EMLOG数据，构建前端交互工具

大家好，我是零点博客的技术博主。最近在优化博客后台的前端开发体验时，突发奇想，能不能写个工具把以前EMLOG积累的历史数据重新利用起来？于是我尝试用C#结合MySQL，做了一个轻量级的数据采集与展示工具。整个过程走了不少弯路，今天就来给大伙复盘一下。

一、后端逻辑：C#与MySQL的“安全”握手

首先，我们要确保从MySQL读取数据是安全的。很多新手喜欢直接拼接SQL字符串，这可是SQL注入的重灾区。

// 连接EMLOG数据库示例
string connectionString = "Server=localhost;Database=emlog;User=root;Password=***;";
using (MySqlConnection conn = new MySqlConnection(connectionString))
{
    string sql = "SELECT title, content FROM emlog_article WHERE cid = @cid";
    using (MySqlCommand cmd = new MySqlCommand(sql, conn))
    {
        // 关键点：使用参数化查询防止SQL注入
        cmd.Parameters.AddWithValue("@cid", 1);
        conn.Open();
        // 执行查询逻辑... 
    }
}

在零点博客的实操中，我特意强调了参数化查询。一旦数据库结构变更，或者是有人恶意传入参数，预处理语句能牢牢守住数据安全的大门。

二、数据处理：正则与JSON的实战

EMLOG生成的文章内容是转义后的HTML，前端直接展示很乱。我们需要用正则表达式把正文提取出来，再转化为JSON格式方便传输。

// 提取纯文本内容的正则
string pattern = @"(.*?)";
Regex rgx = new Regex(pattern, RegexOptions.IgnoreCase);
MatchCollection matches = rgx.Matches(htmlContent);

// 构建JSON对象
var result = new {
    title = "历史文章标题",
    excerpt = matches[0].Value // 取第一段作为摘要
};
string jsonOutput = JsonConvert.SerializeObject(result);

这里有个坑：正则写得太宽泛会匹配到脚本标签。实战中一定要限定范围，比如只匹配 `class="post-content"` 里面的内容。

三、前端实现：HTML/CSS/JS的动态渲染

后端搞定数据后，就是前端开发的舞台了。我们用原生JS通过接口获取数据。


  零点博客历史归档

// 调用C#接口
fetch('/api/getBlogData')
  .then(response => response.json())
  .then(data => {
    const list = document.getElementById('blog-list');
    // 动态生成列表
    list.innerHTML = data.items.map(item => `
      
        ${item.title}
        ${item.excerpt}
      
    `).join('');
  });

四、避坑指南与底层拆解

1. 字符编码问题：在C#端查询MySQL时，一定要指定 `Connection Charset` 为 UTF-8，否则前端JS解析JSON时会乱码。这是新手最容易忽略的细节。 2. 接口超时：如果你的数据量大，尽量加上分页参数 `LIMIT 0, 10`，不要一次性把所有内容吐给前端，那样会导致浏览器卡顿。

通过这次实操，不仅复习了C#的数据库操作，更深入理解了接口开发与前端渲染的配合。如果你也在做类似的工具开发，欢迎在零点博客留言交流！