<!DOCTYPE html>

零点博客实战：前端数据交互与安全解析指南

零点博客实战：手写JS解析PHP接口数据，前端防注入与正则清洗全流程

大家好，我是零点博客的博主。今天不整虚的，直接带着大家复盘一次我们在开发过程中遇到的实际痛点：如何在EMLOG等PHP环境下，结合前端开发技巧，优雅地处理后端数据，并确保代码的安全性。

一、为什么我们要前后端分离做数据交互？

以前我们可能习惯直接在模板里写PHP代码输出HTML，但在做接口开发和复用组件时，JSON格式数据的优势就出来了。对于零点博客而言，如果我们要做一个独立的“热门文章”模块，纯前端通过 AJAX 请求后端接口获取 JSON 数据，再进行渲染，这是最主流的做法。

核心思路： 后端输出标准 JSON，前端负责 DOM 操作与正则清洗，中间层做好安全隔离。

二、后端防线：PHP预处理与SQL注入防护

很多人觉得防SQL注入只是后端的事，其实作为前端开发者，理解后端的逻辑能避免很多数据渲染错误。在EMLOG或其他PHP框架中，获取数据时必须使用预处理语句。

// 模拟后端PHP代码片段
$sql = "SELECT title, content FROM emlog_article WHERE uid = ?";
$stmt = $pdo->prepare($sql); // 关键点：预处理
$stmt->execute([$userId]);   // 参数绑定，防止SQL注入
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($result); // 输出JSON供前端调用

这里一定要强调：除非是特殊的注入式测试，否则永远不要相信用户输入，预处理语句是绕不开的保命符。

三、前端实战：JS解析JSON与正则表达式应用

拿到后端吐出来的 JSON 数据，前端的任务就是解析并展示。这里涉及到JSON/XML数据解析。考虑到性能，首选原生JS解析JSON。

1. 获取数据

fetch('/api/get_articles.php')
  .then(response => response.json())
  .then(data => {
      // 这里的data就是解析后的JavaScript对象数组
      renderArticles(data);
  })
  .catch(err => console.error('数据加载失败:', err));

2. 数据清洗：正则表达式的妙用

从数据库取出来的内容往往包含HTML标签或者换行符。在展示时，我们需要正则表达式来去除多余标签，或者截取摘要。

function getSummary(htmlContent) {
    // 1. 使用正则提取纯文本
    let tempDiv = document.createElement("div");
    tempDiv.innerHTML = htmlContent;
    let text = tempDiv.textContent || tempDiv.innerText || "";

    // 2. 去除多余空格和换行
    let cleanText = text.replace(/\s+/g, " ").trim();

    // 3. 截取前100个字符
    return cleanText.length > 100 ? cleanText.substring(0, 100) + "..." : cleanText;
}

四、避坑指南与底层拆解

常见问题	排查与解决方案
数据显示乱码	检查数据库编码(utf8mb4)与HTML meta charset是否一致，PHP输出header("Content-Type: application/json; charset=utf-8")。
XSS跨站脚本攻击	即使用户输入了 `<script>alert(1)</script>`，在插入DOM时务必经过转义。这是前端安全的重要组成部分。
JavaScript性能	如果数据量极大，避免在循环中频繁操作DOM，尽量使用DocumentFragment或虚拟列表。

通过这次在零点博客的实操，我深刻体会到：前端开发不仅仅是切图，更需要有C#或PHP的全局视野，理解数据流向，才能写出健壮的代码。下次我们将尝试开发一个纯前端的在线工具，利用Canvas实现绘图功能，敬请期待。