前言：从零点博客看数据交互的真实场景

作为一名长期在零点博客折腾技术的博主，最近为了给EMLOG博客做一个“热词云”插件，不得不深入研究一下C#后端与前端开发的数据交互。这个过程并不是一帆风顺的，中间踩了不少坑。今天这篇复盘文，就结合C#、MySQL数据库、JSON解析以及HTML前端开发，给大家分享一下我如何在开发过程中做好SQL注入防护，并用正则表达式提取数据。

一、 需求背景与接口设计

我的目标是让一个纯HTML/JS的前端页面，能通过C#后端脚本，从零点博客的MySQL数据库中实时读取文章标签。这听起来简单，但涉及到了接口开发、JSON/XML数据解析以及后端安全。

最初我打算直接在前端连MySQL，后来一想，绝对不行！这简直是给黑客敞开大门。所以我决定搭建一个中间API，由C#处理后端逻辑，前端只负责渲染。

二、 C#后端开发：数据库连接与JSON输出

首先，我们需要用C#连接MySQL。这里我用到了经典的MySql.Data组件。

核心代码逻辑：

using MySql.Data.MySqlClient;
using System.Text.Json; // .NET Core推荐

public string GetArticleTags()
{
    string connStr = "Server=localhost;Database=emlog;User=root;Password=你的密码;CharSet=utf8mb4;";
    using (var conn = new MySqlConnection(connStr))
    {
        conn.Open();
        // 重点：必须使用预处理语句，防止SQL注入
        string sql = "SELECT title, tags FROM emlog_blog WHERE log_password='' LIMIT 10";
        using (var cmd = new MySqlCommand(sql, conn))
        {
            using (var reader = cmd.ExecuteReader())
            {
                var list = new List<dynamic>();
                while (reader.Read())
                {
                    // 将数据库数据转化为对象
                    list.Add(new
                    {
                        title = reader.GetString("title"),
                        tags = reader.GetString("tags")
                    });
                }
                // 返回JSON格式给前端
                return JsonSerializer.Serialize(list);
            }
        }
    }
}

三、 避坑指南：SQL注入防护的深度思考

很多新手开发者在写PHP或者旧版C#时，习惯直接把变量拼接到SQL语句里。比如：

string sql = "SELECT * FROM table WHERE id = " + userId;

如果userId是恶意的`1 OR 1=1`，数据库就被脱裤了。在零点博客的这套方案中，我强制要求自己使用预处理语句（Parameterized Queries）。上面的代码中，`cmd`对象会自动对传入参数进行转义和校验，哪怕输入特殊字符也不会破坏SQL结构。这比任何正则表达式过滤都安全且高效。

四、 正则表达式：从杂乱文本中提取关键词

数据库里的tags字段存的是类似 `技术,随笔,C#` 这样的字符串。但前端展示可能需要格式化为更精确的标签样式。这时就需要用到正则表达式。

实战场景： 提取以逗号分隔的标签。

using System.Text.RegularExpressions;

string rawTags = "C#开发,爬虫,前端开发,零点博客";
string pattern = @"[^,]+"; // 匹配非逗号的字符序列

MatchCollection matches = Regex.Matches(rawTags, pattern);
foreach (Match match in matches)
{
    Console.WriteLine(match.Value.Trim()); // 输出: C#开发, 爬虫, 前端开发...
}

这个小技巧在爬虫开发中同样实用，它能从杂乱无章的网页文本中清洗出干净的数据。

五、 前端开发：接收JSON并渲染界面

后端吐出JSON后，前端开发就轻松多了。我们使用标准的`fetch` API获取数据，然后用DOM操作动态插入HTML。

async function loadTags() {
    try {
        // 调用后端接口
        const response = await fetch('/api/get-tags'); 
        const data = await response.json();

        const container = document.getElementById('tag-container');
        container.innerHTML = ''; // 清空容器

        data.forEach(item => {
            // 创建HTML元素
            const tagDiv = document.createElement('div');
            tagDiv.className = 'tag-item';
            tagDiv.textContent = item.title; 
            container.appendChild(tagDiv);
        });
    } catch (error) {
        console.error('数据加载失败:', error);
    }
}

// 页面加载时执行
loadTags();

六、 总结与复盘

在这套方案中，我体会最深的是：不要为了追求所谓的“酷炫”而牺牲代码的安全性。无论是使用C#还是PHP，SQL注入防护都是底线。

通过这次实践，我不仅实现了零点博客的标签云功能，还理清了爬虫开发、接口开发、前端渲染整个数据链路的逻辑。如果你也在做类似的项目，记得检查你的正则表达式，确保它能处理好各种边界情况，比如空标签或乱码。

希望大家能从这篇关于前端开发与后端安全结合的干货中，获得一点灵感。