引言:零点博客的二次开发思考

最近在维护零点博客时,为了丰富站点内容,我决定手写一个简单的“图文采集”接口。这个需求虽然看似基础,但涉及到C#后端数据处理、MySQL安全连接以及前端JS解析JSON等多个环节。作为博主,我不喜欢拿来做SEO泛泛而谈,今天直接把我在开发过程中踩过的坑和最终的解决方案复盘给大家,确保代码可以直接落地。

一、 架构设计:C#后端与MySQL交互

我们采用 C# 作为后端开发语言,主要是因为其在处理高并发接口和字符串处理上的性能优势。为了不让零点博客增加额外的服务器负担,我选择在本地(或独立服务)开发一个简单的Web API,只返回纯 JSON 数据。

核心痛点: 直接拼接 SQL 语句在处理用户输入时极其危险,且容易发生 SQL 注入。

避坑指南:使用预处理语句

在下面的代码中,我强烈建议大家使用 SqlCommand 的参数化查询,而不是字符串拼接。这是所有后端开发者的底线。

// 模拟获取文章列表的接口逻辑
public string GetArticleJson(int id)
{
    string query = "SELECT title, content FROM emlog_article WHERE gid = @gid";

    using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["DbConn"].ConnectionString))
    {
        conn.Open();
        // 关键点:使用参数 @gid 而不是直接把变量塞进SQL
        using (SqlCommand cmd = new SqlCommand(query, conn))
        {
            cmd.Parameters.AddWithValue("@gid", id);

            using (SqlDataReader reader = cmd.ExecuteReader())
            {
                if (reader.Read())
                {
                    // 构建返回给前端的JSON字符串
                    return "{\"title\":\"" + reader["title"].ToString() + "\",\"content\":\"" + reader["content"].ToString() + "\"}";
                }
            }
        }
    }
    return "{}";
}

二、 前端交互:JavaScript解析JSON与正则清洗

后端返回的数据通常是带有转义字符的 JSON 字符串。在 HTML/CSS/JS 前端开发中,我们需要优雅地解析它并展示在零点博客的模板中。

核心痛点: 直接插入 HTML 可能会导致 XSS 攻击,或者数据格式不规范需要手动清洗。

实战:异步请求与正则表达式

这里使用原生 fetch API 发起请求,配合 正则表达式 提取关键信息。

function loadContent(articleId) {
    fetch(`https://api.0point-blog.com/get?id=${articleId}`)
    .then(response => response.text())
    .then(data => {
        // 1. 解析 JSON 字符串
        const jsonStr = data.replace(/"/g, '"'); // 简单的替换处理
        const dataObj = JSON.parse(jsonStr);

        // 2. 使用正则表达式清洗内容中的非法标签
        const cleanContent = dataObj.content.replace(/<[^>]+>/g, "");

        // 3. 渲染到 DOM
        document.getElementById('blog-content').innerText = cleanContent;
    })
    .catch(err => console.error('接口调用失败:', err));
}

三、 完整流程与总结

整个开发过程其实并不复杂,但如果不注意细节,很容易在数据解析或安全防护上出问题。在我的零点博客实战中,这套方案实现了:

  • 后端使用 C# + MySQL 实现了安全的接口服务。
  • 前端通过 JS 无缝获取数据,避免了页面刷新。
  • 使用正则表达式解决了乱码和标签残留问题。

如果你正在做类似的在线工具开发,记得时刻绷紧“安全”这根弦。希望这篇基于零点博客架构的实战复盘,能为你提供一些 C# 与前端交互的灵感。