Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-03-22 21:57:35 +08:00

20 KiB

原始文件 Blame 文件历史

呼籁旅行官网 — 后台对接方案（CMS Integration）

本文档分析官网所有内容模块，标注哪些需要「写活」（后台可增删改查），哪些是固定结构不需要动态化，以及推荐的数据库设计和对接方式。

一、内容动态化分级

第一优先级：高频更新（运营同学日常操作）

模块	当前文件	操作类型	更新频率	说明
客户评价	`reviews.json`	增、改、删	每周	每次收到好评都要加，是最高频的更新
FAQ问答	`faq.json`	增、改、删	每月	客户常问的问题会变化，需要随时补充和调整
联系方式	`contact.json`	改	偶尔	微信号、电话、邮箱可能变更
SEO信息	`seo.json`	改	偶尔	优化标题和描述以提升搜索排名

第二优先级：季节性更新（产品经理/罗盘操作）

模块	当前文件	操作类型	更新频率	说明
产品版本	`products.json → versions`	增、改、删	每季	产品迭代到V10、新增冬季版等
小蒙马夏令营	`products.json → summerCamp`	改	每年	年龄、活动、定位调整
选择指南	`products.json → selectionGuide`	改	每季	新产品上线后需要更新推荐逻辑
定价说明	`products.json → pricingPhilosophy`	改	偶尔	价格策略调整时
产品叙事	`products.json → narrative`	改	偶尔	品牌定位调整时

第三优先级：低频变更（品牌层面）

模块	当前文件	操作类型	更新频率	说明
品牌信息	`brand.json`	改	极少	slogan、信任数据、差异化卖点
关于我们	`about.json`	改	极少	品牌故事、子公司、资质、团队、文化
导航	`navigation.json`	改	极少	新增/调整导航页面

不需要动态化（代码层面）

项目	说明
页面结构/布局	Vue组件，需开发介入
样式/配色	Less变量，需开发介入
JSON-LD结构化数据	自动从内容数据生成，无需单独管理
sitemap.xml	只有页面增减时才需要改
robots.txt	基本不变

二、每个JSON文件的字段级分析

1. reviews.json（评价管理 — 最高频）

后台需要的功能：
✅ 新增评价（上传截图 + 填写文字）
✅ 编辑评价
✅ 删除评价
✅ 调整排序
✅ 修改汇总数据（总数、好评率、关键词）
✅ 管理筛选标签（场景、关心点）

字段说明：
summary:
  - totalCount: number      → 后台可改（或自动计算）
  - approvalRate: string    → 后台可改
  - keywords: string[]      → 后台可增删

items[]:
  - id: number              → 自动生成
  - nickname: string        → 后台填写
  - travelDate: string      → 后台填写（如"2025年7月"）
  - productVersion: string  → 后台选择（关联产品列表）
  - screenshot: string      → 后台上传图片，存储路径
  - content: string         → 后台填写（与截图内容一致，供AI抓取）
  - scenes: string[]        → 后台多选标签（带小孩/家庭游/情侣/朋友/带老人...）
  - concerns: string[]      → 后台多选标签（领队服务/行程安排/拍照超美/司机服务...）

2. faq.json（问答管理 — 高频）

后台需要的功能：
✅ 新增分类
✅ 在分类下新增/编辑/删除问答
✅ 调整分类排序和问答排序
✅ 管理相关链接

字段说明：
categories[]:
  - id: string              → 自动生成
  - name: string            → 后台填写（如"产品类"）
  - questions[]:
    - id: string            → 自动生成
    - question: string      → 后台填写
    - answer: string        → 后台填写（支持长文本）
    - relatedLinks[]:       → 后台配置
      - text: string        → 链接文字
      - url: string         → 链接地址（下拉选择站内页面）

3. products.json（产品管理 — 季节性）

后台需要的功能：
✅ 编辑产品叙事文案
✅ 新增/编辑/删除/排序产品版本
✅ 编辑夏令营信息
✅ 编辑选择指南
✅ 编辑定价说明

字段说明：
narrative: string            → 后台富文本编辑

versions[]:
  - id: string              → 自动生成（如"v9-6d5n-family"）
  - name: string            → 产品名称
  - days: number            → 天数
  - nights: number          → 晚数
  - audience: string        → 适合人群
  - description: string     → 产品描述
  - highlights: string[]    → 亮点列表（可增删）
  - tag: string             → 标签（如"经典版"/"人气王"）

summerCamp:
  - name: string            → 名称
  - ageRange: string        → 年龄范围
  - positioning: string     → 定位描述
  - coreActivities: array   → 核心活动列表
  - differenceFromV9: string → 与V9区别说明

selectionGuide:
  - byVacationLength[]:     → 按假期长度推荐
  - byChildAge[]:           → 按孩子年龄推荐
  - byPreference[]:         → 按偏好推荐
  （每条：condition + recommendation，recommendation关联产品id）

pricingPhilosophy: string   → 后台富文本编辑

4. contact.json（联系方式 — 偶尔更新）

后台需要的功能：
✅ 编辑联系渠道信息
✅ 新增/删除联系渠道
✅ 上传/更换二维码图片
✅ 编辑安全提示文案

字段说明：
channels[]:
  - type: string            → 渠道类型（wechat/phone/email/address等）
  - label: string           → 显示名称
  - value: string           → 联系值（微信号/电话/邮箱/地址）
  - qrImage: string|null    → 二维码图片路径（可选）
  - primary: boolean        → 是否主要渠道
  - description: string     → 补充说明

securityNotice: string       → 安全提醒文案

5. brand.json（品牌信息 — 极少更新）

后台需要的功能：
✅ 编辑品牌基础信息
✅ 编辑信任数据
✅ 编辑差异化卖点

字段说明：
name: string                → 品牌名
fullName: string            → 公司全称
domain: string              → 域名
url: string                 → 网址
slogan:
  - emotional: string       → 情感化口号
  - functional: string      → 功能化口号
trustStats[]:
  - value: string           → 数值（如"8000+"）
  - unit: string            → 单位（如"组"）
  - label: string           → 标签（如"已服务家庭"）
  - attribution: string     → 补充说明（可选）
differentiators[]:
  - title: string           → 卖点标题
  - description: string     → 卖点描述
icp: string                 → ICP备案号
eContract: string           → 电子合同资质

6. about.json（关于我们 — 极少更新）

后台需要的功能：
✅ 编辑品牌故事
✅ 管理子公司列表
✅ 管理资质列表
✅ 编辑团队和文化

字段说明：
story:
  - sections[]:             → 品牌故事段落
    - title/content         → 标题+内容
  - foundingMoment:         → 创始故事
    - scene/reflection      → 场景+感悟
subsidiaries[]:
  - name: string            → 公司名
  - role: string            → 业务角色
qualifications[]:
  - name: string            → 资质名称
  - detail: string          → 具体说明
team:
  - summary: string         → 团队概述
culture:
  - values[]:               → 企业文化
    - word/expression       → 关键词+表达
  - transparency: string    → 透明度说明

7. seo.json（SEO信息 — 偶尔优化）

后台需要的功能：
✅ 编辑每个页面的SEO信息

字段说明：
pages:
  [pageKey]:                → 页面标识（home/about/products/faq/reviews/contact）
    - title: string         → 页面标题（60字符内）
    - description: string   → 页面描述（155字符内）
    - h1: string            → 页面H1标题
    - ogImage: string       → 社交分享图片

8. navigation.json（导航 — 极少变更）

后台需要的功能：
✅ 编辑导航项（文字、链接）
✅ 调整排序

header[]:
  - text: string            → 导航文字
  - to: string              → 链接地址
footer[]:
  - title: string           → 分组标题
  - links[]:
    - text/to               → 链接文字+地址

三、推荐的技术方案

方案 A：JSON文件 + 简易后台（推荐起步）

适合阶段：现在 → 日均UV 1000以内

架构：
┌──────────┐      ┌──────────────┐      ┌──────────────┐
│  后台页面  │ ──→  │ API (读写JSON) │ ──→  │ data/*.json  │
│ (Vue/React)│      │  (Node.js)    │      │  (文件存储)   │
└──────────┘      └──────────────┘      └──────────────┘
                         │
                         ↓ 写完后触发
                  ┌──────────────┐
                  │ nuxi generate │  → 重新生成静态页面
                  └──────────────┘

优点：
- 零数据库成本
- 当前代码零改动，后台只操作JSON文件
- 生成的还是静态页面，速度最快
- 适合当前团队规模

缺点：
- 每次改内容需要重新 generate（约30秒）
- 多人同时编辑可能冲突

方案 B：数据库 + API + SSR（推荐中期）

适合阶段：有后台系统后

架构：
┌──────────┐      ┌──────────────┐      ┌──────────────┐
│  后台页面  │ ──→  │  API Server   │ ──→  │   数据库      │
│          │      │  (Node.js)    │      │ (MySQL/PG)   │
└──────────┘      └──────────────┘      └──────────────┘
                         │
                         ↓ 同时提供
                  ┌──────────────┐
                  │ Nuxt SSR渲染  │  → 实时读数据库渲染
                  └──────────────┘

改动点：
- nuxt.config.js: ssr改为true（当前已是），去掉prerender
- 页面中 import JSON → 改为 useFetch('/api/xxx')
- 新增 server/api/ 目录下的接口

四、数据库设计（方案B用）

表结构

-- 1. 评价表（最高频）
CREATE TABLE reviews (
  id INT PRIMARY KEY AUTO_INCREMENT,
  nickname VARCHAR(50) NOT NULL,
  travel_date VARCHAR(20),           -- "2025年7月"
  product_version VARCHAR(100),       -- 关联产品名称
  screenshot_url VARCHAR(255),        -- 截图CDN地址
  content TEXT NOT NULL,              -- 评价文字（AI抓取用）
  scenes JSON,                        -- ["带小孩", "家庭游"]
  concerns JSON,                      -- ["领队服务", "行程安排"]
  sort_order INT DEFAULT 0,           -- 排序权重
  is_visible BOOLEAN DEFAULT TRUE,    -- 是否显示
  created_at DATETIME DEFAULT NOW(),
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 2. 评价汇总表
CREATE TABLE review_summary (
  id INT PRIMARY KEY DEFAULT 1,
  total_count INT DEFAULT 0,
  approval_rate VARCHAR(10),          -- "98%"
  keywords JSON,                      -- ["贴心", "孩子玩疯了"]
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 3. FAQ分类表
CREATE TABLE faq_categories (
  id VARCHAR(50) PRIMARY KEY,         -- "product"
  name VARCHAR(50) NOT NULL,          -- "产品类"
  sort_order INT DEFAULT 0,
  created_at DATETIME DEFAULT NOW()
);

-- 4. FAQ问答表
CREATE TABLE faq_questions (
  id VARCHAR(50) PRIMARY KEY,
  category_id VARCHAR(50) NOT NULL,
  question VARCHAR(200) NOT NULL,
  answer TEXT NOT NULL,
  related_links JSON,                 -- [{"text":"查看产品","url":"/products"}]
  sort_order INT DEFAULT 0,
  is_visible BOOLEAN DEFAULT TRUE,
  created_at DATETIME DEFAULT NOW(),
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW(),
  FOREIGN KEY (category_id) REFERENCES faq_categories(id)
);

-- 5. 产品版本表
CREATE TABLE products (
  id VARCHAR(50) PRIMARY KEY,         -- "v9-6d5n-family"
  name VARCHAR(100) NOT NULL,
  days INT,
  nights INT,
  audience VARCHAR(100),
  description TEXT,
  highlights JSON,                    -- ["亮点1", "亮点2"]
  tag VARCHAR(20),                    -- "人气王"
  sort_order INT DEFAULT 0,
  is_visible BOOLEAN DEFAULT TRUE,
  created_at DATETIME DEFAULT NOW(),
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 6. 夏令营信息表
CREATE TABLE summer_camp (
  id INT PRIMARY KEY DEFAULT 1,
  name VARCHAR(100),
  age_range VARCHAR(20),
  positioning TEXT,
  core_activities JSON,
  difference_from_v9 TEXT,
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 7. 联系渠道表
CREATE TABLE contact_channels (
  id INT PRIMARY KEY AUTO_INCREMENT,
  type VARCHAR(20) NOT NULL,          -- "wechat"/"phone"/"email"...
  label VARCHAR(50) NOT NULL,
  value VARCHAR(200) NOT NULL,
  qr_image_url VARCHAR(255),
  is_primary BOOLEAN DEFAULT FALSE,
  description VARCHAR(200),
  sort_order INT DEFAULT 0,
  created_at DATETIME DEFAULT NOW()
);

-- 8. 品牌信息表（单行表）
CREATE TABLE brand_info (
  id INT PRIMARY KEY DEFAULT 1,
  name VARCHAR(50),
  full_name VARCHAR(100),
  domain VARCHAR(50),
  slogan_emotional VARCHAR(200),
  slogan_functional VARCHAR(200),
  trust_stats JSON,                   -- 4个信任数据
  differentiators JSON,               -- 5个差异化卖点
  icp VARCHAR(50),
  e_contract VARCHAR(100),
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 9. 关于我们（单行表）
CREATE TABLE about_info (
  id INT PRIMARY KEY DEFAULT 1,
  story JSON,                         -- 品牌故事结构
  subsidiaries JSON,                  -- 12家子公司
  qualifications JSON,                -- 资质列表
  team JSON,                          -- 团队介绍
  culture JSON,                       -- 文化价值观
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 10. SEO信息表
CREATE TABLE seo_pages (
  page_key VARCHAR(20) PRIMARY KEY,   -- "home"/"about"/...
  title VARCHAR(100),
  description VARCHAR(200),
  h1 VARCHAR(100),
  og_image VARCHAR(255),
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 11. 导航表
CREATE TABLE navigation (
  id INT PRIMARY KEY AUTO_INCREMENT,
  position ENUM('header', 'footer') NOT NULL,
  parent_title VARCHAR(50),           -- footer分组标题，header为NULL
  text VARCHAR(50) NOT NULL,
  url VARCHAR(100) NOT NULL,
  sort_order INT DEFAULT 0
);

-- 12. 内容文案表（产品叙事、定价说明等长文本）
CREATE TABLE content_blocks (
  block_key VARCHAR(50) PRIMARY KEY,  -- "product_narrative" / "pricing_philosophy" / "security_notice"
  content TEXT NOT NULL,
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 13. 选择指南表
CREATE TABLE selection_guide (
  id INT PRIMARY KEY AUTO_INCREMENT,
  guide_type ENUM('vacation_length', 'child_age', 'preference'),
  condition_text VARCHAR(100),        -- "3-4天假期"
  recommendation VARCHAR(50),         -- 关联产品id
  sort_order INT DEFAULT 0
);

图片存储

推荐方案：
- 评价截图、二维码、Logo等 → 对象存储（阿里云OSS / 腾讯云COS）
- 后台上传图片 → API接收 → 上传到OSS → 返回CDN地址
- 数据库只存URL，不存文件

目录规划：
/hulai-oss/
  ├── reviews/          评价截图
  ├── qrcodes/          二维码图片
  ├── logo/             品牌Logo
  └── og/               社交分享图

五、后台管理界面建议

后台菜单结构

📊 数据看板
  - 内容统计（评价数、FAQ数、产品数）

📝 内容管理
  ├── 客户评价          → 列表 + 新增 + 编辑 + 删除 + 拖拽排序
  ├── 常见问答          → 分类管理 + 问答列表 + 拖拽排序
  ├── 旅行产品          → 产品列表 + 编辑 + 夏令营 + 选择指南
  └── 联系方式          → 渠道列表 + 编辑 + 上传二维码

🏢 品牌设置
  ├── 品牌信息          → 基础信息 + 信任数据 + 差异化卖点
  ├── 关于我们          → 品牌故事 + 子公司 + 资质 + 团队 + 文化
  └── SEO设置           → 6个页面的标题/描述/H1

⚙️ 系统设置
  ├── 导航管理          → 页头/页脚导航编辑
  └── 发布管理          → 一键重新生成静态页面

后台技术栈建议

推荐：
- 前端：Vue 3 + Element Plus（与官网技术栈统一）
- 后端：Node.js + Express/Koa（或 Nuxt server routes）
- 数据库：MySQL 8.0（阿里云RDS）
- 图片：阿里云OSS + CDN
- 部署：同一台服务器，后台走 /admin 路径

对接方式：
1. 后台修改数据 → 写入数据库
2. 点击「发布」 → 触发 nuxi generate
3. 生成的静态文件部署到CDN/Nginx

或者（更简单的过渡方案）：
1. 后台修改数据 → 直接修改 data/*.json 文件
2. 点击「发布」 → 触发 nuxi generate
3. 无需数据库，JSON就是数据库

六、当前代码对接友好度评估

已经写活的（直接能对接）

内容	数据源	对接方式
所有评价	`reviews.json`	替换为API即可
所有FAQ	`faq.json`	替换为API即可
所有产品	`products.json`	替换为API即可
所有联系方式	`contact.json`	替换为API即可
品牌信息	`brand.json`	替换为API即可
关于信息	`about.json`	替换为API即可
SEO信息	`seo.json`	替换为API即可
导航	`navigation.json`	替换为API即可

对接时的改动量

每个页面改动量很小，只需要把：
  import data from '~/data/xxx.json'
改为：
  const { data } = await useFetch('/api/xxx')

大约 6个页面 + 3个组件（Header/Footer/MobileNav）= 9个文件
每个文件改动 1-3 行代码
总改动量：约30行代码

评价图片已经对接友好

当前：screenshot: "/images/reviews/review-001.jpg"  （本地路径）
对接后：screenshot: "https://cdn.1814.love/reviews/review-001.jpg"  （CDN地址）

组件中用的是 :src="item.screenshot"，路径换成CDN地址直接生效，零改动。

七、给运营同学的速查表

现在（没有后台之前）怎么改内容

要改什么	找哪个文件	怎么改
新增客户评价	`data/reviews.json`	在 `items` 数组里加一条，图片放到 `public/images/reviews/`
修改FAQ问答	`data/faq.json`	找到对应问题直接改文字
修改产品信息	`data/products.json`	找到对应版本直接改
换微信号/电话	`data/contact.json`	找到对应渠道改 `value`
改页面标题/描述	`data/seo.json`	找到对应页面改
改品牌口号	`data/brand.json`	改 `slogan` 下的文字
改关于我们	`data/about.json`	找到对应位置改

改完后：需要运行 npx nuxi generate 重新生成页面，然后重新部署。

有后台之后怎么改

登录后台 → 找到对应模块 → 编辑 → 点击「发布」→ 完成

八、总结

当前架构优势：
✅ 所有内容都在 8 个 JSON 文件里，结构清晰
✅ 数据和展示完全分离，后台对接只需改数据源
✅ 对接工作量极小（约30行代码改动）
✅ 可以分步走：先用JSON文件+手动generate，再上后台

建议路线图：
Phase 1（现在）：JSON文件 + 手动维护 + nuxi generate
Phase 2（1-2月后）：简易后台 + 读写JSON + 一键generate
Phase 3（业务增长后）：数据库 + API + CDN图片 + SSR渲染

20 KiB 原始文件 Blame 文件历史 Unescape Escape

呼籁旅行官网 — 后台对接方案（CMS Integration）

一、内容动态化分级

第一优先级：高频更新（运营同学日常操作）

第二优先级：季节性更新（产品经理/罗盘操作）

第三优先级：低频变更（品牌层面）

不需要动态化（代码层面）

二、每个JSON文件的字段级分析

1. reviews.json（评价管理 — 最高频）

2. faq.json（问答管理 — 高频）

3. products.json（产品管理 — 季节性）

4. contact.json（联系方式 — 偶尔更新）

5. brand.json（品牌信息 — 极少更新）

6. about.json（关于我们 — 极少更新）

7. seo.json（SEO信息 — 偶尔优化）

8. navigation.json（导航 — 极少变更）

三、推荐的技术方案

方案 A：JSON文件 + 简易后台（推荐起步）

方案 B：数据库 + API + SSR（推荐中期）

四、数据库设计（方案B用）

表结构

图片存储

五、后台管理界面建议

后台菜单结构

后台技术栈建议

六、当前代码对接友好度评估

已经写活的（直接能对接）

对接时的改动量

评价图片已经对接友好

七、给运营同学的速查表

现在（没有后台之前）怎么改内容

有后台之后怎么改

八、总结

20 KiB

原始文件 Blame 文件历史