陈东的博客

# 中后台系统常见需求

# 数据获取、前后端通信

# 数据获取

参考资料：

# 报错信息统一处理

# API 接口缓存

缓存可以放到 Axios/API/Service 层，也可以放到 Redux/Vuex 层。

有的缓存是有上下文的，一些操作 (如：切换xxx) 会切换上下文，这时需要清空缓存避免脏数据。

# 常见组件

# 按钮

# 图标按钮 (IconButton)

以 ElementUI、AntDesign 组件库为例，IconButton 可以支持组件库自带图标和自定义图标。

但组件库自带图标和自定义图标混用容易导致样式体验不一致。

这里介绍了如何在 Vue ElementUI 下使用自定义图标并保证 IconButton 的体验一致性。

# 异步按钮 (AsyncButton)

对于触发异步操作的按钮，需要有 Loading 状态。

React 实现 AsyncButton

# 常见布局

# 登录、授权

【需求】在 login.html 登录后，跳转到 user.html。这个跳转的动作可以用 JS 来实现：location.href = '/user.html'，这时浏览器会向服务器发请求获取 user.html。

【技术难点】HTML 是无状态协议，当访问 user.html 时服务器根本“不记得”用户已经登录了。有许多办法来解决这个问题：

  • 使用 Cookie，这主要是后端技术，前端不需要感知，很少需要在 JS 里面访问 Cookie
  • 如果前端是 SPA 单页应用，则不存在页面跳转的问题

对于 SPA 单页应用，登录过程是：前端发起 POST 请求、POST 响应中带有 token 信息和 UserInfo，前端需要保存 token 信息，此后发给后端的 HTTP 请求中都要带上 token。

【技术实现】前端需要判断是否已登录，以便显示不同的界面。

【技术实现】后续前端发送给后端的请求都需要携带 token，一般我们是放在 HTTP 请求头里面。

  • 如果使用 Axios，可以很方便地做到这一点

# 记住密码、7天免登陆

# 表单

# 表单的初始数据

# 表单前端校验

# 表单后端校验

# 动态表单

# 分步表单

# 自定义表单控件

# 区分新建、编辑两种模式

# 常用表单控件

# 日期控件

需求：禁止选择今天以前的日期 我们需要判断 time 是否小于当前时间，dayjs(time).isBefore(dayjs(), 'day')

# 锚点滚动

点击提交按钮，校验失败的表单控件会有红色报错。如果表单特别长的话，错误提示信息可能会在屏幕之外用户看不到，所以希望页面能滚动到第一条错误的位置。如下图所示 (图还没画)。

# 列表页、表格页

# 分页

# 无限滚动、瀑布流

# 搜索、筛选

# 加载状态

# 排序

# 路由

除非特别说明，技术栈一律采用 react-router。

# 路由配置对象

中后台系统有很多路由，而且需求经常变，路由写死在组件里面不太好。希望能将路由配置在 JS 对象里面，然后根据这个配置自动生成路由。

例子：路由写死在组件里面

todo

例子：路由配置对象

todo

# 路由参数

# 嵌套路由

路由会共用一些布局 UI，所以需要支持嵌套路由。todo: 太难描述了，要给个图。

如果路由是写死在组件内的话，事情变得很容易。但我们之前有需求是将路由配置在 JS 对象里，这样事情就变得困难很多。

例子：如果路由是写死在组件内

todo

例子：如何支持配置嵌套路由

todo

# 路由权限控制

由于路由配置是 JS 对象，所以可在运行的时候动态生成，自然能实现各种灵活的需求。

【方案一】对于没权限的路由就直接删掉，实现简单。缺点是无法区分 403 和 404，前者是无访问权限，后者是 URL 路径错误。

【方案二】在路由跳转前进行“拦截”，如果没有权限则执行相应业务逻辑 (跳到 403 页面、跳到登录页)。

# 基于路由生成菜单导航

以 react-router 为例，路由是扁平结构，而菜单是树形结构，所以需要转换。

需求是实现路由配置转成菜单配置，关键难点：

  • 扁平结构转树形结构，基于公共前缀实现 (考验算法功底了)
  • 结合路由权限控制，对于无权限路由不应该转成菜单
  • 有些路由需要转成菜单，有些不需要

# 集成第三方库

# ECharts

# D3.js

# 复杂业务需求

# 文字溢出

文字溢出是 CSS 控制的，但我们需要在 JS 测检测文字溢出，对于溢出的文字启用鼠标悬浮 Tooltip。

# 拖拽

# 动态改变页面布局

# 定制主题

# 国际化

# 精细控制组件权限

# 分布确认框

当用户进行危险操作的时候，需要弹框询问用户是否确认操作。对于更加复杂的场景，需要结合后端计算，多次询问用户是否确认操作。

例如对于这样的业务场景：

  • 用户点击删除xxx规则，提示「删除无法恢复，确定删除xxx吗」，同时向后端请求 API
  • 后端收到 API 后，计算删除xxx规则会导致的后果，这一步需要较长的时间
  • 前端在 API 请求返回之前，都要显示 Loading 状态
  • API 请求返回后，根据情况，如果不含危险操作就直接删除
  • 如果含有危险操作，则二次确认提示「删除xxx将导致xxx，是否确认删除」

我们采用状态机的风格来设计组件的 API。

# 复杂 Loading

复杂的需求：

  • 显示 Loading 百分比
  • 显示 Loading 阶段，例如：正在进行合法性校验、正在统计受影响的设备、正在关闭设备

# 性能需求

# 图片按需加载

# 列表页缓存

# 鲁棒性需求

# 图片加载失败

# API 调用失败

# 其它

# 使用 Mock 数据

# 管理图标

# 单元测试