最近工作的三個(gè)月兢孝,記錄下學(xué)習(xí)到的東西。
一睬捶、團(tuán)隊(duì)協(xié)作工具
- Coding ——感覺很爛的國產(chǎn)版本控制平臺
- Trello —— 很簡潔的看板
- 石墨文檔 —— 文檔協(xié)作
- BearyChat —— 國產(chǎn)類似slack的工具黔宛,可以對接多個(gè)平臺
- 基于Easy-mock改版的mock平臺
二、Mock平臺
由于需要傳參驗(yàn)證功能擒贸,easy-mock原本不支持臀晃,所以基于他在接口定義的時(shí)候添加了表單來添加傳參設(shè)置,三個(gè)參數(shù)介劫,參數(shù)名稱徽惋、參數(shù)類型、參數(shù)備注座韵。
1.所需資源
2.修改要點(diǎn)
1)在這里是用來對mock請求進(jìn)行處理的方法险绘,我們在這里對參數(shù)進(jìn)行驗(yàn)證即可。具體如下誉碴,由于GET請求直接放在url所以所有參數(shù)都是String類型所以類型判斷就沒有了
// 傳參判斷
let errors
// 根據(jù)方法來選擇參數(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沒有hasOwnProperty
let queryObj = {}
for ( let key in query ) {
queryObj[key] = query[key]
}
errors = parameter.validate(rule, queryObj)
}
2)頁面修改在這里
<!-- 參數(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="請選擇參數(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ù)說明"/>
</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中間層白华,渲染頁面。
使用的是egg框架贩耐,模板使用nunjunks
主要就是請求后端總API弧腥,然后對頁面進(jìn)行渲染
3.遇到問題
1)一個(gè)頁面需要請求多個(gè)API的數(shù)據(jù)來渲染
通過async庫來將多個(gè)請求異步進(jìn)行,最后一起獲取到潮太,請求的時(shí)間由其中請求最長的時(shí)間來定管搪。
請求后的數(shù)據(jù)將放在一個(gè)對象里
http://caolan.github.io/async/docs.html#parallel
2)如何獲取渲染后的列表按鈕
遇到渲染后的列表,每個(gè)列表有按鈕需要對列表的項(xiàng)操作铡买,通過data-*
在渲染的時(shí)候把接口需要的id或者其他標(biāo)識符渲染進(jìn)去更鲁,按鈕點(diǎn)擊的時(shí)候通過dataset
獲取即可
3)無法獲取頁面帶過來的cookie
cookie需要設(shè)置銷毀時(shí)間,才能獲取到奇钞,不知道為啥澡为。。景埃。
**4) 字符串?dāng)?shù)字轉(zhuǎn)數(shù)字
let a = '1111'
+a // => 1111