Eggjs笔记：RESTful API的设计

关于RESTful API

网络应用程序，分为前端和后端两个部分。当前的发展趋势，就是前端设备层出不穷(手机、平板、桌面电脑、其他专用设备…)。
因此，必须有一种统一的机制，方便不同的前端设备与后端进行通信。这导致 API 构架的流行，甚至出现"API First"的设计思想
RESTful API 是目前比较成熟的一套互联网应用程序的API设计理论，在企业中用的也非常多。
RESTful API 也有不一些不足:(字段冗余，扩展性差、无法聚合 api、无法定义数据类型、网络请求次数多)等不足
GraphQL 继承了 RESTful的优点弥补了 RESTful 的不足，我们这里目前只讨论RESTful API，暂不讨论 GraphQL

RESTful API的设计

一个好的 RESTful API 我们从以下几个方面考虑：

协议: 建议使用更安全的https协议
域名: 尽量部署在专属域名下面
- 比如: https://a.taobao.com
- 比如: https://api.tmall.com
版本:应该将api的版本号放入URl中:
- 比如: https://a.baidu.com/api1/newslist https://a.baidu.com/api2/newslist
- 比如: https://a1.tencent.com https://a2.tencent.com
路径: 在RESTful架构中，每个网址代表一种资源(resource)，所以网址中建议不能有动词，只能有名词，而且所用的名词往往与数据库的表名对应
- 一般来说，数据库中的表都是同种记录的"集合"(collection)
- 所以 API 中的名词也应该使用复数
请求方式: http 请求数据的方式:(7 个 HTTP 方法:GET/POST/PUT/DELETE/PATCH/HEAD/OPTIONS)
- GET(SELECT): 从服务器取出资源(一项或多项)
- POST(CREATE): 在服务器新建一个资源
- PUT(UPDATE): 在服务器更新资源(客户端提供改变后的完整资源)
- DELETE(DELETE): 从服务器删除资源
- 还有三个不常用的 HTTP 请求方式
  - HEAD: 获取资源的元数据
  - OPTIONS: 获取信息，关于资源的哪些属性是客户端可以改变的
  - PATCH(UPDATE): 在服务器更新资源(客户端提供改变的属性)
其他: 过滤方式、请求数据方式、返回数据方式、安全问题

Egg中配置API示例

路由

app/router/api.js

这里演示：GET、POST、PUT、DELETE, 备注说明：这里的POST可能会有csrf验证, 我们需要针对API接口来关闭它，下面会有相关配置

'use strict';
module.exports = app => {const { router, controller } = app;router.get('/api/index', controller.api.default.index);router.get('/api/productList', controller.api.default.productList);router.post('/api/register', controller.api.default.register);router.put('/api/editUser', controller.api.default.editUser);router.delete('/api/deleteUser', controller.api.default.deleteUser);
};

app/router.js

'use strict';/*** @param {Egg.Application} app - egg application*/
module.exports = app => {// ...其他路由// api接口配置require('./router/api')(app);
};

控制器

app/controller/api/default.js

只做一些返回数据的演示

'use strict';const Controller = require('egg').Controller;class DefaultController extends Controller {async index() {this.ctx.body = "api接口"}//商品列表的api接口async productList() {let page = this.ctx.request.query.page || 1;let pageSize = this.ctx.request.query.pageSize || 10;const goodsResult = await this.ctx.model.Goods.find({}).skip((page - 1) * pageSize).limit(pageSize);this.ctx.body = {result: goodsResult}}//post 增加数据async register() {console.log(this.ctx.request.body)this.ctx.body = {result: 'success_post'}}//put 修改数据async editUser() {console.log(this.ctx.request.body)this.ctx.body = {result: 'success_put'}}async deleteUser() {// console.log(this.ctx.request.body);console.log(this.ctx.request.query);this.ctx.body = {result: 'success_delete'}}
}module.exports = DefaultController;

前端请求

这里是基于vue-resource(官方提供的vue的一个插件)，当然可以使用axios, fetch-jsonp等其他库

Home.vue 片段

<template><!-- 所有的内容要被根节点包含起来 --><div id="home">首页组件<button @click="getData()">请求数据</button><br><br><br><button @click="doRegister()">执行注册（增加）</button><br><br><br><button @click="doEdit()">执行修改</button><br><br><br><button @click="doDelete()">执行删除</button></div>
</template><script>export default{data(){return {msg:'我是一个首页组件msg',flag:true,list:[]}},methods:{getData(){//请求数据var api='http://localhost:7001/api/productList';this.$http.get(api).then((response)=>{console.log(response);},function(err){console.log(err);})                    },doRegister(){var api='http://localhost:7001/api/register';this.$http.post(api,{username:'张三',age:20}).then((response)=>{console.log(response);                },(err)=>{console.log(err);})},doEdit(){var api='http://localhost:7001/api/editUser';this.$http.put(api,{username:'张三1111',age:20}).then((response)=>{console.log(response);      },(err)=>{console.log(err);})},doDelete(){var api='http://localhost:7001/api/deleteUser?_id=11111';this.$http.delete(api).then((response)=>{console.log(response);},function(err){console.log(err);})}}       }</script>

点击页面按钮测试请求，可以看到出现问题了，eggjs默认是7001的端口，而vue打开的则是8080，于是出现了跨域问题, 如下

No 'Access-Control-Allow-Origin' header is present on the requested resource. Orgin 'http://localhost:8000' is therfore not allowed access.

我们来解决这个问题，一种是使用jsonp的方式，这种只支持get请求，有局限; 一种是后台允许跨域

下面我们来配置后台支持跨域请求

Egg中通过 egg-cors配置服务器端允许跨域

安装插件 $ npm i egg-cors --save

配置插件

// {app_root}/config/plugin.js
exports.cors = {enable: true,package: 'egg-cors',
};

配置安全域名:

config.security = {csrf: {// 判断是否需要 ignore 的方法，请求上下文 context 作为第一个参数ignore: ctx => {// 屏蔽csrf验证的接口或路由let arr = ['/pay/ali/notify', // 接收支付宝支付post接口'/pay/wechat/notify', // 接收微信支付post接口];let flag = false;let url = ctx.request.url;// 进行匹配arr.some((item) => {// 通用的路由相关 和 API相关if (url === item || url.indexOf('/api') !== -1) {// console.log(item);flag = true;return true;}});return flag;},},domainWhiteList: ['http://localhost:8080'] // 配置跨域 这里支持这个8080的域，这个必须配置下，即使下面 origin为* 了，也应该配置，这里是客户端的域
};// 这个配置基于：https://www.npmjs.com/package/koa2-cors
config.cors = {origin: '*',allowMethods: 'GET,PUT,POST,DELETE' // 一般默认的配置都是这几个，其他有 OPTIONS,HEAD,PATCH 按需加入
};

Eggjs笔记：RESTful API的设计相关推荐

架构必备「RESTful API」设计技巧经验总结
转载自架构必备「RESTful API」设计技巧经验总结 [译者注]本文是作者在自己的工作经验中总结出来的RESTful API设计技巧,虽然部分技巧仍有争议,但总体来说还是有一定的参考价值的. ...
RESTful API的设计原则
说在前面,这篇文章是无意中发现的,因为感觉写的很好,所以翻译了一下.由于英文水平有限,难免有出错的地方,请看官理解一下.翻译和校正文章花了我大约2周的业余时间,如有人愿意转载请注明出处,谢谢^_^ P ...
Restful API的设计思路
API的就是程序员的UI,和其他UI一样,你必须仔细考虑它的用户体验! Restful只是web api/Json传输接口通过http调,取到还要自己解.Rpc一般都是配套的,客户端直接像调本地函数一 ...
好RESTful API的设计原则
做出一个好的API设计很难.API表达的是你的数据和你的数据使用者之间的契约.打破这个契约将会招致很多愤怒的邮件,和一大堆伤心的用户-因为他们手机上的App不工作了.而文档化只能达到一半的效果,并且也 ...
restful api接口设计
技术由来: 互联网早期,页面请求和并发量不高,且移动端未盛行时对接口要求不高,使用动态页面(jsp)就能满足绝大多数的使用需求.但是随着互联网和移动设备的发展,人们对Web应用的使用需求也增加,传统的 ...
10个有关RESTful API良好设计的最佳实践
Web API已经在最近几年变成重要的话题,一个干净的API设计对于后端系统是非常重要的. 通常我们为Web API使用RESTful设计,REST概念分离了API结构和逻辑资源,通过Http方法GE ...
基于RESTful API 怎么设计用户权限控制？
作者:JC_Huang http://www.jianshu.com/p/db65cf48c111 1 前言有人说,每个人都是平等的: 也有人说,人生来就是不平等的: 在人类社会中,并没有绝对的 ...
RESTful API 设计指南 (转)
RESTful API 设计指南 2016-02-23 ImportNew (点击上方公号,可快速关注) 作者:阮一峰链接:http://www.ruanyifeng.com/blog/2014/0 ...
RESTful API 设计思考
RESTful API 设计思考,内容来源网络加自己的思考 1.RESTful Web API采用面向资源的架构:同一的接口,所以其成员体现为针对同一资源的操作 2.SOAP Web API采用RPC ...

Eggjs笔记：RESTful API的设计

关于RESTful API

RESTful API的设计

Egg中配置API示例

Egg中通过 egg-cors配置服务器端允许跨域

Eggjs笔记：RESTful API的设计相关推荐

最新文章

热门文章

Eggjs笔记：RESTful API的设计

关于RESTful API

RESTful API的设计

Egg中配置API示例

Egg中通过 egg-cors配置服务器端允许 跨域

Eggjs笔记：RESTful API的设计相关推荐

最新文章

热门文章

Egg中通过 egg-cors配置服务器端允许跨域