vue
前言：很久没有更新文章了，看到有读者给我的文章点赞和关注，觉得自己的文字和分享能给帮助或者给读者有收获真是太好了！，换了工作了，新环境下一切都显得陌生，不过我是个很乐观的人，很快的就适应新环境了，新环境下是做vue.js的项目。这篇文主要分享的是工作中遇到的一些有趣或者觉得应该分享给读者的东西~
一般，我们前端从后端拿到的接口返回值时候，一定会遇到的情况就是，后端返回来的是一个int类型，而需要前端去展示字符串类型，遇到这种情况我们很快就有思路了，比如我去请求一个关于用户所属部门的接口，接口请求回来的时后端的一个int类型，分别对应的部门是
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用户的所属部门是<span>{{transfn(n)}}</span>
以上做法是挺好的，但是有个弊端，就是我总不能每次都写一个吧，我想的是写成一个配置模块，然后在需要的模块下加载配置模块，这样就能统一管理了，比如，新建一个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
<template>
<div>{{shopType}}</div>
<template>
<script>
import * as filter from '../filter.js'
export default {
data(){
return {
shopType:''
},
mounted(){
//假设我去请求一个接口，接口返回的是一个简单的int类型
this.shopType=filter.formatShopNameType(axios.get('/getShopType'));
}
}
}
</script>
这就是最简单的例子了，比较推荐模块化开发用，还有需要打包的项目上用，或者微信小程序，如果是其他小的项目，比较不推荐哈，例子虽简单，但是一切复杂的应用都是简单的代码写出来的，每天都积累些，进步会非常快~
欢迎访问我的个人网站zhengyepan.com
欢迎讨论交流~
