Flask+LayUI开发手记（十）：构建统一的选项集合服务

       作为前端最主要的组件，无论是layui-table表格还是layui-form表单，其中都涉及到选项列的处理。如果是普通编程，一个任务对应一个程序，自然可以就事论事地单对单处理，前后端都配制好选项，手工保证两者的一致性，同时加强校验保证程序不出错。但是如果想做一个统一的库表编辑工具，这样处理显然是不行的。

       所以，对于选项域的处理，第一个要求就是前后端一体化，即由后端服务作为唯一的数据源提供方，而前端是根据后端的数据做展示，这样，可以省去诸多一致性的麻烦。毕竟，有一些通用选项在业务界面中无数次出现，如果是在前端每一个选项都要配置上选项目明细，那出现变动时的修改就是恶梦般的事件。

        当然，还有第二个要求，就是前端在表格和表单里处理选项域，对选项要能够完全参数化配置化，要通过DOM中的特殊定义的属性进行配置，通过属性要能指定选项集合名称、选项展示类型（列表、树以及其它）、显示格式（只显示名称、键值名称组合）以及选项的默认值等一系列信息，不能每一个选项都要对应JS处理程序，那样实现同样也是恶梦。

        按照上面的这些要求来设计，后端服务首先要满足前端展现的数据要求，如针对表格选项列显示要提供选项字典（映射表），对表单选项域要提供选项列表（包括选项树型列表）等，同时还要提供唯一索引的选项集合名称，以便前端请求可以指定集合下载。因此，首先应该构建一个选项集合的基础类，命名为OptionSet，内容如下：

#选项集合基础类
class OptionSet(object) :# 初始化方法def __init__(self,v_opt=None,n_opt=None,t_opt=None):self.opt_dict = v_optself.opt_name = n_optself.opt_title = t_opt#logging.debug('options %s' % str(v_opt))if n_opt :sysOptionPool.add_optset(n_opt,self)def get_dict(self):return self.opt_dictdef get_map(self) :return self.get_dict()def get_name(self,id):return self.get_dict().get(id) def get_list(self,**kwargs) :itemlist = []d_opt = self.get_dict()if d_opt == None :return Nonefor (k,v) in d_opt.items():itemlist.append([k,v])f_sort = kwargs.get('sort')if f_sort == None or f_sort == False:return itemlistreturn sorted(itemlist)def get_option(self,sort=None) :return self.get_list(sort=sort)

        首先是以字典方式定义好选项条目数据，之后再定义上选项集合的名称。同时类还提供多个对外接口函数，分别是取选项原始字典get_dict()，取选项映射字典get_map(),取选项名称get_name,取选项列表get_list(),取选项明细get_option()。 

        注意，此处有个坑，就是后来才发现python是有类变量和实例变量的区分的。实例变量必须在在__init__()初始化函数中进行定义，由于python学的时间不长，所以在定义变量时就想当然地以为和JAVA的写法一致，在类名后面就直接写出。在类名后面定义的变量称为类变量，类变量确实能在类里公用，但根据同一个类定义的不同变量实际也是共享的，所谓类变量实际类似JAVA中定义的静态类变量。而要每个实例有自己的变量，就必须以self.val的方式定义在__init__（）初始化方法。

        当然光有这个基础类是不够了，大多数选项条目是存储在数据库表里的，复杂一些的比如机构、菜单选项更是以父子节点的树型存储的，这些复杂选项将以OptionSet的子类扩展出来，目前总结，包括列表选项、树型选项和类别树型选项三种，将在下一节列出来。本节主要介绍选项集合整体框架的实现，OptionSet是选项集合的基础类，所以上述的接口函数，有很多是重复的，当然，随着各种扩展子类的出现，这些函数都会有不同的实现了。

        有了OptionSet基础类，就可以定义最简单的选项集合了，比如下面列出的这几个最常用的通用选项，作为系统全局变量，可以在具体业务实现模块中被引用。

#通用是否字段
optYesno = OptionSet({'Y':'是','N':'否',},'Yesno')#性别选项集合    
optGender = OptionSet({'0':'无','1':'男','2':'女',},'Gender')#通用状态选项集合
optStatus = OptionSet ({0:'正常',1:'停用',8:'临封',9:'封禁'},'Status')

        当然，以公用变量来定义选项明细确实可以用，并且通过名称的反射机制，也可以通过变量的字符串来查找到相应的选项，只是这并不是一个最佳的方案。更综合全面的方案还是将定义好的选项集合放到一个选项池里，这就是下面这个OptionPool类的实现机制。

        OptionPool的基本变量是一个包括选项集合名和集合实例的字典，通过一系列函数，可以把定义好的选项集合加入到选项池中，同样也可以对相应的选项集合进行删除、清空、列示以及重载。依托OptionPool类定义了唯一的实例sysOptionPool，相应的集合操作都将在此实例上进行。所以，在后端应用模块中想使用选项数据，直接引入该变量即可。

class OptionPool(object) :def __init__(self) :self.optpool = {}def add_optset(self,n_opt,optset) :self.optpool[n_opt]=optsetdef del_optset(self,n_opt) :self.optpool.pop[n_opt]#清理选项缓冲库def clr_optset(self):self.optpool.clear()#列出所有的选项集合def lst_optset(self) :return self.optpool.keys()#取指定的选项集对象def get_optset(self,n_opt) :return self.optpool.get(n_opt)#重新装入选项明细集，只对库表提取的选项集有效def reload_optset(self,n_opt) :rscode = self.optpool.get_optset(n_opt).reload()if rscode == 0 :udata =  f'重装选项集[{n_opt}]出错'else :udata = self.get_optset(n_opt).get_option()return (rscode,udata)#取多个选项集def get_options(self,nstr_opt) :nlst_opt = nstr_opt.split(';')udata = {}for v_opt in nlst_opt :n_opt,t_opt = v_opt.split('.',1) if '.' in v_opt else (v_opt,None)i_optset = self.get_optset(n_opt)if i_optset == None:return (0,f'获取选项集合时未发现选项集[{v_opt}]！！')optdata = i_optset.get_option(t_opt)if optdata == None :return (0,f'获取选项集合[{v_opt}]出错')udata[v_opt] = optdata#logging.debug('udata %s' % str(udata))#logging.debug('opt list: %s' % self.lst_optset())return (1,udata)#取多个选项集的字典映射def get_optmaps(self,nstr_opt) :nlst_opt = nstr_opt.split(';')udata = {}for v_opt in nlst_opt :n_opt,t_opt = v_opt.split('.',1) if '.' in v_opt else (v_opt,None)i_optset = self.get_optset(n_opt)if i_optset == None:return (0,f'获取选项映射MAP时未发现选项集[{v_opt}]！！')optdata=i_optset.get_map(t_opt)if optdata == None :return (0,f'获取选项映射[{v_opt}]出错')udata[v_opt] = optdatareturn (1,udata)#取多个选项集的列表def get_optlists(self,nstr_opt) :nlst_opt = nstr_opt.split(';')udata = {}for v_opt in nlst_opt :n_opt,t_opt = v_opt.split('.',1) if '.' in v_opt else (v_opt,None)i_optset = self.get_optset(n_opt)if i_optset == None:return (0,f'获取选项LIST时未发现选项集[{v_opt}]！！')optdata=i_optset.get_list(t_opt,sort=True)if optdata == None :return (0,f'获取选项列表LIST[{v_opt}]出错')udata[v_opt] = optdatareturn (1,udata)#重载多个选项集def reload_options(self,nstr_opt) :nlst_opt = nstr_opt.split(';')udata = {}for v_opt in nlst_opt :n_opt,t_opt = v_opt.split('.',1) if '.' in v_opt else (v_opt,None)i_optset = self.get_optset(n_opt)if i_optset == None:return (0,f'重装选项集[{v_opt}]未发现该集合！！')rscode = i_optset.reload()if rscode == 0 :return (rscode,f'重装选项集[{v_opt}]出错！！')optdata = self.get_optset(n_opt).get_option(t_opt)if optdata == None :return (0,f'重装选项集合[{v_opt}]获取数据出错！！') udata[v_opt] = optdatareturn (1,udata)sysOptionPool = OptionPool()

         定义完选项池后，即可依托选项池定义选项路由服务了。路由服务最好采用restful API编程模式，即由前端发送请求，后端以JSON格式提供数据，至于前端用数据怎么处理，由前端来自行定义。

       路由服务配合着选项池类的功能改进，即可完成我们想要的任何选项数据要求。当然，在这里要明确一下，后端的程序是提供基本数据的，前端展示的要求各种各样，如果前端能够依托基础数据实现，就由前端来实现吧。比如映射字典，虽然后端也提供数据服务，但是依托选项明细数据，前端也可以方便地将其变换为映射字典，基于减低服务端工作量的考虑，还是由前端JS完成变换更方便。

        路由服务提供如下的几个服务:

        无选项名称直接list:列出所有选项集合 map：

        选项名称后跟opr参数

        无参数：取选项集合 map:获取映射 list:获取列表 reload:重装         

#选项集合统一服务路由
@bp.route('/option/<n_opt>',methods=['GET','POST'])
@login_required
#@admin_auth
def sys_get_optset(n_opt):logging.info('Get OptionSet %s.....' % n_opt)if n_opt == 'list' :optkeylst = sysOptionPool.lst_optset()logging.debug('optset name : %s' % str(optkeylst))rscode = 1umsg = "取选项列表成功"udata = list(optkeylst)else :opr = request.values.get('opr')if opr == None :rscode,udata = sysOptionPool.get_options(n_opt)umsg = "取选项明细数据成功！！" + n_optelif opr == 'map':logging.debug('Get OptionSet Map %s.....' % n_opt)rscode,udata = sysOptionPool.get_optmaps(n_opt)umsg = "取选项明细字典成功！！" + n_optelif opr == 'list':logging.debug('Get OptionSet List %s.....' % n_opt)rscode,udata = sysOptionPool.get_optlists(n_opt)umsg = "取选项明细列表成功！！" + n_optelif opr == 'reload':rscode,udata = sysOptionPool.reload_options(n_opt)umsg = "重载选项明细集合成功！！" + n_opt#logging.debug('optset %s' %str(udata))if rscode == 0:umsg = udataudata = {}rsdata = {"success": rscode,"code": 0,"msg": umsg,"data":udata}return json.dumps(rsdata)

         最后，是前端获取选项集合的示例 。在table的列定义中和form的输入域中均可通过属性进行定义，示例如下：

listCols: [[ { type: 'checkbox', fixed: 'left' }......,{field: 'sex', title: '性别', width:60, sort: true,optset:'Gender',optformat:'name'},{field: 'telephone', title: '电话', width:100, sort: true},{field: 'role_cd', title: '会员角色', width: 100,optset:'MemberRole'},{field: 'status', title: '状态', width: 30,optset:'Status'}......
]]

    <div class="layui-form-item"><div class="layui-inline" style="width:30%"><label class="layui-form-label">角色</label><div class="layui-input-block"><select name="role_cd"  opt-set="MemberRole"><option value="">---请选择---</option></select></div></div><div class="layui-inline" style="width:30%"><label class="layui-form-label">性别</label><div class="layui-input-block"><select name="sex" opt-set="Gender" opt-default="1"></select></div></div><div class="layui-inline" style="width:33%"><label class="layui-form-label">状态</label><div class="layui-input-block"><select name="status" opt-set="Status"><option value="">---请选择---</option></select></div></div></div>

        应该说，前端的选项集合处理是以一个集成模块单独存在的，此处只列出获取选项集合的两个函数。首先是遍历前端页面获取所有的选项集合列表，这包括table中列信息和form中的输入域信息两部分，table派生的toolbar筛选域中也有选项集合，不过都包含在前两部分里了，所以不做遍历。生成的选项名称列表进行去重处理后发送对服务的请求，获取的数据存在前端统一的options接口对象中，其它模块均可通options对象获取相应数据。

var options={......}
//获取选项
function optset_load(options,callback) {let optlst = optnames(options);if (optlst.length==0) {if (callback) callback(options);return ;}let optstr= optlst.join(';');//console.log('optstr:',optstr,'optlst:',optlst);$.post(options.optUrl + '/' + optstr,{},function(rs){if(rs.success == 0 ){layer.msg(rs.msg,function(){});return false;}//layer.msg(rs.msg,function(){});options.optSet = rs.data;callback(options);},'json');
},//获取options中所有的选项集合的名称
function optnames(options) {let listmaps = [];options.listCols[0].forEach(function(icol) {let n_opt = icol.optmap || icol.optset;if (!n_opt) return ;listmaps.push(n_opt);});let optlst = $('[opt-set]').map(function() {n_opt = $(this).attr('opt-set');if (n_opt == '') {layer.msg('取opt-set名字时出现空值!!详细信息请查看控制台');console.log('取opt-set名字时出现空值!!',this);return ;}return n_opt;});optlst = [...optlst,...listmaps];if (optlst==null || optlst.length === 0) {return [];}return [...new Set(optlst)];
},

        通过上面这些程序，一个基本的选项集合集成框架初步成型。下面，就是以现在的框架为基础，继续细化，加入面向数据库存储的列表、树型以及多类别树型类了。下面是个简单的示例 。