前言：在零点博客折腾的一个小工具
这周在零点博客上折腾了一个在线数据查询的小工具。起初我想着用 PHP 做前端渲染，但考虑到以后可能需要做更复杂的爬虫任务，还是决定使用 C# 来做后端处理，通过接口返回数据，再用前端展示。在这个过程中，我踩了不少关于 MySQL 连接、SQL 注入防护以及 CSS 动态渲染的坑，今天把复盘结果分享出来。
后端：C# 搭建接口与 MySQL 防注入
后端我用了 C# 的 Entity Framework 或者原生 ADO.NET 都可以，重点在于预处理语句的使用。之前看到很多教程直接拼接 SQL，这简直是 SQL 注入的重灾区。
我的做法是定义一个 SQL 参数集合：
// 简单的 C# 伪代码示例
string sql = "SELECT title, content FROM articles WHERE category_id = @id";
using (var command = new SqlCommand(sql, connection)) {
command.Parameters.AddWithValue("@id", categoryId);
// 执行查询...
}
这样无论用户输入什么特殊字符，数据库都不会执行非法操作。数据拿到后，我习惯用 正则表达式 做一遍数据清洗，比如把 HTML 标签提取出来，或者统一日期格式，确保返回给前端的 JSON 数据是干净的。
前端：CSS Grid 实现动态布局
拿到 JSON 数据后，怎么展示呢？在 HTML 中通过 JS 循环生成 DOM 是常规操作。但要说美观和灵活性，还得看 CSS。
我这次用到的是 CSS Grid，配合 CSS 变量 来控制响应式布局。比如在零点博客的工具里，我们有一组用户数据，在不同屏幕尺寸下，卡片的排列方式应该不同。
/* 核心样式代码 */
.data-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.card {
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
padding: 15px;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
这段 CSS 代码非常神奇，它配合 JS 动态生成的 div 卡片，能在不同宽度下自动换行，完全不用写复杂的媒体查询，极大地减少了代码量。
实战案例：数据从库到展示
在开发爬虫或数据聚合工具时，经常会遇到数据格式不统一的问题。比如有的字段是 JSON 字符串，有的直接是文本。这时候我会先用 C# 反序列化为对象，然后在前端用 JS 解析 XML 或 JSON，最后再统一挂载到 DOM 上。
需要注意的是，如果数据量很大（比如上万条记录），千万不要在前端一次性渲染所有 HTML。我的建议是结合 CSS 的 display: none 或者简单的滚动分页，只渲染可视区域的内容，这样体验才像真正的在线工具。
避坑指南与总结
- SQL 注入： 永远不要相信用户输入，必须使用预处理语句。
- CSS 缓存： 开发调试时，浏览器会缓存 CSS 文件。记得在 CSS 文件名后面加个时间戳参数，或者配置 Nginx 禁止缓存。
- JSON 编码： C# 中转 JSON 时注意转义字符，如果涉及特殊符号，可以使用 JavaScriptSerializer 或 Newtonsoft.Json 库。
以上就是我在零点博客开发这个小工具的完整复盘。用 C# 做后端配合 CSS 做前端，开发效率真的比自己手写所有逻辑要高很多。
评论一下吧
取消回复