这不是一个简单的企业展示网站——它承载着600多款产品、90多个分类、5000多张高清图片，每天为数以万计的访客提供流畅的浏览体验。从PC端的沉浸式产品展示到手机端的指尖滑动，从后台运营人员的一键上架到搜索引擎的精准收录，每一个细节都经过了精心打磨。

一、这究竟是一个什么样的网站？

想象一下，一个消费者打算给新家添置厨房电器。她打开手机，在搜索引擎里输入了几个关键词，点进了这个网站。

首先看到的是一个简洁大气的首页——大幅轮播Banner展示主打产品，下方是分类导航引导她一步步浏览。她点进「燃气热水器」分类，页面平滑滚动到对应的产品区块，每款产品都配有清晰的图片和简要描述。她对某款产品产生了兴趣，点进去看到了精美的特点图文、详细的技术规格参数，甚至可以在线下载产品说明书。

整个浏览过程流畅自然，从首页到产品详情，从PC到手机，体验是一致的。这对于一个内容型的品牌官网来说，是最基本也最重要的用户感受。

而这背后，是一套完整的内容管理系统在支撑。运营人员通过后台可以轻松管理产品上下架、更新图片、调整展示顺序、配置SEO信息——不需要任何技术背景。

二、访客看到的是什么？（PC端与移动端）

PC端浏览体验

打开网站首页，顶部是清晰的导航栏，将全部内容分为「产品中心」「服务支持」「新闻动态」等几大板块。鼠标悬停时，产品导航会展开一个分类面板，按品类和系列分层展示，访客可以快速定位到感兴趣的产品线。

进入产品列表页后，左侧是子分类导航菜单，右侧按分类分组展示产品卡片。点击左侧某个子分类，页面不会跳转，而是平滑滚动到对应区域——就像翻阅一本精心排版的产品画册，节奏感十足。

产品详情页根据不同产品类型展示了三种风格：

普通款：采用结构化的「特点图+文字描述」组合，每张图配合一段说明，像翻看产品手册一样清晰

设计款：整页大幅图片展示，适合视觉冲击力强的产品，浏览体验类似翻阅高端杂志

定制款：支持外链到独立的H5定制页面，满足特殊产品的个性化展示需求

每个产品页面都配有完整的技术规格参数表、高清产品图片、以及可供下载的PDF说明书。页面底部的面包屑导航让访客随时知道自己的位置，搜索引擎也能准确理解页面层级关系。

移动端适配

移动端的体验并非简单地将PC页面缩小，而是独立设计了一套模板体系。手机屏幕空间有限，设计上更注重：

首页顶部轮播Banner，手指滑动即可浏览主推产品

产品列表采用卡片式布局，图片占比更大、文字精简

导航菜单折叠为汉堡菜单，点击展开，不占用宝贵屏幕空间

服务板块（报修、安装、进度查询）针对手机表单操作进行了专门优化

PC端和移动端共用同一套后端数据，运营人员只需维护一份产品信息，两端自动同步更新。

三、运营人员看到的是什么？（后台管理系统）

如果说前端官网是「门面」，后台管理系统就是支撑门面运转的「工厂」。这套系统基于开源框架深度定制，覆盖了官网运营的方方面面。

产品管理：不是简单的增删改查

添加一个产品远比想象中复杂。运营人员需要：

填写产品名称、选择所属分类；上传缩略图（PC端和移动端各一张，尺寸不同）；配置特点图——可以动态增减，每组包含标题、描述和图片，所见即所得

填写规格参数表——每行一个参数名和参数值，支持任意维度；设置产品类型（普通款/设计款/定制款），不同类型对应不同的展示模板；上传PDF说明书供用户下载

配置排序权重——数值越大越靠前

设置SEO标题、关键词、描述——影响搜索引擎排名

所有这些操作都在一个页面上完成，图片上传后即时预览，规格表格可自由增删行，表单提交前自动校验必填项。运营人员上手只需几分钟。

分类管理：灵活的树形结构

产品分类采用三级树形结构。每个分类节点都可以配置：

PC端缩略图：在PC产品列表页顶部作为分类Banner展示

移动端缩略图：在手机端使用，尺寸适配小屏

跳转链接：可为分类Banner配置点击跳转地址，用于专题活动页面引导

排序权重：控制分类在导航菜单中的展示顺序

分类之间的父子关系清晰直观，支持拖拽调整层级。

权限管控

不同岗位的员工看到的后台是不同的。管理员可以给运营编辑分配「只能编辑产品但不能删除」「只能查看文章但不能修改」等精细权限，确保误操作不会影响线上网站。大到菜单板块、小到页面上的一个按钮，权限都可以精确控制。

四、数据迁移：把600个产品从旧站搬到新站

这是项目中最具挑战性的环节。旧网站运行在一套老旧的PHPCMS系统上，积累了近十年的产品数据——600多款产品、15个一级分类、数以千计的图片和PDF文件。必须完整、准确地迁移到新系统，不能丢失数据，不能影响线上服务。

我们面对的问题

　　旧站数据库的结构与新站完全不同：分类体系需要重新映射，产品标题混杂着各种分类前缀需要清洗，图片存放在远程服务器上需要下载后上传到云端存储，部分产品的数据本身就不完整（缺少特点图、规格图、说明书等）。

自研迁移引擎

因此专门开发了一套数据迁移引擎，核心设计思路是：

分批迁移、逐类推进：不是一次性全量导入，而是按产品分类拆分成60多个独立的迁移任务。每个任务只处理一个子分类下的若干产品，出错时只影响当前批次，不影响其他任务

自动去重：通过产品标题、旧系统ID、产品货号三重校验，确保同一个产品不会被重复导入

并发下载：4个线程同时从远程服务器下载图片，上传到阿里云OSS，10分钟内可处理完一个产品分类的全部图片

本地备份兜底：所有图片和PDF在本地保留一份备份。如果远程服务器不可用，自动从本地备份补充

幂等安全：每个迁移任务可以反复执行——已导入的产品自动跳过，缺数据的自动补齐，不会产生重复或冲突

三项关键技术细节

　　①递归分类查询：三级分类下查询产品时，需要把当前分类及其所有子分类的产品都查出来。传统做法是多次查询逐级递归（N+1问题），这里使用了MySQL的递归CTE语法，一条SQL搞定：

　　ID生成：分布式环境下，产品ID、文章ID等需要全局唯一。采用Twitter开源的Snowflake算法——用时间戳+机器ID+序列号组合生成64位长整型ID，既不依赖数据库自增，又能保证趋势递增，便于索引。

　　③数据库排序策略：产品列表的排序规则是「自定义权重（sort_order）降序→创建时间降序」。这意味着运营人员可以给重点产品设置较大的排序值让其排在前面，未设置排序值的产品按发布时间自然排列。SQL层面只需一行：

六、开发感悟

服务端渲染vs单页应用

对于内容密集型的品牌官网，选择传统的服务端渲染（Thymeleaf）而非Vue/React单页应用，是基于实际需求的权衡：

SEO友好：搜索引擎爬虫能直接抓取完整的HTML内容，不需要额外的SSR中间层

首屏加载快：服务端直接返回渲染好的页面，用户不需要等待JS打包文件下载执行

社交分享：微信/微博分享链接时，能正确抓取标题、描述和缩略图

开发效率：在Spring生态内，Thymeleaf模板即HTML，与Shiro权限标签、国际化等开箱即用

PC和移动端怎么选？响应式还是独立模板？

项目选择了PC+移动端独立模板的方案（而非CSS响应式自适应），原因是：

家电产品图片多且大，PC端适合大图展示、移动端需要精简

两端的交互模式不同：PC用鼠标悬停展开菜单，移动端用手势滑动

模板独立但数据共享——后端API是同一套，只是前端渲染的HTML不同

数据迁移这件事值得认真做

花两周时间打磨迁移工具，看似「额外工作」，但它带来的长期收益远超投入：

准确性：60多个测试方法覆盖全部产品线，每个产品都能追溯到迁移记录

可重复：开发环境、测试环境、生产环境可以分别执行迁移，幂等安全

可维护：后续新增产品或修复数据，只需写一个新测试方法，不再手工操作数据库