引言：零点博主的折腾日记

最近在维护我的零点博客，手里沉淀了几百篇文章的EMLOG数据。光靠后台面板看实在不够直观，所以我决定用C#写个小工具，爬取数据并做个前端报表。这不仅仅是简单的数据抓取，更是对C#后端开发与前端开发一次极佳的串联实战。废话不多说，直接上干货。

一、C#后端：连接数据库与正则清洗

首先，我们得从EMLOG的MySQL数据库里把数据掏出来。这里有个大坑，也是新手最常犯的：SQL注入。千万别用字符串拼接SQL语句，一定要用预处理语句。

1. 使用MySql.Data连接EMLOG数据库

using MySql.Data.MySqlClient;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;

public class EmlogCrawler
{
    // 爬虫配置
    private static readonly string ConnStr = "Server=localhost;Database=emlog;User=root;Password=123456;CharSet=utf8mb4;";

    public List<Article> GetArticles()
    {
        var list = new List<Article>();
        string sql = "SELECT gid, title, date FROM emlog_blog WHERE status=0 LIMIT 100";

        using (var conn = new MySqlConnection(ConnStr))
        {
            conn.Open();
            using (var cmd = new MySqlCommand(sql, conn))
            {
                // 【重点】使用参数化查询防止SQL注入
                var reader = cmd.ExecuteReader();
                while (reader.Read())
                {
                    var article = new Article
                    {
                        Id = Convert.ToInt32(reader["gid"]),
                        Title = reader["title"].ToString(),
                        Date = Convert.ToDateTime(reader["date"])
                    };
                    list.Add(article);
                }
            }
        }
        return list;
    }
}

2. 正则表达式处理脏数据

爬回来的数据有时候会带HTML标签或者多余空格。这时候就需要正则表达式大显身手了。比如我们要把标题里的标签干掉：

using System.Text.RegularExpressions;

// 在GetArticles方法后处理
foreach (var item in list)
{
    // 清洗标题中的HTML标签
    item.Title = Regex.Replace(item.Title, @"<[^>]+>", "");
    // 清理多余空格
    item.Title = Regex.Replace(item.Title, @"\s+", " ");
}

二、数据接口：JSON格式的流转

C#处理完数据后，需要把它发给前端。为了方便，我们直接返回一个JSON数组。在.NET中，只要对象上有属性，序列化器就能自动搞定。

using System.Text.Json;

public string GetJsonData()
{
    var articles = GetArticles();
    // 转换为JSON字符串
    return JsonSerializer.Serialize(articles);
}

三、前端开发：HTML/CSS/JS的数据可视化

这是前端开发展示的时刻。我准备了一个简单的HTML文件，通过Ajax请求刚才C#生成的JSON，然后用原生JS画个柱状图。不依赖任何庞大的框架，轻量高效。

1. 前端代码结构

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 简单的CSS样式：自适应布局，卡片设计 */
        body { font-family: sans-serif; padding: 20px; background: #f4f4f4; }
        .chart-container { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .bar { height: 30px; background: #3498db; margin: 5px 0; color: white; display: flex; align-items: center; padding: 0 10px; }
        .bar span { font-size: 12px; white-space: nowrap; }
    </style>
</head>
<body>
    <div class="chart-container" id="chart">
        <h3>文章发布趋势 (JSON数据可视化)</h3>
    </div>

    <script>
        // 发起Ajax请求获取C#生成的JSON数据
        fetch('data.ashx') // 假设这是你的WebAPI或Handler地址
            .then(response => response.json())
            .then(data => {
                renderChart(data);
            });

        function renderChart(data) {
            const container = document.getElementById('chart');
            data.forEach(item => {
                // 根据日期时间戳计算高度，简单模拟
                const height = (item.date.getHours() / 24) * 100;
                const barHtml = 
                    <div class="bar" style="width: ${height}%">
                        <span>${item.title.substring(0, 8)}... (ID: ${item.id})</span>
                    </div>;
                container.innerHTML += barHtml;
            });
        }
    </script>
</body>
</html>

四、避坑指南与底层拆解

在实际开发中，你可能会遇到这几个问题：

  1. 编码问题：如果你的数据库是UTF8，但在拼接SQL时没处理好，中文可能会乱码。记得在连接字符串里加上 CharSet=utf8mb4。
  2. JSON解析失败：C#后端返回JSON时，默认属性名可能是PascalCase（PascalCase），而JS想要camelCase（camelCase）。如果JS解析报错，检查一下C#里的 JsonSerializerOptions 设置。
  3. 正则性能：对大量数据遍历时，正则表达式要写得紧凑，避免过度回溯。如果数据量超过百万级，考虑用Lucene.Net这种专业搜索引擎，别硬写正则。

这套组合拳（C#爬虫 + SQL预处理 + 前端可视化）非常适合用来开发类似“在线工具箱”或者“博客数据监控”之类的系统。希望这篇基于零点博客技术栈的复盘能给各位带来启发。想看源码的评论区扣个1，下次单独开更。