——1 万行代码的全流程实战记录

我们做了一款"台球图像识别与轨迹分析"软件（"台瞄"），客户在购买前需要先看到效果演示：辅助线在真实比赛画面上如何标注、是否精准、不同球型/角度的覆盖度。这就要求一个

为了快速上线、零成本运维，整个系统采用 

Node.js + Express + JSON 文件存储 + 原生 HTML/CSS/JS + wangEditor

——没有数据库、没有前端框架、没有构建步骤，单进程即可服务一个中小型业务站。

三层结构清晰：浏览器层（前台 4 个页面 + 后台 1 个页面）→ Express 路由层（公开 API / 验证码接口 / 内容 API / 管理 API 四组，约 60 个路由）→ 数据与文件层（

 子目录 + 内存 Map 存的一次性下载 token）。

所有内容（视频/图片/教程/问答/文字说明）都按"

设备 → 软件版本 → 游戏 → 详细分类

"四级组织。FAQ 多加一级"问题类型"。游戏/版本/分类都是同一张 

4.2 教程编辑器（wangEditor 二次开发）

教程是核心载体。原生 wangEditor 缺少

，我们在工具栏前面增加了一条自定义栏：

字号下拉 11 档（12–72px）+ 自定义 px 输入框；字色 10 种最亮高亮色 + 取色器；底纹 10 种暗色 + 取色器；插入视频、引用文字说明、从图库插图全部走弹窗。

```js
async function saveTutorial(vid, gid) {
  if (!vid) { toast('请选择软件版本', true); return; }
  // 保存前兜底清理：移除无图片的残留 wrapper 与孤立标注
  if (tutorialEditor) { cleanupTutorialImageWrappers(); tutorialEditor.change.emit(); }
  const content = tutorialEditor ? tutorialEditor.txt.html() : '';
  try {
    await api('/api/admin/tutorials', { method: 'PUT', body: JSON.stringify({
      versionId: vid, gameId: gid || '',
      title: $('#tTitle').value, content,
      published: $('#tPublished').checked
    })});
    closeTutorialEditor(); renderTutorials();
  } catch (e) { toast(e.message, true); }
}
```


4.3 激活码体系：卡类型 + 有效期 + 下载保护

这是商业闭环的关键。卡类型决定有效期，下载走

（内存 Map，5 分钟有效，用后即删），直链访问 

```js
const CARD_TYPES = {
  test: { name: '测试卡', days: 3 },
  day:  { name: '天卡',   days: 3 },
  week: { name: '周卡',   days: 7 },
  month:{ name: '月卡',   days: 30 },
  year: { name: '年卡',   days: 365 },
  forever: { name: '永久卡', days: 3650 },
  universal:{ name: '万能卡', days: 36500 }
};

function verifyCodeAccess(code) {
  if (codeEnabled()) {
    if (!code) return { ok: false, msg: 'need_code', needCode: true };
    const c = db.codes.find(x => x.code.trim().toLowerCase() === String(code).trim().toLowerCase());
    if (!c) return { ok: false, msg: '激活码无效' };
    if (c.usedAt && isCodeExpired(c)) return { ok: false, msg: '激活码已过期，请续费或联系客服' };
    if (c.kickAt && c.usedAt) return { ok: false, msg: 'need_code', needCode: true };
    if (!c.usedAt) {
      c.usedAt = new Date().toISOString();
      c.usedBy = 'page-access';
      const info = cardTypeInfo(c.cardType);
      c.expireAt = new Date(Date.now() + info.days * 86400000).toISOString();
      saveDb();
    }
  }
  return { ok: true };
}

app.post('/api/softwares/:id/download', (req, res) => {
  const c = db.codes.find(x => x.code.trim().toLowerCase() === String(req.body.code).trim().toLowerCase());
  if (!c || (c.usedAt && isCodeExpired(c))) return res.status(403).json({ ok: false, msg: '激活码无效或已过期' });
  const token = crypto.randomBytes(16).toString('hex');
  downloadTokens.set(token, { code: c.code, softwareId: req.params.id, exp: Date.now() + 5 * 60 * 1000 });
  res.json({ ok: true, url: `/api/softwares/${req.params.id}/file?token=${token}` });
});

app.get('/api/softwares/:id/file', (req, res) => {
  const t = downloadTokens.get(req.query.token);
  if (!t || t.softwareId !== req.params.id || t.exp < Date.now()) return res.status(403).end();
  downloadTokens.delete(req.query.token);
  res.sendFile(path.join(SOFTWARE_DIR, t.filename));
});
```


4.4 图片标注编辑器（canvas + DOM 覆盖层）

教程里"步骤 1 → 步骤 2"配图需要箭头/序号印章/马赛克/高亮，单独做了 200+ 行的 canvas 编辑弹窗（矩形/圆圈/箭头/直线/虚线/反射折线/编号印章/马赛克/高亮/文字 10 种工具）。保存时把非马赛克标记作为 

渲染在图片 wrapper 内（可拖动可删除），马赛克写入图片像素。

这一节是整个项目最有价值的部分。每一个坑都花了一两个小时才摸清。

坑 1：wangEditor CSS 优先级覆盖字号

：教程编辑器里给一段字加 A+ 字号，HTML 看起来是 

 收集选区内的文本节点，把字号 span 

```js
function changeTutorialFontSize(dir) {
  const textArea = $('#tEditorInner .w-e-text');
  if (!textArea) return;
  const sel = window.getSelection();
  if (!sel || sel.rangeCount === 0 || sel.isCollapsed) { toast('请先选中文字', true); return; }
  const range = sel.getRangeAt(0);
  // 收集所有文本节点
  const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT);
  const nodes = [];
  while (walker.nextNode()) {
    const n = walker.currentNode;
    if (range.intersectsNode(n) && n.textContent) nodes.push(n);
  }
  const cur = parseInt(window.getComputedStyle(nodes[0] || textArea).fontSize) || 16;
  const next = Math.max(1, cur + dir * 2);
  nodes.forEach(n => {
    const span = document.createElement('span');
    span.style.fontSize = next + 'px';
    const mid = n.textContent.length;
    span.textContent = n.textContent;
    n.parentNode.replaceChild(span, n);
  });
  notifyTutorialEditorChange();
}
```


坑 2：Chrome 输入时自动继承自定义属性

：用户选 28px 后输入英文，HTML 出现 

 span 的光标处插入文字时，会自动继承该属性。新输入的 span "出生"就带 

，我原本用这个标记做去重判断，结果新 span 直接被跳过。

：放弃用自定义标记做去重，改成

（精确 px 不会被误伤，只匹配 

```js
function fixTutorialTypingFontSizeOnInput() {
  if (!tutorialTypingFontSize || tutorialApplyingTypingFontSize) return;
  const textArea = $('#tEditorInner .w-e-text');
  if (!textArea) return;
  const keywordRe = /(?:^|;)\s*font-size\s*:\s*x+-?large\b/i;
  textArea.querySelectorAll('span[style*="font-size"]').forEach(sp => {
    if (!keywordRe.test(sp.getAttribute('style') || '')) return;
    sp.style.fontSize = tutorialTypingFontSize + 'px';
  });
}
```


坑 3：删除图片后残留印章标注

：教程里插入图片 → 编辑图片加序号印章 → 保存 → 删除该图片 → 印章 span 还残留在编辑区。

，印章是 wrapper 内的 DOM 子元素。contenteditable 默认只删 

```js
// 1) 选中图片按 Delete 整块删
function handleTutorialEditorDeleteKey(event) {
  if (event.key !== 'Delete' && event.key !== 'Backspace') return;
  const host = selectedTutorialImageWrapper ||
    (selectedTutorialImage ? selectedTutorialImage.closest('.tutorial-image-edit, .tutorial-annotation') : null);
  if (!host || !host.isConnected) return;
  event.preventDefault();
  const parent = host.parentElement;
  const range = document.createRange();
  range.selectNode(host);
  range.deleteContents();
  if (parent && parent.tagName === 'P' && !parent.textContent.trim() && !parent.querySelector('img, video, iframe, .tutorial-image-edit, .tutorial-annotation')) parent.remove();
  clearTutorialImageSelection();
  notifyTutorialEditorChange();
}
// 2) input 兜底：扫「无 img 的 wrapper」「孤立标注」自动移除
function cleanupTutorialImageWrappers() { /* ... */ }
// 3) saveTutorial 保存前再清一次，确保落库内容干净
async function saveTutorial(vid, gid) {
  if (tutorialEditor) { cleanupTutorialImageWrappers(); tutorialEditor.change.emit(); }
  /* ... */
}
```


：后台 22 处删除/解封/清空操作都用原生 

，弹窗出现在浏览器最顶部而非页面中央，移动端/大屏体验差。

，并支持标题与红色危险按钮。22 处全量替换：

```js
function confirmModal(message, opts) {
  return new Promise(resolve => {
    _confirmResolve = resolve;
    const title = opts.title || '请确认';
    const btnCls = opts.danger ? 'danger' : '';
    openModal(`
      <div style="text-align:center;padding:6px 4px 2px">
        <div style="font-size:44px;margin-height:10px">⚠️</div>
        <h3 style="padding-right:0;margin-bottom:12px">${esc(title)}</h3>
        <div style="color:var(--text2);line-height:1.7;white-space:pre-line">${esc(message)}</div>
      </div>
      <div class="modal-actions" style="justify-content:center">
        <button class="secondary" onclick="resolveConfirmModal(false)">取消</button>
        <button class="${btnCls}" onclick="resolveConfirmModal(true)">确定</button>
      </div>`, 'resolveConfirmModal(false)');
  });
}
```


坑 5：教程编辑器按钮被编辑区遮挡

 想"长内容也能随时保存"，但用户反馈"右边上下光标拖动时，按钮被编辑区盖住，分层了"。

：sticky 浮于编辑区之上，wangEditor 编辑区白底高 z-index 把按钮盖住，且 sticky 与连体操作栏的视觉预期冲突。

，改回普通流，让按钮紧贴编辑区下方（连体），弹窗 

 滚动可见即可。验证间距 14px。

（不含后续迭代），核心代码 1 万+ 行托管在 git，

完整源码，，git 记录 80+ 次提交可逐版本回退。文中所有截图均为真实系统运行截图（后台 8 张 + 流程图 2 张），无虚构。

我们做了一款"台球图像识别与轨迹分析"软件（"台瞄"），客户在购买前需要先看到效果演示：辅助线在真实比赛画面上如何标注、是否精准、不同球型/角度的覆盖度。这就要求一个展示站，具备：

用 Node.js + 原生前端从零开发"台球辅助线软件效果演示站"

用 Node.js + 原生前端从零搭建"台球辅助线软件效果演示站"全流程实录，1.08 万行代码实战：Express 单文件后端 + JSON 数据存储 + wangEditor 二次开发为教程编辑器。核心模块包含四级分类内容管理、卡类型/有效期/下载保护的激活码体系、图片标注编辑器（canvas 矩形/箭头/印章/马赛克）、以及 5 个真实踩坑实录（CSS 优先级、Chrome 属性继承、富文

人工智能

基于Node.js+Express构建的台球图像识别演示站，实现1万行代码全栈开发。采用JSON文件存储与原生前端技术，零数据库零构建步骤。核心功能包含四级内容分类、wangEditor二次开发教程编辑器、激活码管控体系及canvas图片标注工具。详细记录5个关键技术踩坑解决方案，覆盖CSS优先级、浏览器自动继承、弹窗优化等实战难题。

对象存储

图像识别

文件存储

PostgreSQL

验证码

数据库

路由

SQLite

ReAct 

JSON

CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

基于Node.js+Express构建的台球图像识别演示站，实现1万行代码全栈开发。采用JSON文件存储与原生前端技术，零数据库零构建步骤。核心功能包含四级内容分类、wangEditor二次开发教程编辑器、激活码管控体系及canvas图片标注工具。详细记录5个关键技术踩坑解决方案，覆盖CSS优先级、浏览器自动继承、弹窗...

用 Node.js + 原生前端从零开发"台球辅助线软件效果演示站"

用 Node.js + 原生前端从零开发"台球辅助线软件效果演示站"

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐