实战复盘：C#后端与前端交互中的JSON解析及SQL注入防护实战
大家好，我是零点博客的博主。最近在折腾全栈开发，写了几篇关于 前端开发 和后端结合的文章，后台收到了不少评论。今天不整虚的，直接把最近开发一个在线JSON格式化工具时的真实踩坑经历和底层逻辑给大伙拆解一下。
一、 需求背景与坑点初现
需求其实很简单：我们想在前端做一个工具，直接调后端接口获取数据，解析后展示。起初我在写 C# 后端时，习惯性地用字符串拼接 SQL 语句，觉得写起来快。结果在测试时，如果不小心传入了特殊字符，直接就报错了，排查半天才发现是SQL注入的问题。
所以，今天这篇文章的核心就是：如何在不牺牲性能的前提下，既写好C#后端接口，又保证前端JS解析数据的安全性与稳定性。
二、 后端：C#接口与SQL注入的硬核避坑
在 C# 开发中，如果你用的是 ADO.NET，千万别再手动拼接 SQL 字符串了（比如 `"SELECT * FROM table WHERE name = '" + name + "'"`）。一旦 name 输入 `" OR 1=1 --`，你的数据库就炸了。
我现在的做法是直接使用预处理语句。看下面这段源码：
// 这里是C#后端伪代码
string sql = "SELECT * FROM users WHERE username = @Username";
using (SqlCommand cmd = new SqlCommand(sql, connection))
{
// 关键步骤：使用参数化
cmd.Parameters.AddWithValue("@Username", userInput);
// ... 执行逻辑
}
这是底层开发的基本功。不仅防止注入，还能让数据库优化器更高效地执行查询。如果你用的是 PHP（比如零点博客常用的环境），也要记得用 PDO 的 prepare() 方法。
三、 前端：HTML/CSS/JS 下的 JSON 解析艺术
拿到后端返回的 JSON 数据，前端开发的第一步就是解析。很多新手喜欢用 `eval()` 或者 `new Function()`，这其实是有风险的。最稳妥的方式是原生 JSON.parse()。
在实际的实战中，我通常会写一个辅助函数来处理可能的报错：
// 前端JS解析函数
function parseJsonSafe(jsonStr) {
try {
return JSON.parse(jsonStr);
} catch (e) {
console.error("JSON格式错误，可能是爬虫抓取数据不规范", e);
return null;
}
}
配合 CSS，我们用 Flexbox 布局美化展示效果。确保在拿到数据前，给用户一个“加载中”的提示，这是提升用户体验的关键细节。
四、 进阶技巧：正则表达式与爬虫开发
除了数据展示，我们还做了个正则表达式测试工具。这里就涉及到爬虫开发的逻辑了。如果后端没有现成的 API，我们可能需要用 C# 的 HtmlAgilityPack 或者 PHP 的 Curl 来获取网页源码。
拿到 HTML 源码后，再用正则表达式提取我们想要的信息。比如从 EMLOG 博客的文章列表中提取标题和链接：
// 正则示例：提取标题
string pattern = "<a[^>]+class=\"post-title\"[^>]*>(.*?)</a>";
这个环节非常考验逻辑思维，尤其是转义字符的处理，稍微不注意就会导致匹配失败。
五、 总结与避坑指南
回顾这次开发，最大的收获不是学会了多少新语法，而是明白了安全和健壮性的重要性。
- 避坑1： 前端拼接字符串导致 XSS 攻击，务必使用 DOMPurify 或转义函数处理 HTML。
- 避坑2： C# 后端不要直接暴露表结构，通过 DTO（数据传输对象）进行数据清洗。
- 避坑3： 在处理大量数据时，JSON 的体积会很大，注意在前端做分页或虚拟滚动。
如果你在做类似零点博客这类技术博客开发，或者在做接口对接，这些点一定要记得。以上就是本次的复盘，希望对正在学习 前端开发 的朋友有所帮助，有疑问欢迎在评论区留言。
评论一下吧
取消回复