零点博客技术复盘：C#后端驱动的前端开发实战与爬虫工具部署指南

作者：零点博客 | 分类：后端开发 / 前端开发 / EMLOG实战

说实话，在零点博客折腾 EMLOG 这段时间，我发现纯静态的 HTML/CSS 在前端开发里真有点抓不住用户。为了让咱们的博客更酷炫，也为了以后扩展那些在线工具，我最近搞了个大动作：把C#后端开发的威力引入进来，重新设计了数据的交互逻辑。

今天不想讲空话，直接把这次重构的底层逻辑和踩过的坑复盘一下。咱们从MySQL数据库查询到最终的 JSON 数据展示，手把手带你玩转这套全栈流程。

一、为什么要折腾这个？痛点在哪？

以前 EMLOG 的文章列表都是硬编码在模板里的。但如果我要加一个正则表达式检测工具，或者爬虫开发的数据展示，前端就得写死 HTML。

最好的方案是：前端只管显示（HTML/CSS/JS），后端管计算和存取（C# + MySQL）。这样以后我要加个新功能，前端页面不动，改后端接口就行。这就是我们常说的 RESTful 接口开发思路。

二、核心难点：后端接口的稳健性（SQL注入防护）

在写 C# 后端接口时，我特意去翻了文档，把SQL注入防护这事儿给搞透了。以前用字符串拼接 SQL 是大忌，现在必须用预处理语句。

这是我在零点博客项目里写的一段 C# 代码（针对 MySQL）：

// 这是一个简单的数据获取接口
string sql = "SELECT id, title, content FROM emlog_blog WHERE status = 1 LIMIT 10";

using (MySqlConnection conn = new MySqlConnection(connectionString))
{
    conn.Open();
    // 关键点：使用 MySqlCommand 和 Parameters，彻底杜绝 SQL 注入
    using (MySqlCommand cmd = new MySqlCommand(sql, conn))
    {
        // 添加参数化查询，安全第一
        cmd.Parameters.AddWithValue("@Limit", 10);

        using (MySqlDataReader reader = cmd.ExecuteReader())
        {
            while (reader.Read())
            {
                // 构造 JSON 对象，方便前端解析
                var blogData = new {
                    id = reader["id"],
                    title = reader["title"].ToString(),
                    // 这里可以配合正则对内容做简单的清洗，防止 XSS 攻击
                    safeContent = Regex.Replace(reader["content"].ToString(), @"<[^>]+>", string.Empty)
                };
                // 这里输出 JSON 字符串，前端通过 fetch 请求获取
                Console.WriteLine(JsonConvert.SerializeObject(blogData)); 
            }
        }
    }
}

这段代码里，大家注意看 `Regex` 的应用，这是做爬虫开发或者内容清洗时的利器，能有效过滤掉 HTML 标签，只保留纯文本。

三、前端落地：HTML/CSS/JS 的丝滑交互

后端把数据处理好，变成 JSON/XML 格式扔给前端，接下来就是前端开发的秀场了。我这次没用 jQuery，直接上原生 JavaScript (ES6+)。

前端的核心逻辑就是两步：发请求 -> 渲染 DOM。

// 假设后端接口地址是 /api/getRecentPosts
async function loadBlogData() {
    try {
        const response = await fetch('/api/getRecentPosts');
        // 检查 HTTP 状态码
        if (!response.ok) throw new Error('网络请求异常');

        const data = await response.json(); // JSON 数据解析
        const container = document.getElementById('blog-list');

        container.innerHTML = ''; // 清空旧数据

        data.forEach(item => {
            // 动态生成 HTML 元素
            const card = document.createElement('div');
            card.className = 'post-card';
            card.innerHTML = `${item.title}
${item.safeContent}`;
            container.appendChild(card);
        });
    } catch (error) {
        console.error('获取数据失败:', error);
        container.innerHTML = '数据加载失败，请稍后重试。';
    }
}

// 页面加载完成后执行
loadBlogData();

四、实战避坑指南：我在调试时遇到的坑

跨域问题 (CORS)： 我刚开始写完前端死活调不通。后来才发现 C# 后端要开启 CORS 支持，不然浏览器会拦截 JSON 请求。解决办法是在 WebApi 配置里加中间件。
数据类型不一致： MySQL 里 ID 是整数，但我前端 JavaScript 一直报错。后来发现后端返回的 JSON 里，数字被自动加上了引号变成了字符串。处理办法是在前端解析时，确保类型转换正确。
模板缓存： 修改了 PHP 模板或 C# 接口，EMLOG 或 IIS 经常不生效。记得清除一下模板缓存或重启一下服务。

五、总结

这次在零点博客的折腾，让我深刻理解了接口开发的重要性。通过 C# 结合 MySQL，配合严谨的SQL注入防护，我们不仅提高了安全性，还让前端开发更加灵活。如果你也在做类似的博客系统，真心建议试试这个架构。下次咱们再来聊聊怎么写一个在线工具，直接集成这个接口。