零点博客实战复盘：C#后端API与HTML前端交互开发，JSON数据解析及防SQL注入全流程

<!DOCTYPE html>

前端开发 C# MySQL 零点博客

大家好，我是零点博客的主理人。最近在重构手头的几个在线工具，发现单纯的后端逻辑不够直观，必须结合好的前端开发交互才能真正赋能用户。今天就以一个“在线数据加密工具”为例，带大家复盘一下从C#后端API设计到HTML/CSS/JS前端展示的完整链路，顺便聊聊大家最关心的SQL注入防护问题。

一、后端逻辑与数据库交互

我们的工具需要一个存储用户历史记录的接口。为了避免安全问题，我坚决不使用字符串拼接SQL，而是采用了预处理语句（Parameterized Query）。在C#中，利用SqlCommand配合SqlParameter是最稳妥的方式。

核心逻辑很简单：接收前端传来的JSON数据，存入MySQL，并返回处理状态。

using (SqlConnection conn = new SqlConnection(connStr))
{
    conn.Open();
    string sql = "INSERT INTO tool_records (username, content, date) VALUES (@u, @c, GETDATE())";
    using (SqlCommand cmd = new SqlCommand(sql, conn))
    {
        // 关键点：使用参数化查询防止SQL注入
        cmd.Parameters.AddWithValue("@u", inputJson.username);
        cmd.Parameters.AddWithValue("@c", inputJson.content);
        cmd.ExecuteNonQuery();
    }
}

二、接口开发与JSON数据交互

后端做好了，接下来是接口开发。为了前后端分离，我们通常直接返回JSON格式。在C#中，Newtonsoft.Json是处理JSON的首选。这里不需要像PHP那样手动构造XML，直接返回一个匿名对象即可：

var response = new { 
    status = "success", 
    data = "加密完成", 
    timestamp = DateTime.Now 
};
return JsonConvert.SerializeObject(response);

前端通过`fetch`获取这个字符串并解析为JS对象，非常方便。

三、前端开发：HTML/CSS与正则校验

前端开发中最耗时的是交互细节。为了防止用户输入非法字符导致SQL错误或页面崩溃，我引入了正则表达式进行前端实时校验。

function validateInput(str) {
    // 仅允许字母、数字和中文
    const regex = /^[a-zA-Z0-9一-龥]+$/;
    return regex.test(str);
}

配合CSS，我设计了一个简单的暗黑模式UI。当后端返回500错误时，前端通过JS捕获异常，并显示友好的提示框，而不是让浏览器直接白屏。

四、避坑指南与总结

在整个开发过程中，我发现几个常见的坑：

忘记在数据库连接字符串中设置`Pooling=False`，导致在高并发下连接池耗尽。
前端跨域（CORS）问题，切记在后端中间件中配置允许跨域。

通过这次在零点博客的落地，我深刻体会到，好的工具不仅要后台逻辑强（C#+MySQL防注入），更要前台体验好（HTML/JS）。希望这些经验能帮到大家！