json-server

什么是json-server

Json-Server 作为工具，基于 Express 开发，而且它足够简单，写少量数据，即可使用，Json-Server 的主要作用就是搭建本地的数据接口，创建 json 文件，便于调试调用。

Json-Server 支持 CORS 和 JSONP 跨域请求，支持 GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查询方法。

为我们快速搭建一个http服务，因为我们后面使用axios的时候需要向服务端发送请求，我们需要服务端这样一个角色来与axios结合做实践

Json-Server作用

在开发过程中，接口多半是滞后于页面开发的。利用 Json-Server 快速搭建模拟返回 REST 风格的后台数据，搭建本地的数据接口，保证前后端开发的分离。

前后端开发只要设定好接口以及数据的定义，剩下的就可以各自开发，最后集成测试。

json-server的安装

在安装过程中最好使用管理员身份打开编译器

打开终端，输入：

npm install -g json-server

然后创建一个以db.json为名字的文件，然后将以下代码复制粘贴进入此文件：

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

接下来启动JSON SERVER，终端使用命令：

json-server --watch db.json

注意：使用这条命令的时候，一定要处于db.json这个文件的文件夹中。

这个时候你会得到：

如果你进入http://localhost:3000/posts/1,你将会得到：

{ "id": 1, "title": "json-server", "author": "typicode" }

还有一些其他API：

GET    /posts           //获得全部文章
GET    /posts/1			//获取指定ID文章
POST   /posts
PUT    /posts/1
PATCH  /posts/1
DELETE /posts/1

GET    /profile
POST   /profile
PUT    /profile
PATCH  /profile

例如：对于以下db文件:

{
    "posts": [
        {
            "id": 1,
            "title": "json-server",
            "author": "typicode"
        },
        {
            "id": 2,
            "title": "NEFU70周年校庆",
            "author": "东林团委"
        }
    ],
    "comments": [
        {
            "id": 1,
            "body": "some comment",
            "postId": 1
        },
        {
            "body": "喜大普奔",
            "postId": 2,
            "id": 2
        }
    ],
    "profile": {
        "name": "typicode"
    }
}

axios

Axios，是一个基于promise网络请求库(客户端)，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequests。

在浏览器端，借助于axios可以向服务端发送Ajax请求，来获取数据。
在node.js中，借助于axios可以向远端服务发送http请求。

原理：
axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

axios的特点

基于 xhr + promise 的异步 ajax 请求库
浏览器端/node 端都可以使用
支持请求／响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

安装axios

三种方式：
Using npm:(项目中多用)

$ npm install axios

Using bower:

$ bower install axios

Using cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

因为这是国外的源，速度可能会有影响，可以用国内的源（https://www.bootcdn.cn/axios/）：

https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js"></script>
</head>
<body>
    <script>
        console.log(axios);
    </script>
</body>
</html>