我爱编程JavaScript 进阶营

RESTful API + ( HTTP状态码 ) + ( en

2018-05-27  本文已影响360人  woow_wu7

http://www.ruanyifeng.com/blog/2014/05/restful_api.html
https://www.cnblogs.com/master-song/p/8820244.html
https://www.cnblogs.com/chinajava/p/5871305.html
https://blog.csdn.net/chenxiaochan/article/details/73716617
put和patch的区别：https://segmentfault.com/q/1010000005685904
HTTP状态码：http://www.runoob.com/http/http-status-codes.html

RESTful API 设计指南

(1) 协议

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

(2) 域名

应该尽量将API部署在专用域名之下，如果确定API很简单，不会有进一步扩展，可以考虑放在主域名下。

(3) 版本（Versioning）

应该将API的版本号放入URL。另一种做法是，将版本号放在HTTP头信息中，但不如放入URL方便和直观。
https://api.example.com/v1/
或者
https://example.org/apis/v1/

(4) 路径（Endpoint） ----------- 路径又称终点

路径又称"终点"（endpoint），表示API的具体网址。

在RESTful架构中，每个网址代表一种资源（resource），所以网址中不能有动词，只能有名词，而且所用的名词往往与数据库的表格名对应。一般来说，数据库中的表都是同种记录的"集合"（collection），所以API中的名词也应该使用复数。

(5) HTTP动词

对于资源的具体操作类型，由HTTP动词表示。
常用的HTTP动词有下面五个（括号里是对应的SQL命令）

还有两个不常用的HTTP动词。

(重要)

GET /zoos：列出所有动物园
POST /zoos：新建一个动物园
GET /zoos/ID：获取某个指定动物园的信息
PUT /zoos/ID：更新某个指定动物园的信息（提供该动物园的全部信息）
PATCH /zoos/ID：更新某个指定动物园的信息（提供该动物园的部分信息）
DELETE /zoos/ID：删除某个动物园
GET /zoos/ID/animals：列出某个指定动物园的所有动物
DELETE /zoos/ID/animals/ID：删除某个指定动物园的指定动物


(总结)
GET 查找资源
POST 新建资源
PUT 更新资源，提供完整请求信息 (如果只提供部分，其他字段将被清空)
PATCH 更新资源，提供部分请求信息
DELETE 删除资源

(6) 过滤信息（Filtering）

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

(7) 状态码（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 - [*]：服务器发生错误，用户将无法判断发出的请求是否成功。

(8) 错误处理（Error handling）

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

{
    error: "Invalid API key"      // error键名， 出错信息键值
}

(9) 返回结果

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

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

HTTP状态码

HTTP状态码的英文为HTTP Status Code。

(1) HTTP状态码分类

HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。

HTTP状态码共分为5种类型：


1** ： 信息，服务器收到请求，需要请求者继续执行操作

2** ： 成功，操作被成功接收并处理

3** ： 重定向，需要进一步的操作以完成请求

4** ：客户端错误，请求包含语法错误或无法完成请求

5** ：服务器错误，服务器在处理请求的过程中发生了错误

常见的HTTP状态码：

400 ：请求参数错误 缺少参数，或者格式不匹配
401 ：要求用户的身份认证，未授权
403 ：访问受限，授权过期
404 ：资源，服务未找到
405 ：不允许http方法

常见HTTP请求状态码

encodeURIComponent() 编码

------------ decodeURIComponent()解码

encodeURIComponent(URIstring) 函数可把字符串作为 URI 组件进行编码。

encodeURIComponent(URIstring)

实例：

A页面


 componentWillMount() {
   const _token = window.localStorage.getItem('access_token');
   const href = window.encodeURIComponent(window.location.href);
   if (_token) {
     this.props.getUserInfo(_token);
     return ;
   } 
   window.location.href = `http://localhost:40004/login?redirect_url=${href}`;
 }

说明：
window.location.href = `http://localhost:40004/login?redirect_url=${href}`;
地址栏跳转到 (B页面) 并且携带当前完整的href地址 (A页面）
该href就需要编码，因为在B页面要拿到search就只能有一个？




----------------------------------------------------------------------------------------
B页面


function * watchLogin() {
 yield takeEvery(constants.LOGIN, function * login(action) {
   try {
     const query = qs.parse(window.location.search.slice(1));  // 去掉search的问号，并转成对象
     const redirect = query['redirect_url'] ;  // 拿到对象redirect_url属性对应的值
     const redirectHref = window.decodeURIComponent(redirect);   // 再反解码
     yield call(() => window.location.href = redirect);  // 再跳回A页面
   } catch (err) {
     yield call(() => swal('错误', '用户名或密码错误', 'error'));
   }
 });
}

decodeURIComponent()

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

空格字符串在url中是20%

react无状态组件

import React, { Component } from 'react';
import './App.css';

const StatelessComponent = (props, context) => {   // 无状态组件有两个参数，props, context
  const children = props.children.props.children;     // children和属性都在props中
  return (
    <div>
      <div>
        {props.name}
      </div>
      <div>
        {children}
      </div>
    </div>
  )
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <StatelessComponent name="wang">   // 无状态组件的name属性
          <div>这是div</div>               // children
        </StatelessComponent>
      </div>
    );
  }
}

export default App;

react16 新特性

(1) 在render方法中返回没有容器元素的多个元素 ----- 数组

import React, { Component } from 'react';
import './App.css';

const StatelessComponent = (props, context) => {
  return [                            -------------------- 返回一个数组
    <div key="1">1111</div>,
    <div key="2">2222</div>,
  ];
}

class App extends Component {
  render() {
     return [
      <StatelessComponent key="0"/>,          ----- 没有子元素的标签自关闭
    ];
  }
}

export default App;

(2) Portal 插槽

ReactDOM.createPortal(child, container)

中文文档：http://www.css88.com/react/docs/portals.html
知乎：https://zhuanlan.zhihu.com/p/29880992

生成modal时候，组件中的组件的modal框，通常应该显示在屏幕的最中间，

index.html

  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <div id="portal"></div>
  </body>


app.js

import React, { Component } from 'react';
import './App.css';
import ReactDOM from 'react-dom';

class App extends Component {
  state = {
    show: true,
  }
  changePortal = () => {
    this.setState((prevState, props) => ({
      show: !prevState.show,
    }))
  }
  render() {
    return(
      <div>
        <div onClick={this.changePortal}>切换蒙层显示</div>
        {
          this.state.show 
          ?
            ReactDOM.createPortal(                     // ReactDom.createPortal(child, container)
              <div>蒙层</div>,                         // 挂载的内容
              document.getElementById('portal')       // 挂载到index.html中的DOM元素上
            )
          :
          null
        }
      </div>
    )
  }
}

export default App;
Portal
上一篇 下一篇

猜你喜欢

热点阅读