image.png
image.png

职责分离

  • 前后端仅仅通过异步接口(AJAX/JSONP)来编程
  • 前后端都各自有自己的开发流程,构建工具,测试集合
  • 关注点分离,前后端变得相对独立并松耦合

开发流程

前端一般会通过api发请求给后端来获取数据或者是用来对数据进行一些增删改查,那么前端在开发的时候就需要注意和后端的开发人员约定好接口文档规范

  • 后端编写和维护接口文档,在 API 变化时更新接口文档
  • 后端根据接口文档进行接口开发
  • 前端根据接口文档进行开发 + Mock平台

接口文档规范

依据:需求文档分析、交互分析
包含:

  • 当前接口的路径
  • 当前接口提交数据的类型
    • GET 获取数据
    • POST 提交或者创建
    • PATCH 修改数据,部分修改
    • DELETE 删除数据
    • PUT 修改数据,整体替换原有数据
  • 提交参数:
    • 参数类型/格式,比如是 json 格式,还是 application/x-www-form-urlencoded的数据
    • 参数字段,及限制条件
  • 返回数据:
    • 返回成功的数据格式
    • 返回失败的数据格式

举例如下:

功能: 用户注册

  • 当前接口的路径:/auth/register
  • 当前接口提交数据的类型:POST
  • 提交参数
    • 参数类型:Content-Type: application/x-www-form-urlencoded;charset=utf-8
    • 参数字段
      • username : 用户名, 长度1到15个字符,只能是字母数字下划线中文
      • password : 密码, 长度6到16个任意字符
  • 返回数据
    • 失败
      • 状态码 400
      • 返回格式 {msg: ‘错误原因’}
    • 成功
      • 状态码 200
      • 返回格式如下
        1. {
        2. "msg": "注册成功",
        3. "data": {
        4. "id": 1,
        5. "username": "hunger",
        6. "updatedAt": "2017-12-27T07:40:09.697Z",
        7. "createdAt": "2017-12-27T07:40:09.697Z"
        8. }
        9. }

接口设计原理

需求分析和系统分析

需求分析手段:用例图(用户如何使该功能,给出所有的子即可)
系统分析手段:时序图(按照间顺,把各个角色的功能画出来)

用例图和时序图

用例图:
概念:把用户能做的事情列出来,不关心实现细节
作用:梳理功能,方便测试,功能验收
注意:若有多种用户,则要画多个小人儿

时序图:
概念:展示用户、客户端、服务端等角色的交互
作用:描述各物体间的交互,理清时间线,方便设计接口

RESTful风格

简单理解:接口设计符合直觉即restful风格的接口

特点:

  1. 路径以资源名为中心
  2. 不同操作使用不同请求动词来区分
  3. 操作结果使用正确且适当的状态码来区分
  4. 操作结果的细节使用响应消息体容纳