【Vue+Django REST framework实战】第3章——restful api介绍 和 vue的结构

【Vue+Django REST framework实战】第3章——restful api介绍 和 vue的结构

RESTful API 设计指南

网络应用程序，分为前端和后端两个部分。当前的发展趋势，就是前端设备层出不穷（手机、平板、桌面电脑、其他专用设备…）。

因此，必须有一种统一的机制，方便不同的前端设备与后端进行通信。这导致API构架的流行，甚至出现"API First"的设计思想。RESTful API是目前比较成熟的一套互联网应用程序的API设计理论。我以前写过一篇《理解RESTful架构》，探讨如何理解这个概念。

一、协议

API与用户的通信协议，总是使用HTTPs协议。

二、域名

应该尽量将API部署在专用域名之下。 /zoos：列出所有动物园POST /zoos：新建一个动物园GET /zoos/ID：获取某个指定动物园的信息PUT /zoos/ID：更新某个指定动物园的信息（提供该动物园的全部信息）PATCH /zoos/ID：更新某个指定动物园的信息（提供该动物园的部分信息）DELETE /zoos/ID：删除某个动物园GET /zoos/ID/animals：列出某个指定动物园的所有动物DELETE /zoos/ID/animals/ID：删除某个指定动物园的指定动物

六、过滤信息（Filtering）

如果记录数量很多，服务器不可能都将它们返回给用户。API应该提供参数，过滤返回结果。

下面是一些常见的参数。

?limit=10：指定返回记录的数量?offset=10：指定返回记录的开始位置。?page=2&per_page=100：指定第几页，以及每页的记录数。?sortby=name&order=asc：指定返回结果按照哪个属性排序，以及排序顺序。?animal_type_id=1：指定筛选条件参数的设计允许存在冗余，即允许API路径和URL参数偶尔有重复。比如，GET /zoo/ID/animals 与 GET /animals?zoo_id=ID 的含义是相同的。

七、状态码（Status Codes）

服务器向用户返回的状态码和提示信息，常见的有以下一些（方括号中是该状态码对应的HTTP动词）。

200 OK - [GET]：服务器成功返回用户请求的数据，该操作是幂等的（Idempotent）。201 CREATED - [POST/PUT/PATCH]：用户新建或修改数据成功。202 Accepted - [*]：表示一个请求已经进入后台排队（异步任务）204 NO CONTENT - [DELETE]：用户删除数据成功。400 INVALID REQUEST - [POST/PUT/PATCH]：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的。401 Unauthorized - [*]：表示用户没有权限（令牌、用户名、密码错误）。403 Forbidden - [*] 表示用户得到授权（与401错误相对），但是访问是被禁止的。404 NOT FOUND - [*]：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。406 Not Acceptable - [GET]：用户请求的格式不可得（比如用户请求jsON格式，但是只有XML格式）。410 Gone -[GET]：用户请求的资源被永久删除，且不会再得到的。422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误。500 INTERNAL SERVER ERROR - [*]：服务器发生错误，用户将无法判断发出的请求是否成功。

……

八、错误处理（Error handling）

如果状态码是4xx，就应该向用户返回出错信息。一般来说，返回的信息中将error作为键名，出错信息作为键值即可。

{ error: "Invalid API key"}

九、返回结果

针对不同操作，服务器向用户返回的结果应该符合以下规范。

GET /collection：返回资源对象的列表（数组）GET /collection/resource：返回单个资源对象POST /collection：返回新生成的资源对象PUT /collection/resource：返回完整的资源对象PATCH /collection/resource：返回完整的资源对象DELETE /collection/resource：返回一个空文档

十、Hypermedia API

RESTful API最好做到Hypermedia，即返回结果中提供链接，连向其他API方法，使得用户不查文档，也知道下一步应该做什么。

比如，当用户向api.example.com的根目录发出请求，会得到这样一个文档。

{"link": { "rel": "collection "href": " "title": "List of zoos", "type": "application/vnd.yourformat+json"}}

上面代码表示，文档中有一个link属性，用户读取这个属性就知道下一步该调用什么API了。rel表示这个API与当前网址的关系（collection关系，并给出该collection的网址），href表示API的路径，title表示API的标题，type表示返回类型。

Hypermedia API的设计被称为HATEOAS。Github的API就是这种设计，访问api.github.com会得到一个所有可用API的网址列表。

{ "current_user_url": " "authorizations_url": " // ...}从上面可以看到，如果想获取当前用户的信息，应该去访问api.github.com/user，然后就得到了下面结果。{ "message": "Requires authentication", "documentation_url": "2.0框架。（2）服务器返回的数据格式，应该尽量使用JSON，避免使用XML。

VUE结构

vue官方文档：

https://cn.vuejs.org/v2/guide/

项目工程目录：

浏览器安装vue插件：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。