REST APIs notes

REST APIs

transfer data (in json) instead of the html page. Let the client-side to render the page based on the data received.

Representational State Transfer

1. 每一个URI代表一种资源
2. 客户端和服务器之间，传递这种资源的某种表现层
3. 客户端通过四个HTTP动词，对服务器端资源进行操作，实现"表现层状态转化"

REST的名称"表现层状态转化"中，省略了主语。"表现层"其实指的是"资源"（Resources）的"表现层"。所谓"资源"，就是网络上的一个实体，或者说是网络上的一个具体信息。它可以是一段文本、一张图片、一首歌曲、一种服务，总之就是一个具体的实在。你可以用一个URI（统一资源定位符）指向它，每种资源对应一个特定的URI。要获取这个资源，访问它的URI就可以，因此URI就成了每一个资源的地址或独一无二的识别符。

"资源"是一种信息实体，它可以有多种外在表现形式。我们把"资源"具体呈现出来的形式，叫做它的"表现层"（Representation）。

比如，文本可以用txt格式表现，也可以用HTML格式、XML格式、JSON格式表现，甚至可以采用二进制格式；图片可以用JPG格式表现，也可以用PNG格式表现。

URI只代表资源的实体，不代表它的形式。严格地说，有些网址最后的".html"后缀名是不必要的，因为这个后缀名表示格式，属于"表现层"范畴，而URI应该只代表"资源"的位置。它的具体表现形式，应该在HTTP请求的头信息中用Accept和Content-Type字段指定，这两个字段才是对"表现层"的描述。

访问一个网站，就代表了客户端和服务器的一个互动过程。在这个过程中，势必涉及到数据和状态的变化。

互联网通信协议HTTP协议，是一个无状态协议。这意味着，所有的状态都保存在服务器端。因此，如果客户端想要操作服务器，必须通过某种手段，让服务器端发生"状态转化"（State Transfer）。而这种转化是建立在表现层之上的，所以就是"表现层状态转化"。

客户端用到的手段，只能是HTTP协议。具体来说，就是HTTP协议里面，四个表示操作方式的动词：GET、POST、PUT、DELETE。它们分别对应四种基本操作：GET用来获取资源，POST用来新建资源（也可以用于更新资源），PUT用来更新资源，DELETE用来删除资源。

 

Now all these parts here do re-render without the page reloading or the page being refreshed and the reason for that is that this entire page is actually rendered through browser side javascript, you can of course execute javascript in the browser as you know and this javascript code can manipulate the DOM, the DOM is simply the rendered html code. modern web applications is that you only fetch one initial html page that does not really contain a lot of real html content but that does load all these javascript script files and then these javascript scripts reach out to some backend API, to a restful API and only fetch the data they need to work with to then re-render the user interface.

 

 

 

API Endpoints = http verb + respective path

name	url	HTTP verb	Purpose	Mongoose Method
INDEX	/dogs	GET	display a list of all dog	Dog.find()
NEW	/dogs/new	GET	display form to make a new dog	N/A
CREATE	/dogs	POST	add new dog to database, then redirect somewhere	Dog.create()
SHOW	/dogs/:id	GET	shows info about one specific dog	Dog.findById()
EDIT	/dogs/:id/edit	GET	show edit form for one dog	Dog.findById()
UPDATE	/dogs/:id	PUT	update a particular dog, then redirect somwhere	Dog.findByIdAndUpdate()
DESTROY	/dogs/:id	DELETE	delete a particular dog, then redirect somewhere	Dog.findByIdAndRemove()

nested routes

e.g

new:    /campgrounds/:id/comments/new

create:  /campgrounds/:id/comments

 

 

 

 

// resolve CORS errors
app.use((req,res,next) => {
    res.setHeader('Access-Control-Allow-Origin','*');
    res.setHeader('Access-Control-Allow-Methods','GET,POST,PUT,PATCH,DELETE');
    res.setHeader('Access-Control-Allow-Headers','Content-Type,Authorization');
    next();
});

Problem:

if we need to send images, we cannot send through JSON. instead we send  through form data.

const formData = new FormData();
formData.append('title', postData.title);
formData.append('content', postData.content);


fetch(url,{
  method: method,
  body: formData
})

 

npm install --save jsonwebtoken

const token = jwt.sign(
        { email: loadedUser.email, userId: loadedUser._id.toString() },
        "congcongshitiancai",
        { expiresIn: "1h" }
      );

store token in header so that it can be sent through requests.

RESTful API design

http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html