C# 后端实战：手把手教你开发一个安全易用的 JSON 在线工具

大家好，我是零点博客的开发老K。最近在整理 EMLOG 插件时，发现市面上通用的在线工具要么广告多，要么不够稳定。于是决定利用业余时间，用 **C#** 结合前端技术，从零开发一个轻量级的 JSON 在线工具。

今天把这次 **在线工具开发** 的全过程复盘一下，包含源码案例和避坑指南，希望能帮到同样在折腾技术的小白。

一、 需求分析与技术选型

工具的核心功能很简单：JSON 格式化、压缩、校验。考虑到需要兼顾高性能和稳定性，我们采用前后端分离的思想：

  • 前端： HTML5 + CSS3 + JavaScript（负责交互与正则校验）。
  • 后端： C# ASP.NET Core（负责复杂的逻辑运算与数据持久化，如保存历史记录）。
  • 数据库： MySQL（存储用户的生成记录）。

二、 前端实现：正则与 UI 交互

前端主要负责渲染和基础的正则校验。不要小看正则，它是写工具时的利器。




    JSON 在线工具 - 零点博客
    


    

        
JSON 格式化工具

三、 后端 C# 实现：SQL 注入防护与数据处理

很多人以为前端做完就结束了，其实最核心的数据验证在服务端。比如我们要增加一个“保存历史”的功能，这里就涉及到了 **MySQL** 数据库操作。

切记：永远不要拼接 SQL 语句！

// C# 后端接口示例
[HttpPost]
public IActionResult SaveHistory(string jsonString)
{
    // 避坑指南：这里不能直接拼接，必须使用参数化查询
    string sql = "INSERT INTO json_history (content, create_time) VALUES (@json, @time)";

    using (var conn = new MySqlConnection(ConfigurationManager.ConnectionStrings["DbConn"].ConnectionString))
    {
        var cmd = new MySqlCommand(sql, conn);
        cmd.Parameters.AddWithValue("@json", jsonString); // 防止 SQL 注入
        cmd.Parameters.AddWithValue("@time", DateTime.Now);
        conn.Open();
        cmd.ExecuteNonQuery();
    }
    return Ok("保存成功");
}

上面的代码中，`AddWithValue` 有效地隔离了用户输入，防止了 **SQL 注入防护** 失守，这是写后端时最基础也是最重要的一环。

四、 避坑指南与底层拆解

在这次 **在线工具开发** 中，我踩过几个坑，这里顺便分享出来：

  1. XSS 跨站脚本攻击： 在将 JSON 渲染到前端页面时，如果 JSON 中包含 `