大话APP配置功能的设计和落地

在参与各种app业务开发的过程中，大部分都会遇到需要对某些功能/界面/数据可以灵活的管理后台控制，客户端根据配置变化而变化，不需要发版本就可以解决这些需求，大致功能需求就是需要提供一个后台功能，能够给产品/运营童鞋进行配置管理，然后通过服务端接口输出给客户端进行逻辑/渲染使用，这里针对这种场景，分享一个相对通用的解决方案

项目背景

当前项目中针对这种配置的需求，每次都需要开发人员重新开发后台表单，然后修改配置接口针对配置进行输出，因为这个功能的开发要归宿到很早以前，也不知道当初为啥要这么做，现在存在的问题就是不容易维护和拓展，以及重复开发的成本

整理需求

• 配置管理后台
  • 支持版本控制
  • 支持客户端类型（安卓/IOS/所有）
  • 表单可配置
• 配置输出接口
  • 增量下发
  • 保证高可用，高稳定，高性能
• 客户端
  • 接口下发配置数据进行缓存

技术背景

• 管理后台：php服务端+jquery+bootstrap
• 接口项目：php服务端

技术过程

• 前端技术选型：

  • vuejs
  • element ui

• 核心问题，如何后台配置生成表单（开发人员来配置）？

初步计划是通过配置表单的JSON生成element ui的表单，进行了一些调研，也找到可以通过配置JSON生成element ui表单的js库，感觉灵活性差了些，而且当时还不支持富文本，感觉后续拓展也是大问题，所以弃用，后面尝试自己来实现，通过vuejs+element ui组件相对简单的方式实现了这个配置表单的功能，能够支持基本需求，具体看后面代码（简单粗暴）

• 接口数据增量下发，以及客户端获取配置时机和缓存策略

客户端每次启动的时候去获取一次配置，缓存【配置数据】，新增配置添加到缓存，已经存在进行替换
接口输出【配置数据】的同时在响应头上【timestamp】= 带上当前请求的服务器时间戳
客户端获取数据，缓存【配置数据】&【timestamp】
客户端下次请求的头上带上【timestamp】= 缓存的时间戳，第一次请求可以不用
服务端接收到请求的时候获取客户端的【timestamp】，过滤配置的时候校验最后更新时间>=【timestamp】进行输出【配置数据】

• 保障高可用，高稳定，高性能，容错

配置数据进行多级缓存，第一级缓存【redis】，第二级缓存【服务器内存】（php apcu）
接口优先从【服务器内存】中获取，如果不存在从【redis】 并同步到【服务器内存】，不存在从【mysql】 并同步到【redis】，正常后台编辑完就同步到redis，【服务器内存】就进行短暂性的缓存（3s），保障在高并发的情况下可以快速下发，弊端就是数据变化的时候会延迟N/s后更新

客户端在获取缓存配置的时候如果不存在需要自己有个默认配置，极端情况下无法获取配置的容错机制，保障功能的正常运行

解决方案

配置管理列表界面：

配置添加和表单JSON配置界面（开发人员操作）：
[外链图片转存失败,源站可能有防盗]!链机制,建(http://blog.thankbabe.com/imgs/config_center_add.png)]

配置数据表单界面（产品/运营童鞋操作）：

前端框架/库：

• vuejs
• element ui 饿了么UI
• jsoneditor json编辑组件
• VueQuillEditor vuejs富文本组件

主要的代码内容，如下：

表设计：

-- 配置中心表
CREATE TABLE `config_center` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增ID',
  `title` varchar(100) NOT NULL DEFAULT '' COMMENT '标题',
  `code` varchar(60) NOT NULL DEFAULT '' COMMENT '标识',
  `platform` tinyint(4) NOT NULL DEFAULT '0' COMMENT '0=所有，1=IOS，2=安卓',
  `template` tinyint(4) NOT NULL DEFAULT '1' COMMENT '模板标识',
  `form_json` text NOT NULL COMMENT '表单JSON',
  `form_data` text NOT NULL COMMENT '表单数据',
  `description` varchar(255) NOT NULL DEFAULT '' COMMENT '描述',
  `app_version` varchar(15) NOT NULL DEFAULT '' COMMENT 'app版本',
  `app_version_compare` varchar(10) NOT NULL DEFAULT '' COMMENT 'app版本比较符号',
  `operator` varchar(20) NOT NULL DEFAULT '' COMMENT '编辑人',
  `create_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '更新时间',
  `status` tinyint(4) NOT NULL DEFAULT '1' COMMENT '状态，1=有效，-1=删除',
  PRIMARY KEY (`id`),
  KEY `index_code` (`code`),
  KEY `index_update_at_platform` (`update_at`,`platform`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

表单配置JOSN内容：

[
    {
   
        el: "input"