一、前置准备：工具与环境
本次系统使用纯前端原生技术+Node.js轻后端实现，无需复杂框架，覆盖以下前置步骤：
1. 本地环境检查与安装
- 检查Node.js是否安装：打开终端（Windows用CMD/PowerShell，Mac/Linux用Terminal），输入
node -v，若显示版本号（推荐v14.18.0及以上）则已安装；若提示“不是内部或外部命令”，前往Windows 64位稳定版或Mac通用稳定版下载安装包，双击按默认流程完成
- 创建项目目录：在桌面新建文件夹，命名为
link-whitelist-filter
二、后端开发：轻量级白名单服务
后端仅需2个核心接口：添加白名单链接、验证链接是否在白名单中，使用Node.js内置http、fs模块实现，无需第三方库
1. 初始化后端文件
进入项目目录，右键空白处选择“在终端打开”，输入npm init -y生成package.json；再新建文本文件，命名为server.js，最后新建whitelist.json作为白名单存储文件
2. 完整后端代码（可直接复制）
```javascript
const http = require('http');
const fs = require('fs');
const path = require('path');
const PORT = 3000;
const WHITELIST_PATH = path.join(__dirname, 'whitelist.json');
// 初始化白名单文件（避免为空时报错）
if (!fs.existsSync(WHITELIST_PATH)) {
fs.writeFileSync(WHITELIST_PATH, JSON.stringify([], null, 2));
}
// 读取白名单
const readWhitelist = () => {
const data = fs.readFileSync(WHITELIST_PATH, 'utf8');
return JSON.parse(data);
};
// 写入白名单
const writeWhitelist = (list) => {
fs.writeFileSync(WHITELIST_PATH, JSON.stringify(list, null, 2));
};
// 处理请求
const server = http.createServer((req, res) => {
// 设置跨域头（允许本地前端访问）
res.setHeader('Access-Control-Allow-Origin', '');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
// 处理OPTIONS预检请求
if (req.method === 'OPTIONS') {
res.writeHead(200);
res.end();
return;
}
// 提取路径和方法
const url = new URL(req.url, `http://${req.headers.host}`);
const pathname = url.pathname;
// 接口1：添加白名单链接（POST /add-link）
if (pathname === '/add-link' && req.method === 'POST') {
let body = '';
req.on('data', chunk => {
body += chunk.toString();
});
req.on('end', () => {
try {
const { link } = JSON.parse(body);
// 基础链接格式校验
const urlPattern = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-])\/?$/i;
if (!urlPattern.test(link)) {
res.writeHead(400, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ code: 400, msg: '链接格式不合法' }));
return;
}
// 统一转换为https://开头并去除末尾/
const normalizedLink = (link.startsWith('http://') || link.startsWith('https://') ? link : `https://${link}`).replace(/\/$/, '');
const whitelist = readWhitelist();
// 去重
if (whitelist.includes(normalizedLink)) {
res.writeHead(400, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ code: 400, msg: '链接已存在白名单中' }));
return;
}
whitelist.push(normalizedLink);
writeWhitelist(whitelist);
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ code: 200, msg: '添加成功' }));
} catch (e) {
res.writeHead(400, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ code: 400, msg: '请求参数错误' }));
}
});
return;
}
// 接口2：验证链接（GET /check-link?link=xxx）
if (pathname === '/check-link' && req.method === 'GET') {
const link = url.searchParams.get('link');
if (!link) {
res.writeHead(400, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ code: 400, msg: '缺少link参数' }));
return;
}
const normalizedLink = (link.startsWith('http://') || link.startsWith('https://') ? link : `https://${link}`).replace(/\/$/, '');
const whitelist = readWhitelist();
const isAllowed = whitelist.includes(normalizedLink);
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ code: 200, data: { isAllowed } }));
return;
}
// 其他接口返回404
res.writeHead(404, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ code: 404, msg: '接口不存在' }));
});
server.listen(PORT, () => {
console.log(`白名单服务已启动，地址：http://localhost:${PORT}`);
});
```
3. 启动后端服务
在项目目录终端中输入node server.js，看到提示“白名单服务已启动”后，不要关闭该终端窗口，否则服务停止
三、前端开发：操作与验证页面
前端包含白名单添加区、白名单列表区、链接验证区3部分，纯HTML+CSS+JavaScript实现，无需构建工具
1. 初始化前端文件
在项目目录新建文本文件，命名为index.html
2. 完整前端代码（可直接复制）
```html
链接白名单过滤系统
通用轻量链接白名单过滤系统
添加白名单链接
添加中...
当前白名单列表
验证链接是否合规
验证中...
