vue项目中做配置后端字符转前端显示

vue

前言：很久没有更新文章了，看到有读者给我的文章点赞和关注，觉得自己的文字和分享能给帮助或者给读者有收获真是太好了！，换了工作了，新环境下一切都显得陌生，不过我是个很乐观的人，很快的就适应新环境了，新环境下是做vue.js的项目。这篇文主要分享的是工作中遇到的一些有趣或者觉得应该分享给读者的东西~

0        行政部1        技术部2        商务部3        运维部4        销售部5        财务部...       ...

后端返回的是整数类型，而我们前端显示的是整数类型对应的字符串，这时我们很快有思路，写一个转换函数

transfn(n){       let str='';       if(n==0){
            str='行政部'
       }else if(n==1){
            str='技术部
      }
      ...

    return str;
}

,假设在vue项目中，当在页面的时候显示就是{{transfn(n)}}
A用户的所属部门是{{transfn(n)}}

以上做法是挺好的，但是有个弊端，就是我总不能每次都写一个吧，我想的是写成一个配置模块，然后在需要的模块下加载配置模块，这样就能统一管理了，比如，新建一个config.js,我采用的是es6写法，如果您在看文的时候不清晰，可以留言，我看到了一定回复哈~

export const Config = {  shopType: [
    { key: 1, value: '京东' },
    { key: 2, value: '天猫' },
    { key: 3, value: '唯品会' },
    { key: 4, value: '苏宁易购' },
    { key: 5, value: '淘宝' }
  ],
...
 
},

在新建一个filter.js,引入之前的config.js模块

import {Config} from '../config.js'// 网点类别 1.京东,2.天猫,3.唯品会,4.苏宁易购export function formatShopNameType (value) {  if (typeof value === 'undefined' || value === '' || value === null || value === 'undefined') {    return '--'
  } else {    let str = '--'
    Config.shopType.forEach(item => {      if (item.key === parseInt(value)) {
        str = item.value
      }
    })    return str
  }
}
...

在需要用到的地方就导入相应模块，比如文件demo.vue