Web应用开发中的【下拉框选项列表抽象】

1. 需求描述

在Web应用开发中，经常需要操作表格，或是填写表单。在这些操作过程中，有一类通用的操作：下拉框选项列表。为什么说通用呢，通用在于，表格的显示过程中，如果存储的是另一张表格的id或者编码，就像学生表中，存储了所在班级的编号一样。学生表和班级表是两张表，而在学生表中，并不直接存储班级名称，而是存储的班级ID，或是班级编码。这个时候，如果前端并不修改对应的班级，则后台请求的时候，直接关联查询，把对应的班级名称关联上去即可。然而，大多数时候，前端是需要对班级进行修改的。
这个时候，不管是通过表格编辑，选择对应的班级字段所在单元格，弹出下拉框；或是，通过表格编辑，弹出表单编辑对话框，在对话框中，选择对应的班级字段，弹出下拉框，这两种方式，都会有一个下拉框的渲染。而下拉框中，渲染最常见的技术label（显示的文本）、value（存储的值）。
就这个功能，一个很常见的功能，几乎涉及到CRUD的时候，都会重复的去一遍又一遍的去写，不停的换个表格重复的写，一遍又一遍的重复，完成一个又一个的功能……

2. 实现思路

经过上述分析，不难发现。这个重复的功能，因为太过常用，却经常会被忽略。但一旦抽象出来，将节约大量的开发时间，因最近开发中，涉及到这个较多，故抽象出来，供后续思路重用。

3. 具体实现

3.1 前台实现

  /**
     * 调整名称，做到见名知意。
     * @param selectOptions  选项列表集合；
     * @param sourceFieldName  需要被标签化显示的字段；
     * @param objPara  标签化数据字典来源；
     * objPara中，包括：
     * 表名，optionsTable;
     * optionsFieldLabel;
     * optionsFieldValue;
     * optionsSortField;
     *
     */
    getSelectOptions(selectOptions,sourceFieldName, objPara) {
      let myParaObj = {};
      myParaObj.json = JSON.stringify(objPara)

      this.$axios.post("tools/getSelectOptions", myParaObj).then((res) => {
        if (res.code == 200) {
          selectOptions[sourceFieldName] = res.data
        }
      })
    },

说明：
上面的代码中，getSelectOptions表示获取选项列表。
需要注意的，是里面的参数：
（1）selectOptions用来挂载不同的字段对应的选项列表；在一个vue文件中，只需要一个selectOptions即可。对于不同的字段，需要显示下拉框，仅需要提供不同的sourceFieldName用来挂载选项列表即可。
（2）sourceFieldName 用来挂载不同下拉菜单，对应的类别标识；比如，sourceFieldName ：sex_id，用来挂载不同的性别对应的下拉菜单；sourceFieldName ：class_id，用来挂载不同的班级对应的下拉菜单；
（3）objPara 请求参数字段，其中包括：
optionsTable —— 对应选项来源表；
optionsFieldLabel —— 对应选项来源的显示文本；
optionsFieldValue —— 对应选项来源的显示值；
optionsSortField —— 对应选项来源的 排序字段。

3.2 后台实现

后台实现，后台实现的时候，需要考虑SQL注入攻击的问题。即，表格需要是数据库中已经存在的表格，对应的sourceFieldName 、optionsFieldLabel 、optionsFieldValue 、optionsSortField，都需要进行判断，都是该表已经存在的字段，方可进行拼接，从而避免SQL注入攻击。
具体实现，略。

4. 适用场景

适用于Web应用开发中的大多数场景。但当下拉框数据量很大的时候，需要做两方面的调整。一是下拉选项需要进行分页查询；二是下拉框已经存在的数据的渲染，不能再依赖于该selectOptions，而是需要请求的时候，从后台根据对应的sourceFieldName 列表，请求一个selectOptionsExist；每次下拉选择后，把selectOptionsExist 和selectOptions（分页）合并共同作为渲染列表，后续如果用到，再做进一步的探讨。

（好记性不如烂笔头。对抗遗忘的最好方式是：在解决问题的时候，记录下遇到的问题和解决的方式，后续遇到相同的问题，只需要翻翻笔记即可。）