最近工作的三個(gè)月，記錄下學(xué)習(xí)到的東西。
一、團(tuán)隊(duì)協(xié)作工具
- Coding ——感覺(jué)很爛的國(guó)產(chǎn)版本控制平臺(tái)
- Trello —— 很簡(jiǎn)潔的看板
- 石墨文檔 —— 文檔協(xié)作
- BearyChat —— 國(guó)產(chǎn)類似slack的工具，可以對(duì)接多個(gè)平臺(tái)
- 基于Easy-mock改版的mock平臺(tái)
二、Mock平臺(tái)
由于需要傳參驗(yàn)證功能，easy-mock原本不支持，所以基于他在接口定義的時(shí)候添加了表單來(lái)添加傳參設(shè)置，三個(gè)參數(shù)，參數(shù)名稱、參數(shù)類型、參數(shù)備注。
1.所需資源
2.修改要點(diǎn)
1）在這里是用來(lái)對(duì)mock請(qǐng)求進(jìn)行處理的方法，我們?cè)谶@里對(duì)參數(shù)進(jìn)行驗(yàn)證即可。具體如下，由于GET請(qǐng)求直接放在url所以所有參數(shù)都是String類型所以類型判斷就沒(méi)有了
// 傳參判斷
let errors
// 根據(jù)方法來(lái)選擇參數(shù)的格式判斷
if(api.method !== 'get') { // get之外的方法
let paramData = JSON.parse(api.params)
let rule = {}
for( let key in paramData) {
// console.log(key)
rule[key] = paramData[key][0]
}
errors = parameter.validate(rule, body)
} else { // get方法
let paramData = JSON.parse(api.params)
let rule = {}
for ( let key in paramData ) {
rule[key] = 'string' // 這地方只能判斷string ， query獲取到的全都是字符串類型， 所以get參數(shù)應(yīng)該只能判斷是否存在，不能判斷類型
}
// 此處巨坑，query沒(méi)有hasOwnProperty
let queryObj = {}
for ( let key in query ) {
queryObj[key] = query[key]
}
errors = parameter.validate(rule, queryObj)
}
2）頁(yè)面修改在這里
<!-- 參數(shù)列表 get方法放在url后？，其余放于body里-->
<Form-item :label="$t('p.detail.editor.paramsList')" >
<Button style="width:100%" type="ghost" @click="handleAdd">+</Button>
<div class="box">
<div v-for="(item, index) in formDynamic.items" :key="index" v-if="item.status">
<Row>
<Col span="7">
<Input type="text" v-model="item.value" placeholder="參數(shù)名稱"/>
</Col>
<Col span="7">
<i-select v-model="item.paramType" placeholder="請(qǐng)選擇參數(shù)類型">
<Option v-for="item in paramTypes" :value="item.type" :key="item.type">{{ item.type }}</Option>
</i-select>
</Col>
<Col span="7">
<Input type="text" v-model="item.info" placeholder="參數(shù)說(shuō)明"/>
</Col>
<Col span="2" offset="1">
<Button type="ghost" @click="handleRemove(index)">-</Button>
</Col>
</Row>
</div>
</div>
<!-- <Button type="ghost" @click="getParams">push</Button> -->
</Form-item>
3.功能展現(xiàn)
體驗(yàn)地址: http://mock.zzes1314.cn
1）設(shè)置傳參
2）驗(yàn)證傳參
三、開發(fā)相關(guān)
1.開發(fā)模式
2.Node
我負(fù)責(zé)的是node中間層，渲染頁(yè)面。
使用的是egg框架，模板使用nunjunks
主要就是請(qǐng)求后端總API，然后對(duì)頁(yè)面進(jìn)行渲染
3.遇到問(wèn)題
1）一個(gè)頁(yè)面需要請(qǐng)求多個(gè)API的數(shù)據(jù)來(lái)渲染
通過(guò)async庫(kù)來(lái)將多個(gè)請(qǐng)求異步進(jìn)行，最后一起獲取到，請(qǐng)求的時(shí)間由其中請(qǐng)求最長(zhǎng)的時(shí)間來(lái)定。
請(qǐng)求后的數(shù)據(jù)將放在一個(gè)對(duì)象里
http://caolan.github.io/async/docs.html#parallel
2）如何獲取渲染后的列表按鈕
遇到渲染后的列表，每個(gè)列表有按鈕需要對(duì)列表的項(xiàng)操作，通過(guò)data-*在渲染的時(shí)候把接口需要的id或者其他標(biāo)識(shí)符渲染進(jìn)去，按鈕點(diǎn)擊的時(shí)候通過(guò)dataset獲取即可
3）無(wú)法獲取頁(yè)面帶過(guò)來(lái)的cookie
cookie需要設(shè)置銷毀時(shí)間，才能獲取到，不知道為啥。。。
**4) 字符串?dāng)?shù)字轉(zhuǎn)數(shù)字
let a = '1111'
+a // => 1111
