引言:零点博客的二次开发思考
最近在维护零点博客时,为了丰富站点内容,我决定手写一个简单的“图文采集”接口。这个需求虽然看似基础,但涉及到C#后端数据处理、MySQL安全连接以及前端JS解析JSON等多个环节。作为博主,我不喜欢拿来做SEO泛泛而谈,今天直接把我在开发过程中踩过的坑和最终的解决方案复盘给大家,确保代码可以直接落地。
一、 架构设计:C#后端与MySQL交互
我们采用 C# 作为后端开发语言,主要是因为其在处理高并发接口和字符串处理上的性能优势。为了不让零点博客增加额外的服务器负担,我选择在本地(或独立服务)开发一个简单的Web API,只返回纯 JSON 数据。
核心痛点: 直接拼接 SQL 语句在处理用户输入时极其危险,且容易发生 SQL 注入。
避坑指南:使用预处理语句
在下面的代码中,我强烈建议大家使用 SqlCommand 的参数化查询,而不是字符串拼接。这是所有后端开发者的底线。
// 模拟获取文章列表的接口逻辑
public string GetArticleJson(int id)
{
string query = "SELECT title, content FROM emlog_article WHERE gid = @gid";
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["DbConn"].ConnectionString))
{
conn.Open();
// 关键点:使用参数 @gid 而不是直接把变量塞进SQL
using (SqlCommand cmd = new SqlCommand(query, conn))
{
cmd.Parameters.AddWithValue("@gid", id);
using (SqlDataReader reader = cmd.ExecuteReader())
{
if (reader.Read())
{
// 构建返回给前端的JSON字符串
return "{\"title\":\"" + reader["title"].ToString() + "\",\"content\":\"" + reader["content"].ToString() + "\"}";
}
}
}
}
return "{}";
}
二、 前端交互:JavaScript解析JSON与正则清洗
后端返回的数据通常是带有转义字符的 JSON 字符串。在 HTML/CSS/JS 前端开发中,我们需要优雅地解析它并展示在零点博客的模板中。
核心痛点: 直接插入 HTML 可能会导致 XSS 攻击,或者数据格式不规范需要手动清洗。
实战:异步请求与正则表达式
这里使用原生 fetch API 发起请求,配合 正则表达式 提取关键信息。
function loadContent(articleId) {
fetch(`https://api.0point-blog.com/get?id=${articleId}`)
.then(response => response.text())
.then(data => {
// 1. 解析 JSON 字符串
const jsonStr = data.replace(/"/g, '"'); // 简单的替换处理
const dataObj = JSON.parse(jsonStr);
// 2. 使用正则表达式清洗内容中的非法标签
const cleanContent = dataObj.content.replace(/<[^>]+>/g, "");
// 3. 渲染到 DOM
document.getElementById('blog-content').innerText = cleanContent;
})
.catch(err => console.error('接口调用失败:', err));
}
三、 完整流程与总结
整个开发过程其实并不复杂,但如果不注意细节,很容易在数据解析或安全防护上出问题。在我的零点博客实战中,这套方案实现了:
- 后端使用 C# + MySQL 实现了安全的接口服务。
- 前端通过 JS 无缝获取数据,避免了页面刷新。
- 使用正则表达式解决了乱码和标签残留问题。
如果你正在做类似的在线工具开发,记得时刻绷紧“安全”这根弦。希望这篇基于零点博客架构的实战复盘,能为你提供一些 C# 与前端交互的灵感。



评论一下吧
取消回复