零点博客技术复盘：C#后端接口构建与前端开发的极致安全实战

大家好，我是零点。最近在维护零点博客时，发现旧版的数据清洗逻辑非常薄弱，且接口安全性堪忧。这次开发新模块，我决定把C#后端开发的严谨性引入进来，从爬虫抓取到数据库存储，再到最终的前端开发展示，全链路打通。

一、需求背景：为什么要搞这一套？

为了给读者提供更丰富的资讯，我们需要从第三方爬取一些技术文档的摘要，更新到我们的EMLOG博客中。这听起来很简单，但中间涉及到了JSON/XML数据解析、正则表达式清洗脏数据，以及最关键的SQL注入防护。

二、后端开发：C#接口与数据清洗

首先，我们使用C#通过HttpClient去请求第三方接口，拿到原始的HTML或JSON数据。这里有个坑：对方返回的HTML里有很多多余的script标签和广告代码，直接存数据库绝对不行。

1. 正则表达式清洗

我写了一个简单的正则表达式类来提取纯文本：

// C# 正则提取示例
public static string CleanContent(string html)
{
    // 移除HTML标签，只保留文本
    Regex regex = new Regex(@"<[^>]+>", RegexOptions.IgnoreCase);
    return regex.Replace(html, string.Empty);
}

2. 接口开发与数据返回

清洗后的数据，我们要封装成JSON格式返回给前端。这里注意不要泄露敏感字段，只返回展示所需的数据。

// 接口构建
public class ArticleData
{
    public string Title { get; set; }
    public string Summary { get; set; }
    public DateTime PubTime { get; set; }
}

三、核心避坑：SQL注入防护与预处理

在将数据存入MySQL数据库时，我以前习惯直接拼接SQL字符串，比如 `string sql = "insert into blog(title) values('" + title + "')"`。这种方式在前端开发人员输入特殊字符时，会直接炸库。

这次我强制使用了预处理语句：

using (MySqlConnection conn = new MySqlConnection(connString))
using (MySqlCommand cmd = new MySqlCommand("INSERT INTO blog (title, content) VALUES (@title, @content)", conn))
{
    cmd.Parameters.AddWithValue("@title", title); // 自动转义，彻底杜绝注入
    cmd.Parameters.AddWithValue("@content", content);
    conn.Open();
    cmd.ExecuteNonQuery();
}

看到没？这种写法无论前端开发传过来什么奇怪的符号，MySQL都会把它们当成普通的字符串处理，安全性大大提升。

四、前端落地：HTML/CSS/JS 的交互美学

数据安全了，展示出来的界面也要硬核。这次的前端开发，我采用了经典的EMLOG主题布局，结合现代化的CSS3。

1. 布局结构

首页采用了左侧导航、右侧内容的经典布局。用CSS Grid搞定响应式，确保手机端也能完美阅读。

<div class="container">
    <aside class="sidebar">
        <!-- 侧边栏工具 -->
    </aside>
    <main class="content">
        <article class="post">
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
    </main>
</div>

2. JS动态加载

我不喜欢静态写死，而是通过JS调用刚才C#写好的接口，把前端开发的渲染和数据绑定分离。这样后台更新了内容，页面无需刷新就能看到变化。

fetch('/api/getLatestArticles')
  .then(response => response.json())
  .then(data => {
      const list = document.getElementById('article-list');
      data.forEach(item => {
          list.innerHTML += `<div class="item">${item.title}</div>`;
      });
  });

五、总结

这次开发不仅完善了零点博客的内容，更重要的是建立了一套安全规范。从C#后端的SQL预处理，到前端开发的DOM操作，每一步都要经得起推敲。如果你也在做EMLOG主题或者独立博客开发，记住：安全第一，正则不乱用，预处理必须用**。