一、需求分析

需求背景:在做一个ES查询微服务的时候,后台使用枚举类型约定了0-4这四个数字分别代表查询用户、问答、资源（用户上传的文章）、文章以及所有类型，于是后台传入的参数就只能有这几个，传入其他的数字均视为非法请求。

由于后台规定好传入到的参数以后，为了便于维护，前台也应该使用枚举规定传入到后台的参数。

1. 后台枚举如下：

   import lombok.AllArgsConstructor;
   import lombok.Getter;
   
   /**
    * 搜索类型
    */
   @Getter
   @AllArgsConstructor()
   public enum SearchTypeEnum {
       article(0, "文章","mcb_article"),
       user(1, "用户","sys_user"),
       source(2, "用户上传的资源","mcb_source"),
       question(3, "问答","mcb_question"),
       all(4,"查询所有类型","-1");
       private final Integer code;
       private final String desc;
       private final String indicesName; //ES文档名字
   }
   
   

2. 前台查询类型如下两种

   a. 通过url参数传入 查询

   http://localhost:3000/search/?key=单点登录&t=4
   

   b. 通过用户点击 tab标签
   

二、具体实现

1. 定义枚举

   //使用方法
   /**
    * 获取枚举值：SEARCH_TYPE.article
    * 获取枚举描述：SEARCH_TYPE.getDesc('article')
    * 通过枚举值获取描述：SEARCH_TYPE.getDescFromValue('article')
    * 通过描述获取枚举值：SEARCH_TYPE.getValueFromDesc('article')
    */
   
   let SEARCH_TYPE = createEnum({
       article: [0, 'article'],
       user: [1, 'user'],
       source: [2, 'source'],
       question: [3, 'question'],
       all: [4, 'all'],
   });
   
   function createEnum(definition) {
       const valueMap = {};
       const descMap = {};
       for (const key of Object.keys(definition)) {
           const [value, desc] = definition[key];
           valueMap[key] = value;
           descMap[value] = desc;
       }
       return {
           ...valueMap,
           getDesc(key) {
               return (definition[key] && definition[key][1]) || 'all';
           },
           getDescFromValue(value) {
               return descMap[value] || 'all';
           },
           getValueFromDesc(value) {
               return valueMap[value] || 0;
           }
       }
   }
   
   export default SEARCH_TYPE;
   
   

2. 使用

   获取枚举值:

   <script>
   import SEARCH_TYPE from "@/utils/SearchEnum";
   
   export default {
       data() {
           return {
               searchWord:""
           }
       },
       validate({params}) {
           return /^\d+$/.test(params.id)
       },
       methods: {
             search(){
               //获取查类型的枚举值  
               const type = SEARCH_TYPE.article
               console.log(type)
           }
       },
   }
   

   将根据描述(用户点击tab标签的时候传入的就是枚举值)获取枚举值

   <script>
   import SEARCH_TYPE from "@/utils/SearchEnum";
   
   export default {
       data() {
           return {
               searchWord:""
           }
       },
       validate({params}) {
           return /^\d+$/.test(params.id)
       },
       methods: {
             handleClick(tab, event) {
               //根据tab名字从枚举里面获取value
               this.searchType = SEARCH_TYPE.getValueFromDesc(tab.paneName);
               this.search();
               // 使用这个方法极大的简化了根据tabname做出判断的过程,一下是优化前的部分代码
               // switch (tab.padding) {
               //     case 'article':
               //         this.searchType = 0
               //         break
               //     case 'user':
               //         this.searchType = 1
               //         break
               //     case 'source':
               //         this.searchType = 2
               //         break
               //     case 'blog':
               //         this.searchType = 0
               //         break
               // }
              
           },
            async search() {
               //do something 
            }
       },
   }