2.1 去哪里买#

国内主流的选择就是腾讯云和阿里云，两家经常有新人首年特价。

腾讯云的域名注册入口：控制台 → 域名注册 → 搜索想要的域名。阿里云同理：控制台 → 域名注册 → 搜索。

2.2 买什么后缀的最便宜#

最便宜的后缀通常是.xyz、.site、.fun、.icu这些，首年经常在615元之间。如果你想看起来更”正经”一点，.com首年一般是5575元，但有些活动也能做到30元左右。

但这里有个坑需要特别注意：某些后缀不能备案。如果将来你的项目需要部署在国内服务器上且要求备案，那一定要买.com、.cn、.net这些能备案的后缀。

不过我们的场景是演示系统，部署在CloudFlare Pages上——CloudFlare的节点都在境外，不需要备案。所以我买了一个.xyz的域名，首年10块钱。

2.3 购买流程简述#

在腾讯云搜索域名后，加入购物车，选择首年购买，填写个人信息。这里要注意的是实名认证，国内注册局要求域名购买后必须做实名认证，通常需要上传身份证照片，审核时间在几分钟到几小时不等。认证通过之后域名才能正常使用DNS解析。

3.1 注册CloudFlare账号#

官网cloudflare.com，注册流程很简单，一个邮箱就能搞定。

3.2 添加站点#

登录后点”添加站点”，输入你刚买的域名。CloudFlare会自动扫描当前域名的DNS记录，把腾讯云上已有的记录扫出来。

3.3 修改NS服务器#

这是最关键的一步。CloudFlare会给你两个NS服务器地址，比如darl.ns.cloudflare.com和zara.ns.cloudflare.com。

你需要回到腾讯云的域名管理控制台，找到”DNS服务器”设置，把默认的NS改成CloudFlare提供的这两个地址。

改完之后，一般在几分钟到一小时内生效。CloudFlare上会显示状态从”待处理”变成”活跃”，说明域名已经成功迁过来了。

3.4 为什么要迁到CloudFlare#

原因有三：第一，CloudFlare Pages提供免费的静态网站托管，带宽不限，全球CDN加速，这对演示系统来说太合适了。第二，CloudFlare的DNS解析速度在全球范围内是最快的之一。第三，所有的域名管理和部署配置可以在一个平台完成，不需要来回切账号。

4.1 场景还原#

假设你手里的标书有10项参数指标，每一项在Word里都有详细的表格、数据、图表描述。你要做的就是把每一项单独做成一页HTML，每一页都保持统一的视觉风格。

如果你的团队里有前端开发，他可以手动写这10个页面，每个页面写好样式和内容结构。如果没有前端，也有更快的办法。

4.2 用AI批量生成页面结构#

以我自己的操作为例，标书中有一份Word文档，里面描述了10个功能模块的详细参数。我先把Word另存为PDF，然后用AI工具（比如Claude或者ChatGPT）直接读PDF，让它根据内容生成10个独立的HTML文件。

给AI的提示词大概是这样：

我有一个Word文档，里面包含了10项功能模块的详细描述，每项都有功能名称、功能描述、关键指标、数据展示要求等。

请根据每项内容分别生成一个完整的HTML页面（1.html ~ 10.html），要求：

1. 每个页面独立完整，包含完整的HTML结构
2. 所有页面使用统一的视觉风格，颜色、字体、间距保持一致
3. 每个页面包含一个顶部的功能标题区域和主要内容区域
4. 数据展示方面，如果有表格数据就做成真实的HTML表格，如果有图表展示用Chart.js或者ECharts渲染
5. 页面要适配1920x1080的演示屏幕分辨率

AI生成完之后，你手上就有10个独立的HTML文件了，每个双击都能打开，看起来是一页一页的独立页面。

但问题是：它们各自独立，没有系统感。

客户要看的是一套完整的系统，不是一个一个单独打开的网页。要把这10个页面”装订”成一个系统，就是下一步的工作。

5.1 什么是”伪系统”#

所谓伪系统，就是表面上看起来是一个完整的业务系统，实际上只有前端没有后端。

真正的系统通常有后端服务（Java/Python/Go等）、数据库（MySQL/PostgreSQL等）、API接口、用户认证系统（JWT/Session等）、权限管理。而伪系统只有一堆静态HTML文件、一个登录页（前端校验账号密码）、一个主框架页（左侧导航+右侧内容区）。

登录页的校验逻辑在前端JavaScript里写死，账号密码硬编码在代码中。没有真正的用户管理，没有任何后端请求。但客户打开浏览器看到的，是一个完整的登录界面，输入账号密码后进入系统，左边有菜单，右边展示不同的功能页面，完全看不出这是个纯前端的壳子。

5.2 Codex提示词#

Cursor或者GitHub Copilot中的Codex模式，非常擅长做这类”页面包装”的工作。这是我用的提示词：

文件夹内有 10 个独立的 HTML 文件（1.html ~ 10.html），对应同一份 Word 演示文档中的 10 项参数指标。目前每个 HTML 都是单独打开的单页，缺少系统感。

请分别为两个平台各建一个伪系统，用纯 HTML/CSS/JS 实现，不需要后端，具体要求如下：

各做一个假的登录页面，账号密码为 admin / 随机生成 登录后进入系统主界面，主界面包含一个左侧导航栏（或顶部标签栏），列出该平台的全部 10 个模块入口 点击不同模块时，主内容区域加载对应的 {n}.html 文件，实现页面间切换效果，看起来像一套完整的 SPA 系统 两个平台各自独立运行，样式和视觉风格要与原文件夹内已有的 HTML 保持一致 登录页要有基本的校验逻辑，错误密码提示错误，正确密码跳转系统页

5.3 为什么是两个平台#

标书里可能要求建设两个系统，比如”专业建设监测平台”和”课程开发管理平台”。每个平台有各自的10个功能页面，但底层的10个HTML文件是从同一份Word里生成的。

两个平台共用同一份页面数据，但各自有独立的登录页和主框架，视觉风格略有区分——一个偏蓝色调，一个偏绿色调——看起来就是两套独立的系统。

5.4 技术实现细节#

1
const validUsers = {
2
    'platform-a': { username: 'admin', password: 'R8kM2x9p', redirect: 'platform-a/index.html' },
3
    'platform-b': { username: 'admin', password: 'J3nP6wLq', redirect: 'platform-b/index.html' }
4
};
5

6
function handleLogin(platform) {
7
    const username = document.getElementById('username').value;
8
    const password = document.getElementById('password').value;
9
    const config = validUsers[platform];
10

11
    if (username === config.username && password === config.password) {
12
        localStorage.setItem('loggedIn', 'true');
13
        window.location.href = config.redirect;
14
    } else {
15
        document.getElementById('errorMsg').textContent = '账号或密码错误，请重新输入';
16
        document.getElementById('errorMsg').style.display = 'block';
17
    }
18
}

1
function loadModule(moduleNumber) {
2
    document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
3
    document.getElementById(`nav-${moduleNumber}`).classList.add('active');
4
    document.getElementById('content-frame').src = `../pages/${moduleNumber}.html`;
5
}

1
function generatePassword(length = 8) {
2
    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
3
    let password = '';
4
    for (let i = 0; i < length; i++) {
5
        password += chars.charAt(Math.floor(Math.random() * chars.length));
6
    }
7
    return password;
8
}

5.5 目录结构#

最终的项目目录结构大致如下：

1
project/
2
├── platform-a/
3
│   ├── login.html          # A平台登录页
4
│   ├── index.html          # A平台主框架页
5
│   └── assets/
6
│       ├── css/
7
│       ├── js/
8
│       └── images/
9
├── platform-b/
10
│   ├── login.html          # B平台登录页
11
│   ├── index.html          # B平台主框架页
12
│   └── assets/
13
│       ├── css/
14
│       ├── js/
15
│       └── images/
16
├── pages/                   # 公共页面文件
17
│   ├── 1.html
18
│   ├── 2.html
19
│   ├── ...
20
│   └── 10.html
21
└── README.md

两个平台的登录页和主框架是独立的，但引用的底层页面文件（1.html ~ 10.html）是共用的，避免重复维护。

6.1 创建Pages项目#

登录CloudFlare控制台，左侧导航找到”Pages”，点击”创建项目”。

有两种方式接入：连接到Git（推荐）——把你的项目推送到GitHub仓库，CloudFlare拉取代码自动部署；或者直接上传——直接把项目文件夹拖拽上传。

推荐用方式1，连接Git仓库后每次推送代码会自动触发部署，后续更新非常方便。

6.2 配置构建#

因为是纯静态项目，不需要任何构建步骤。CloudFlare Pages支持直接部署静态文件。

在构建配置中，构建命令留空（纯静态不需要构建），构建输出目录留空或者填”.”，根目录如果你的项目在子目录中，填写对应的子目录路径。

6.3 绑定域名#

部署完成后，CloudFlare Pages会分配一个xxx.pages.dev的二级域名。

点击项目设置→域名→设置自定义域名，输入你之前买好的域名。因为DNS已经迁到了CloudFlare，这里只需要选择对应的域名，CloudFlare会自动添加DNS记录。

配置完成后，访问你的域名就能直接看到部署好的系统了。

如果想让不同平台有不同的访问地址，可以配置不同的子域名：a.yourdomain.com指向platform-a目录，b.yourdomain.com指向platform-b目录。CloudFlare Pages支持通过分支部署或者多项目的方式实现多个站点。

6.4 HTTPS自动配置#

CloudFlare Pages默认自动配置SSL证书，部署完成后HTTPS直接可用，不需要任何额外操作。浏览器地址栏的小锁标志，加上你买的正式域名，看起来就是一个”正经”的系统了。

7.1 演示前的准备工作#

第一，清空浏览器缓存。用无痕模式打开，确保每次演示都是从登录页开始，没有之前的登录状态残留。

第二，提前打开所有页面检查一遍。确保每个HTML文件正常加载，图表能正常渲染，表格数据没有显示异常。演示时卡在最基本的页面加载失败上，会非常尴尬。

第三，记录好密码。把两个平台的密码写在演示文档的备注页上，或者在手机备忘录里存一份。

第四，准备网络应急预案。虽然CloudFlare的CDN很稳，但万一现场网络不好，可以考虑用手机热点，或者提前在本地打包好整个项目。

7.2 演示时的操作节奏#

演示伪系统的关键是：不要主动提”这是前端的、没有后端”。

客户不会问”你们后端用的什么技术栈”，他们只会看：能不能登录、界面好不好看、功能是不是标书里写的那些、页面切换流不流畅。

如果客户问”数据是实时的吗”，回答可以说”这是演示环境，用脱敏的演示数据，正式上线后对接真实数据”。

如果客户问”能不能在上面操作保存数据”，回答”目前演示环境是只读的，正式版支持所有增删改查操作，数据写入后实时生效”。

核心原则：不主动撒谎，但不主动揭穿。演示的目的是让客户认可方案，不是展示技术架构。

7.3 伪系统的局限性#

诚实地说，伪系统有明显的局限性，你不能把它当成真正的交付物：

没有真正的用户认证——前端校验账号密码是纯展示用的，没有任何安全性可言。没有数据持久化——所有数据都是写死在HTML里的，不能增删改查。没有交互反馈——点击按钮不会有真正的后端处理，所有的交互反馈都是前端模拟的。不能承受真实使用——不要试图让客户在上面真正操作业务流程，撑不住的。

伪系统的定位非常明确：投标演示专用，帮助评审专家理解系统长什么样。

8.1 成本明细#

8.2 时间估算#

如果你手上有现成的标书Word文档，全部流程跑一遍：

实际操作下来，最花时间的反而是调整AI生成的页面样式，让它们看起来更像一个真正的系统。这个过程需要人工干预，AI可以完成80%的工作，但剩下的20%需要人来做视觉检查和微调。