前端接口设计

概述

  在协作流程的博文中,我们了解了一个Web系统的体系架构,以及前端与后端交互的整个流程,接下来简单回顾,并进行相应的规则约定

前端接口设计

  当客户端向服务器端发送一个请求时,服务器端的Web系统收到该请求,通过分析来进行一系列的操作,包括搜集所有的数据模型,通常这个过程会伴随有数据库操作;数据搜集完成后,Web系统根据请求信息,选择合适的模板来响应Web客户端

  这时,问题来了,用户请求的地址需要通过什么样的约定规则映射到视图模板上呢?

  Web系统选择了合适的模板之后,将搜集的数据模型按照一定的约定规则,交给模板引擎进行页面结构的组装

  这时,问题又来了,不同的模板需要通过什么样的约定规则与数据模型进行匹配呢?

  有了视图模板和数据模型后,Web系统就可以组装出客户端所需要的页面结构,然后再将这个页面结构返回给客户端。客户端拿到返回的数据模型后,根据一定的规则绘制页面,同时展示给用户

  实际上,页面只包含了一部分数据,还有一部分数据需要通过另外的接口来载入。接下来,客户端根据一系列的约定规则发起数据请求

  问题来了,一个页面需要包含哪些数据载入的请求呢?换句话说,一个页面中,哪些数据需要通过异步请求载入进来的呢?

  Web系统收到数据请求之后,根据一系列的数据操作,筛选出约定的数据模型

  最后的问题,一个数据请求需要什么样的约定规则来与数据模型进行匹配呢?

  Web系统搜集到数据之后,按照约定规则组装出数据模型,返回给客户端。客户端将数据模型按照一定的结构展示给用户

  在以上的交互流程中,我们可以提取出4个关键的元素:URL、TEMPLATE、API、MODEL

前端接口设计

  URL:页面访问地址或者称为页面标识

  Template:一个页面对应的分离了数据模型之后的页面结构,后续可以根据不同的数据模型展现不同的信息

  API:页面用于载入数据的异步请求的接口

  Model:数据模型(包含组装页面模板的模型和异步请求返回的数据模型)

  如果要对前后端进行分离,需要进行以下一些规则约定

前端接口设计

  1、URL与模板的约定,约定了页面需要映射到哪些视图模板上去

  2、URL与异步接口的约定,约定了页面有哪些数据是通过异步接口载入进来的

  3、模板和数据模型的约定,约定了视图模板与什么样的数据模型相对应,以及数据模型的格式和类型等信息

  4、异步接口和数据模型的约定,约定了异步接口的输入输出信息

前端接口设计

  页面入口规范用来处理URL与模板,及URL与接口之间的约定

  同步数据规范用来处理模板和数据模型的约定

  异步接口规范用来处理异步接口和数据模型的约定

 

接口规范

  通过前面的内容,我们大致地了解了页面入口规范、同步数据规范和异步接口规范这三个基础规范,其中每个规范也会定义出若干规则约定来指导前后端工程师的具体实施

  接下来,详细介绍每个规范包含哪些约定规则,以及这些约定规则是如何制定的,以网易云音乐的下面这个页面为例进行说明

前端接口设计

【页面入口规范】

  页面入口规范首先要对页面进行说明,包含一些用来描述页面基本信息、URL携带参数说明、页面可能会用到的视图模板的对应关系、页面可能会发出的异步请求的异步载入数据的接口的详细信息。简而言之,可以总结为以下四点

1、基本信息2、输入参数3、模板列表4、接口列表

  下图是页面入口规范中,某个页面所定义的规则约定的范例

前端接口设计

  首先,前、后端工程师需要根据交互原型对系统进行页面拆分。页面拆分的原则主要根据前后端功能实现的方式(比如单页或多页)来权衡

前端接口设计