最近工作的三个月,记录下学习到的东西。
一、团队协作工具
- Coding ——感觉很烂的国产版本控制平台
- Trello —— 很简洁的看板
- 石墨文档 —— 文档协作
- BearyChat —— 国产类似slack的工具,可以对接多个平台
- 基于Easy-mock改版的mock平台
二、Mock平台
由于需要传参验证功能,easy-mock原本不支持,所以基于他在接口定义的时候添加了表单来添加传参设置,三个参数,参数名称、参数类型、参数备注。
1.所需资源
2.修改要点
1)在这里是用来对mock请求进行处理的方法,我们在这里对参数进行验证即可。具体如下,由于GET请求直接放在url所以所有参数都是String类型所以类型判断就没有了
// 传参判断
let errors
// 根据方法来选择参数的格式判断
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参数应该只能判断是否存在,不能判断类型
}
// 此处巨坑,query没有hasOwnProperty
let queryObj = {}
for ( let key in query ) {
queryObj[key] = query[key]
}
errors = parameter.validate(rule, queryObj)
}
2)页面修改在这里
<!-- 参数列表 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="参数名称"/>
</Col>
<Col span="7">
<i-select v-model="item.paramType" placeholder="请选择参数类型">
<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="参数说明"/>
</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.功能展现
体验地址: http://mock.zzes1314.cn
1)设置传参
2)验证传参
三、开发相关
1.开发模式
2.Node
我负责的是node中间层,渲染页面。
使用的是egg框架,模板使用nunjunks
主要就是请求后端总API,然后对页面进行渲染
3.遇到问题
1)一个页面需要请求多个API的数据来渲染
通过async库来将多个请求异步进行,最后一起获取到,请求的时间由其中请求最长的时间来定。
请求后的数据将放在一个对象里
http://caolan.github.io/async/docs.html#parallel
2)如何获取渲染后的列表按钮
遇到渲染后的列表,每个列表有按钮需要对列表的项操作,通过data-*
在渲染的时候把接口需要的id或者其他标识符渲染进去,按钮点击的时候通过dataset
获取即可
3)无法获取页面带过来的cookie
cookie需要设置销毁时间,才能获取到,不知道为啥。。。
**4) 字符串数字转数字
let a = '1111'
+a // => 1111