前台和中后台类解决方案汇总

前台

特点

• 前沿技术集中
• 研发效率要求高
• 因为对搜索引擎流量有诉求，所以可能有服务端渲染诉求
• 需要高还原度和多适配
• 细分场景

场景细分

通用基础场景

• 支付方案
• 预览方案
• 骨架屏方案
  • 参考资料：https://juejin.cn/post/6994678354200756238
• 防爬方案
• IP 限制
• 社交分享方案
• 响应式方案
• 业务闭环方案
• 国际化方案
• 字体方案
• IM 方案
• 大文件上传下载方案
  • 分片上传 & 断点续传
• 图片处理方案
• remoteConfig 方案【暂无】
• 配置后台 headless CMS 方案【暂无】
• 活动运营快速搭建方案
• 文档展示方案
• 多媒体方案
• 站内搜索方案
  • 后端集成 ES 方案
• 直播方案
  • WebRTC
  • 嵌入第三方 SDK 技术方案
• 登录方案
  • jwt
    • token 过期问题处理
  • 三方登录

内容类场景

特点：具备成长可能，可能集成有独立知识，问答和笔记系统

电商类场景

特点: 强 SEO，业务闭环

典型代表：京东，淘宝

模块分布：

业务闭环方案

平台类场景

特点：配置化需求突出

典型代表：阿里云官网

模块分布：

literals www.example.com, https://example.com, and contact@example.com.

console.log("hello, world!!");

中后台类站点解决方案

针对的基础骨架为 cra 或者 umi 创建的简单脚手架，并没有过多对于代码执行的侵入

工程化基础

项目骨架

service model utils pages config typings constant components locales

业务落地方案【业务层 & 技术层】

ICON图标方案

• react-icon
• antd-icon

动画方案

-参考资料：https://juejin.cn/post/6994678354200756238

国际化方案

响应式方案

请求封装方案

• axios
• react-query

缓存方案

样式管理方案

模块化 & 可编程 & 配置化

用户登录架构

-登录表单 & SSO 单点登录 -个人中心 -接口鉴权 & 无感刷新token -失效退出

layout 架构

数据状态管理

-Context -Redux 4.x -Redux Toolkit

路由架构

-权限方案 -RBAC

UI 实现方案

每个页面代码行数不要超过两屏，也就是 300 行，组件式开发，【页面级，项目通用级，业务组件库级，通用组件库级】

-通用组件库 -业务组件库

通用技术方案

• 全屏技术方案
• 站内搜索方案
• 详情页跳出状态存留方案
• 新手导引技术方案
• 时间方案
• 动态表格方案
• 拖曳方案
• 导入导出方案
• 打印方案
• markdown 方案
• 富文本方案
• 样式主题方案
• 吸顶导航实现方案