前端接口处理 及 前后端接口约定

前端接口架构（即 api 统一管理）

• 前端所有接口放在一个统一的api目录下管理（即使别人的接口没有放在这里处理，自己的接口也一定要放在这个目录下管理）。后期如果后端接口结构有改变，这个目录文件可以很方便的处理成原来的数据结构，这样对原来的页面基本不会有改变，这样非常方便维护接口。
  【亲身经历】开发时都没问题。快上线了，后端因为什么原因，响应的数据结构变了。只能在页面中一个一个结构去改代码。
• 有的项目，一个项目会集成很多不同的子项目，这种统一的接口管理要分开放（解耦），不同的项目不要放在一个文件中，方便后期维护。

 

总结：把所有的接口统一放在外面管理是真的很有必要。

 

后端响应数据结构 约定

参考：https://juejin.cn/post/7097044885916057630

• 基础约定结构

  • 成功

    {
      "status": "ok",
      "msg": "操作成功",
      "data": {
        "id": 1,
        "username": "hunger",
        "avatar": "http://avatar.com/1.png",
        "updatedAt": "2017-12-27T07:40:09.697Z",
        "createdAt": "2017-12-27T07:40:09.697Z"
      }
    }

  • 失败

    {
        "status": "fail", 
        "msg": "错误原因"
    }

• 分页接口【列表数据，data的值都是数组】

  • 成功

    {
      "status": "ok",
      "msg": "获取成功",
      "total": 200, //全部博客的总数
      "page": 2, //当前页数
      "totalPage": 10, // 总页数
      "data": [
        { 
          "id": 1,                 //博客 id
          "title": "博客标题",       
          "description": "博客内容简要描述", 
          "user": {
            "id": 100, //博客所属用户 id,
            "username": "博客所属用户 username",
            "avatar": "头像"
          },
          "createdAt": "2018-12-27T08:22:56.792Z",   //创建时间
          "updatedAt": "2018-12-27T08:22:56.792Z"  //更新时间
        },
        ...
      ]
    }

  • 失败

    {
        "status": "fail", 
        "msg": "系统异常"
    }

 

 

 

 

 

时刻记住：代码的方便维护，比性能重要百倍。