前后端分离

2019.5.3 星期五 23：45

前后端分离开发痛点
解决问题：文档，mock data/mock server，自动化测试
上面三个单拆开来，都不难；关键是怎么和自动测试集合在一起

还有契约测试：基于持续集成与自动化测试

契约测试：当我们定义好了这个API的规范时，这个API就可以称为是前后端之间的契约，这种设计方式称之为契约式测试

分述

文档

许多写文档的库，比如：jsDoc、apidoc，swagger，showDoc，
YUIDoc、Dox、Docco、JSDuck

$BLOB:[文档注释生成库调研]

根据一定的规则，写文档。也可以直接从注释中生成。

mock data

如果只是mock data/mock server 是比较简单的。
mock data的库：fakejs, mockjs
方式：
1) 代码中硬编码(直接写数据)
2) 封装拦截器
3) 为所有接口统一添加前缀
4) 代理。server代理，工具代理
webpack-dev-server,nginx
Fiddler、charles; chrome 插件($PS: 应该可以实现)

mock server：json-server，express，mockjs，…
有的代价比较大，比如express；直接mock data简单。只是没有网络请求，但是不影响异步，可以封装Promise

测试/自动测试

单个接口：get 可以直接在浏览器url请求
post等需要借助工具/插件：postman，runapi,36nu

如果多个接口要测试，需要写测试用例/导入测试数据，可以自动测试
正常情况，非正常情况（参数判断，返回判断，边界值，异常）

需要写脚本测试，可以建表格导入不同的测试数据，也可以测试性能。生成报告？？
上述不包括性能测试。有比较强大的可以顺带测试性能的，比如基于java的（$PS: 咱也不熟）

集合

以前做法

hybris 开发：json server 试成功也没有用（chrome设置也可以直接请求json文件）
直接引入fakejs和fake data ，硬编码。
fake相较于mock简单，造假能力也丰富，不同于mock的语法、规则，没有占位符，api（命名）一看就懂

danghao一期：没有发送请求，硬编码数据，需要的地方用Promise返回数据。（当时已经证明接口是通的）
danghao二期: 发送请求，用webpack-dev-server 做了代理（都代理到同一个接口了），请求回来的数据直接硬编码，也没有fake

现在

首先没有文档，需要文档，这是最主要的。
其次，最好可以对后端的接口做自动测试，通过后再接入，不需要挨个去测后端的接口（即使后端测完，也需要验证；而且他们测的也不全/正确）
mock data也少不了

实现

showdoc

https://www.showdoc.cc/
适合写文档，单纯的文档。可以有多个页面，可以写api文档，字典，说明书、术规范说明文档
可以团队管理，自己搭环境

没有mock data能力，也没有导出数据。测试更没有

swagger-ui

https://github.com/swagger-api/swagger-ui
$PS: 有在线编辑器
http://swagger.io
swagger语法写起来比较复杂，虽然功能看起来很强大，yaml语法似乎写起来也省事（$PS: 只用缩进看起来有晃眼）
可以对接口进行测试（try it out），接口可以提供访问白名单？？

和jsdocs 比起来，还是jsdoc对前端友好一些。但是jsdoc貌似只生成文档，在js中写写注释还是不错的。如果写js库的话，可以考虑
fakejs/mockjs 只生成mock数据，或拦截请求，没有文档

postman 只对接口进行测试，可以写requests,可以添加到scenarios 做自动测试，也有ASSERTIONS
同样不是文档，也无法mock data

rap2

http://rap2.taobao.org/repository
https://github.com/thx/RAP/
文档：twiki $PS: 好像还是rap1
上面是公开的在线地址，也可以自己搭建
建仓库，有model概念，团队管理，写文档，mock data/mock server ，还有状态

关键这个2，页面不鲁棒：不是加载半天不出来，就是提交缓慢
$PS: 可能和作者后端不熟有关

如果要做测试，可以配合postman一起使用

yapi

http://yapi.demo.qunar.com/project/
https://github.com/YMFE/yapi/
文档：https://yapi.ymfe.org/documents/index.html

需要自己搭，公共的没有管理权限；权限管理，可视化接口管理，Mock Server，自动化测试，数据导入，插件机制
功能还是比较强大的：
接口（接口列表，测试集合），动态，数据管理，设置（项目，环境，请求，token，全局mock），wiki

mock data：参数支持（rap2没有试成功）；json-schema；json（mockjs+json5）；拖动排序
还有高级mock（自定义mock数据，rap2的话，还需要自己写点东西），测试校验
自动化测试：环境配置（方便测试不同环境，线上/测试/本地）；服务端测试；全局变量
数据导入/导出：json，swagger，har，postman； html，插件还支持word
二次开发：勾子函数，全局api

唯一弱于rap2的是版本管理，但是有tag；感觉tag和版本管理没有关系，但是这个不影响目前使用，因为目前还没有不同版本的需求
yapi还有收藏，文档也比较全，有技术团队支持（去哪儿），完全中文开放
部署貌似也简单

rap2 和api共同问题

和rap2相同的不足是，相同的路径，即使url不同，也会是同一个接口。
rap2 可以根据 ${method} 区分get，post,delete等（rest风格）；yapi 有query？？
$PS: 上面的方式都没有尝试过，不确定

提需求了，实现不实现就不知道了
rap2: 不同url可以返回不同的接口数据

 yapi 下个版本需求收集
yapi：接口地址是否允许重复开关

danghao接口地址都是/index :/index?control=user&action=,/index?control=order&action=,/index?
在rap2和yapi看来这都是同一个接口，虽然可以根据参数动态返回数据；但这毕竟是当一个接口对待的，用yapi无法实现测试，测线上数据

需要和后端确认，接口路径是不是都是这一个，还是有不同的路径可以访问
如果都是一个路径，需要包装做拦截，如果不做webpack-dev-server代理，需要baseUrl。yapi的自动测试也难以实现了

总结

当然选yapi了， rap2 页面慢就有点难忍；还有文档，部署，团队方面
$PS: yapi（8k）的star比rap（9k）少，rap2（3k）。出现晚？？

附录

mock data

https://github.com/nuysoft/Mock/wiki

var baseURL=process.env.NODE_ENV === 'development' ? 'http://yapi.demo.qunar.com/mock/1304'
function fetchData(){
    var data=fakeData // 1) 代码中硬编码(直接写数据)
    fetch(BaseUrl+'/index')  // 3) 为所有接口统一添加前缀 
    fetch2('/index') // 2) 封装拦截器  
}
function fetch2(){
    // let redirect = "http://" + ROOT + '/mockjsdata/' + projectId + url;
    let redirect=`${RAP.protocol}://${RAP.host}/app/mock/${match.repositoryId}/${match.method}/${match.url}`
}

jsdoc文档

http://usejsdoc.org/
也可以给类添加文档。
$PS: 可以自定义数据结构吗？？ definitions / Mock.Random.extend

/**
 * this is foo
 * @param1 {string} param1 - this is param1
 * @param2 {Object} param2 - this is param2
 * @returns {} - 
*/
funciton foo(param1,param2){
    
}

swagger文档

// swagger 。可以是rest风格。可分隔文件

swagger:"2.0"
info:
version:1.0.0
  title: Simple API
  description: A simple API to learn how to write OpenAPI Specification
schemes:
  - https
host: simple.api
basePath: /openapi101
paths:
  /persons:
    get:
      summary: Gets some persons
      description: Returns a list containing all persons. The list supports paging.
      parameters:
       - name: pageSize
         in: query
         description: Number of persons returned
         type: integer
       - name: pageNumber
         in: query
         description: Page number
         type: integer
      responses:
        200:
          description: A list of Person
          schema:
            $ref: "#/definitions/Persons"
        500:
          $ref: "#/responses/Standard500ErrorResponse"
    post:
      summary: Creates a person
      description: Adds a new person to the persons list.
      parameters:
        - name: person
          in: body
          description: The person to create.
          schema:
            $ref: "#/definitions/Person"
      responses:
        204:
          description: Persons succesfully created.
        400:
          description: Persons couldn't have been created.
        500:
          $ref: "#/responses/Standard500ErrorResponse"
  /persons/{username}:
    get:
      summary: Gets a person
      description: Returns a single person for its username.
      parameters:
        - name: username
          in: path
          required: true
          description: The person's username
          type: string
      responses:
        200:
          description: A Person
          schema:
            $ref: "#/definitions/Person"
        404:
          description: The Person does not exists.
        500:
          $ref: "#/responses/Standard500ErrorResponse"
definitions:
  Person:
    required:
      - username
    properties:
      firstName:
        type: string
      lastName:
        type: string
      username:
        type: string

2019.5.4 星期六 02：13