不是每个客户都懂技术

接鲜味居的单子时，客户的原话是：「我想要一个网站，好看的，能让人看到我们的菜。」

没有 PRD，没有功能列表，没有设计稿。这种情况下，独立开发者需要的不只是写代码的能力，是把模糊需求翻译成可交付产品的能力。

六步开发流程

经过多个项目验证，我总结了一套固定的 SOP：

第一步：需求确认

在写任何代码之前，先问清楚三件事：

  • 行业和配色偏好（餐饮？美容？零售？）
  • 品牌名和调性（年轻时尚？传统稳重？）
  • 需要的页面数量（首页 + 菜品 + 关于 + 联系是最小集）

第二步：数据先行

客户不知道什么是 API，但知道菜品有什么。所以我先用 JSON 建好数据结构：

{
  "id": "d001",
  "name": "清蒸东星斑",
  "price": 388,
  "category": "海鲜",
  "image": "/images/dishes/fish.jpg",
  "featured": true
}

数据定了，API 的返回格式就定了，前端的渲染逻辑就定了。

第三步：页面搭建

先做 HTML 骨架，再做 CSS 样式。首页是门面——轮播图、菜品展示、环境照片、客户评价，一个不能少。所有页面用同一套 CSS 变量：

:root {
  --primary: #C41E3A;
  --bg-page: #FDF8F5;
  --text-primary: #2C2C2C;
}

改配色只需要改动 3 行。

第四步：后台建设

客户不会改 JSON 文件。所以需要管理后台：

  • 登录 → Token 24h
  • 菜品 CRUD → 上传图片
  • 留言管理 → 标记已读
  • 设置 → 改店名、联系方式

一个 admin.html + admin.js，不到 500 行搞定。

第五步：安全加固

上线前必须过这五关：

  1. 密码用 crypto.scryptSync，不用 SHA-256
  2. 所有用户输入用 esc() 转义 & < > " '
  3. 安全响应头：X-Content-Type-Options、X-Frame-Options
  4. 每 IP 每分钟 60 请求上限
  5. 原子写入防崩溃

    6. 第六步：SEO + 无障碍

    每个页面补 <title> + <meta description> + OG 标签。图片加 alt，按钮加 aria-label，焦点环不删 outline。搜索引擎和残障用户都值得被尊重。

    踩过的坑

    坑一：图片太大。 客户用手机拍的原图 4000×3000，一张 8MB。前端懒加载只是掩盖问题，根本解决是引导客户压缩后再上传。后来我在后台加了 Canvas 缩放，上传时自动压缩到 1200px。

    坑二：手机号验证。 第一个版本只校验了 ^1[3-9]\d{9}$。结果有客户填了 12 位手机号通过了——因为他在号码后面多打了两个空格。修复：先 trim() 再校验。

    坑三：端口冲突。 服务器上跑着其他服务，3000 端口被占了。后来在 server.js 加了端口自增逻辑——检测 EADDRINUSE 自动 +1 重试。

    交付清单

    每个项目交付时，客户收到的不只是源码，还有：

    • 完整的项目文件（HTML/CSS/JS/JSON 数据）
    • 启动说明（一行 node server.js）
    • 后台账号密码
    • 上线部署指南

    客户不需要懂技术，拿到就能用。