美文网首页
实习三个月记录

实习三个月记录

作者: ZZES_ZCDC | 来源:发表于2018-07-20 10:02 被阅读387次

    在一家公司实习三个月,记录下学习到的东西。

    一、团队协作工具

    • 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
    

    相关文章

      网友评论

          本文标题:实习三个月记录

          本文链接:https://www.haomeiwen.com/subject/katfmftx.html