大话APP配置功能的设计和落地
在参与各类app业务开发的过程当中，大部分都会遇到须要对某些功能/界面/数据能够灵活的管理后台控制，客户端根据配置变化而变化，不须要发版本就能够解决这些需求，大体功能需求就是须要提供一个后台功能，可以给产品/运营童鞋进行配置管理，而后经过服务端接口输出给客户端进行逻辑/渲染使用，这里针对这种场景，分享一个相对通用的解决方案php
项目背景
当前项目中针对这种配置的需求，每次都须要开发人员从新开发后台表单，而后修改配置接口针对配置进行输出，由于这个功能的开发要归宿到很早之前，也不知道当初为啥要这么作，如今存在的问题就是不容易维护和拓展，以及重复开发的成本html
整理需求
- 配置管理后台
- 支持版本控制
- 支持客户端类型（安卓/IOS/全部）
- 表单可配置
- 配置输出接口
- 增量下发
- 保证高可用，高稳定，高性能
- 客户端
- 接口下发配置数据进行缓存
技术背景
- 管理后台：php服务端+jquery+bootstrap
- 接口项目：php服务端
技术过程
-
前端技术选型：前端
- vuejs
- element ui
-
核心问题，如何后台配置生成表单（开发人员来配置）？vue
初步计划是经过配置表单的JSON生成element ui的表单，进行了一些调研，也找到能够经过配置JSON生成element ui表单的js库，感受灵活性差了些，并且当时还不支持富文本，感受后续拓展也是大问题，因此弃用，后面尝试本身来实现，经过vuejs+element ui组件相对简单的方式实现了这个配置表单的功能，可以支持基本需求，具体看后面代码（简单粗暴）mysql
- 接口数据增量下发，以及客户端获取配置时机和缓存策略
客户端每次启动的时候去获取一次配置，缓存【配置数据】，新增配置添加到缓存，已经存在进行替换
接口输出【配置数据】的同时在响应头上【timestamp】= 带上当前请求的服务器时间戳
客户端获取数据，缓存【配置数据】&【timestamp】
客户端下次请求的头上带上【timestamp】= 缓存的时间戳，第一次请求能够不用
服务端接收到请求的时候获取客户端的【timestamp】，过滤配置的时候校验最后更新时间>=【timestamp】进行输出【配置数据】jquery
- 保障高可用，高稳定，高性能，容错
配置数据进行多级缓存，第一级缓存【redis】，第二级缓存【服务器内存】（php apcu）
接口优先从【服务器内存】中获取，若是不存在从【redis】 并同步到【服务器内存】，不存在从【mysql】 并同步到【redis】，正常后台编辑完就同步到redis，【服务器内存】就进行短暂性的缓存（3s），保障在高并发的状况下能够快速下发，弊端就是数据变化的时候会延迟N/s后更新git
客户端在获取缓存配置的时候若是不存在须要本身有个默认配置，极端状况下没法获取配置的容错机制，保障功能的正常运行github
解决方案
配置管理列表界面： web
配置添加和表单JSON配置界面（开发人员操做）： redis
配置数据表单界面（产品/运营童鞋操做）：
前端框架/库：
- 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",
type: "textarea",
name: "名字",
field: "name",
value: "6666",
rule: [
{
required: true,
message: "请输入活动名称",
trigger: "blur"
}
]
},
{
el: "input-number",
type: "",
name: "数字",
field: "number",
value: 1,
min:1,
max:1000,
rule: [
{
required: true,
message: "数字",
trigger: "blur"
}
]
},
{
el: "input",
type: "text",
name: "描述",
field: "desc",
value: "",
rule: [
{
required: true,
message: "请输入活动名称",
trigger: "blur"
}
]
},
{
el: "editor",
type: "",
name: "富文本",
field: "editor",
value: "",
rule: [
{
required: true,
message: "请输入内容",
trigger: "blur"
}
]
},
{
el: "date",
type: "datetimerange",
name: "日期范围",
field: "datetime",
value: ["2019-01-01 10:00:00", "2019-03-01 08:00:00"],
rule: [
{
required: true,
message: "必须",
trigger: "blur"
}
]
},
{
el: "switch",
type: "",
name: "开关",
field: "open",
value: false,
rule: [
{
required: true,
message: "必须",
trigger: "blur"
}
]
},
{
el: "date",
type: "datetime",
name: "活动时间",
field: "datet",
value: "2019-01-01"
},
{
el: "slider",
type: "",
name: "范围",
field: "fw",
value: 0,
max: 500
},
{
el: "color",
type: "",
name: "颜色",
field: "color",
value: ""
},
{
el: "radio",
type: "",
name: "类型",
field: "type",
value: 0,
options: [
{
label: "类型1",
value: 1
},
{
label: "类型2",
value: 2
},
{
label: "类型3",
value: 3
}
]
},
{
el: "select",
type: "",
name: "食品",
field: "foods",
value: "黄金糕",
options: [
{
value: 1,
label: "黄金糕"
},
{
value: 2,
label: "双皮奶"
},
{
value: 3,
label: "蚵仔煎"
},
{
value: 4,
label: "龙须面"
},
{
value: 5,
label: "北京烤鸭"
}
]
},
{
el: "checkbox",
type: "",
name: "城市",
field: "city",
value: [0],
options: [
{
value: 1,
label: "上海"
},
{
value: 2,
label: "深圳"
},
{
value: 3,
label: "北京"
}
]
}
];
复制代码
vuejs + element ui 表单模板主要代码（简单粗暴）
<el-form size="small" :rules="rules" ref="form" :model="form" label-width="80px">
<el-form-item v-for="(item,index) in formData" :key="item.key" :label="item.name" :prop="item.field">
<!--input 输入框-->
<el-input v-if="item.el==='input'" :type="item.type" style="width:400px" v-model="form[item.field]"></el-input>
<!--input 数字输入框-->
<el-input-number v-if="item.el==='input-number'" :min="item.min" :max="item.max" v-model="form[item.field]"></el-input-number>
<!--datetime 时间-->
<el-date-picker v-if="item.el==='date'" :type="item.type" v-model="form[item.field]" placeholder="选择日期时间">
</el-date-picker>
<!--switch 开关-->
<el-switch v-if="item.el==='switch'" v-model="form[item.field]" active-text="" inactive-text="">
</el-switch>
<!--滑块-->
<el-slider v-if="item.el==='slider'" v-model="form[item.field]" :max="item.max?item.max:100"></el-slider>
<!--颜色选择-->
<el-color-picker v-if="item.el==='color'" v-model="form[item.field]"></el-color-picker>
<!--单选-->
<el-radio v-if="item.el==='radio'" v-for="(option,index) in item.options" :key="option.key" v-model="form[item.field]" :label="option.value">
{{ option.label }}
</el-radio>
<!--多选-->
<el-checkbox-group v-if="item.el==='checkbox'" v-model="form[item.field]">
<el-checkbox v-for="(option,index) in item.options" :key="option.value" :label="option.value">
{{ option.label }}
</el-checkbox>
</el-checkbox-group>
<!--选择器-->
<el-select v-if="item.el==='select'" v-model="form[item.field]" placeholder="请选择">
<el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value">
</el-option>
</el-select>
<!-- 富文本-->
<quill-editor v-if="item.el==='editor'" v-model="form[item.field]"></quill-editor>
</el-form-item>
</el-form>
复制代码
js代码：
//富文本组件
Vue.use(VueQuillEditor);
$vm = new Vue({
el: "#app",
data: {
template: "1",
form: {},
rules: {},
formData: {},
},
methods: {
useTemplate: function () {
switch (this.template) {
case "1": {
var formJson = [];
if (this.config['form_json']) {
formJson = this.config['form_json'];
} else if (templateOneJson) {
formJson = templateOneJson;
}
editorJson(formJson);
this.createForm(formJson);
return
}
}
},
//预览
review: function () {
var jsonData = editor.get();
this.createForm(jsonData);
},
//根据配置的JSON，解析出构造表单须要的Vue数据
getData: function (json) {
var data = {
//表单数据
form: {},
//表单验证规则
rules: {},
//表单控件配置
formData: {}
};
//构造数据
for (var index in json) {
var item = json[index];
data.form[item.field] = item.value;
if (item.rule) data.rules[item.field] = item.rule;
}
data.formData = json;
return data;
},
//建立表单Vue对象
formVue: function (data) {
Vue.set($vm, "form", data.form);
Vue.set($vm, "rules", data.rules);
Vue.set($vm, "formData", data.formData);
// $vm.$forceUpdate();
},
//根据配置JSON生成Form表单
createForm: function (json) {
var data = this.getData(json);
console.log(data);
this.formVue(data);
}
}
});
复制代码
前端部分由于基于原有项目技术背景拓展，用最原始的link引入方式，并且没有拉到前端同窗参与，前端部分若是能够把后台功能进行先后端分离，而后基于组件化封装那就最好不过了，存后端童鞋折腾想一想就好，low了点，能用哈，不过不影响基本实现思路可借鉴参考
总结
当你在开发产品需求时候，除了要解决眼前的问题，是否有思考过以前或者未来也会遇到不少相似的问题。把你的解决方案从解决一个问题扩展到解决一类问题是一项很是重要的能力，也每每是区分新人与资深技术人员的一条分界线
首发于Github🌈大话WEB开发，欢迎Star 🥰
相关文章
- 1. 大话APP配置功能的设计和落地
- 2. 可扩展设计落地
- 3. 设计原则落地
- 4. 产品设计 | App功能设计的21条注意事项
- 5. 可落地的DDD(5)-战术设计
- 6. 大话webpack-完善功能
- 7. 如何设计APP唤起落地页，促进用户增加？
- 8. uni-app - 拨打电话功能
- 9. Window7 IIS功能的安装和配置
- 10. 框架设计：RN 端的框架如何设计与落地
- 更多相关文章...
- • hibernate.cfg.xml和C3P0连接池的配置 - Hibernate教程
- • IP地址分配（静态分配+动态分配+零配置） - TCP/IP教程
- • IntelliJ IDEA 代码格式化配置和快捷键
- • IntelliJ IDEA代码格式化设置
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 大话APP配置功能的设计和落地
- 2. 可扩展设计落地
- 3. 设计原则落地
- 4. 产品设计 | App功能设计的21条注意事项
- 5. 可落地的DDD(5)-战术设计
- 6. 大话webpack-完善功能
- 7. 如何设计APP唤起落地页，促进用户增加？
- 8. uni-app - 拨打电话功能
- 9. Window7 IIS功能的安装和配置
- 10. 框架设计：RN 端的框架如何设计与落地