前言：很久沒有更新文章了，看到有讀者給我的文章點(diǎn)贊和關(guān)注，覺得自己的文字和分享能給幫助或者給讀者有收獲真是太好了！崔赌，換了工作了，新環(huán)境下一切都顯得陌生若贮，不過我是個(gè)很樂觀的人锥咸，很快的就適應(yīng)新環(huán)境了，新環(huán)境下是做vue.js的項(xiàng)目雪侥。這篇文主要分享的是工作中遇到的一些有趣或者覺得應(yīng)該分享給讀者的東西~
一般代乃，我們前端從后端拿到的接口返回值時(shí)候原茅，一定會(huì)遇到的情況就是，后端返回來的是一個(gè)int類型，而需要前端去展示字符串類型，遇到這種情況我們很快就有思路了峡迷，比如我去請(qǐng)求一個(gè)關(guān)于用戶所屬部門的接口傅物，接口請(qǐng)求回來的時(shí)后端的一個(gè)int類型蒿褂，分別對(duì)應(yīng)的部門是
0 行政部
1 技術(shù)部
2 商務(wù)部
3 運(yùn)維部
4 銷售部
5 財(cái)務(wù)部
... ...
后端返回的是整數(shù)類型，而我們前端顯示的是整數(shù)類型對(duì)應(yīng)的字符串，這時(shí)我們很快有思路削葱，寫一個(gè)轉(zhuǎn)換函數(shù)
transfn(n){
let str='';
if(n==0){
str='行政部'
}else if(n==1){
str='技術(shù)部
}
...
return str;
}
,假設(shè)在vue項(xiàng)目中，當(dāng)在頁面的時(shí)候顯示就是{{transfn(n)}}
A用戶的所屬部門是<span>{{transfn(n)}}</span>
以上做法是挺好的，但是有個(gè)弊端蛮瞄，就是我總不能每次都寫一個(gè)吧，我想的是寫成一個(gè)配置模塊，然后在需要的模塊下加載配置模塊，這樣就能統(tǒng)一管理了，比如，新建一個(gè)config.js,我采用的是es6寫法映之，如果您在看文的時(shí)候不清晰蠢甲，可以留言，我看到了一定回復(fù)哈~
export const Config = {
shopType: [
{ key: 1, value: '京東' },
{ key: 2, value: '天貓' },
{ key: 3, value: '唯品會(huì)' },
{ key: 4, value: '蘇寧易購(gòu)' },
{ key: 5, value: '淘寶' }
],
...
},
在新建一個(gè)filter.js,引入之前的config.js模塊
import {Config} from '../config.js'
// 網(wǎng)點(diǎn)類別 1.京東,2.天貓,3.唯品會(huì),4.蘇寧易購(gòu)
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
}
}
...
在需要用到的地方就導(dǎo)入相應(yīng)模塊，比如文件demo.vue
<template>
<div>{{shopType}}</div>
<template>
<script>
import * as filter from '../filter.js'
export default {
data(){
return {
shopType:''
},
mounted(){
//假設(shè)我去請(qǐng)求一個(gè)接口，接口返回的是一個(gè)簡(jiǎn)單的int類型
this.shopType=filter.formatShopNameType(axios.get('/getShopType'));
}
}
}
</script>
這就是最簡(jiǎn)單的例子了，比較推薦模塊化開發(fā)用，還有需要打包的項(xiàng)目上用，或者微信小程序，如果是其他小的項(xiàng)目，比較不推薦哈，例子雖簡(jiǎn)單涉瘾，但是一切復(fù)雜的應(yīng)用都是簡(jiǎn)單的代碼寫出來的秘蛇，每天都積累些艘策，進(jìn)步會(huì)非橙春海快~
歡迎訪問我的個(gè)人網(wǎng)站zhengyepan.com
歡迎討論交流~
