前置准备 -- json-server的介绍与服务搭建、axios的介绍与页面配置
前置准备 -- json-server的介绍与服务搭建、axios的介绍与页面配置
文章目录
json-server
什么是json-serverJson-Server作用json-server的安装
axios
axios的特点安装axios
json-server
什么是json-server
Json-Server 作为工具，基于 Express 开发，而且它足够简单，写少量数据，即可使用，Json-Server 的主要作用就是搭建本地的数据接口，创建 json 文件，便于调试调用。
Json-Server 支持 CORS 和 JSONP 跨域请求，支持 GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查询方法。
为我们快速搭建一个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这个文件的文件夹中。
这个时候你会得到：
如果你进入"id": 1, "title": "json-server", "author": "typicode" }
还有一些其他API：
GET /posts //获得全部文章GET /posts/1 //获取指定ID文章POST /postsPUT /posts/1PATCH /posts/1DELETE /posts/1
GET /profilePOST /profilePUT /profilePATCH /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 而在客户端 (浏览端) 则使用XMLHttpRequests。
在浏览器端，借助于axios可以向服务端发送Ajax请求，来获取数据。 在node.js中，借助于axios可以向远端服务发送axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。
axios的特点
基于 xhr + promise 的异步 ajax 请求库浏览器端/node 端都可以使用支持请求／响应拦截器支持请求取消请求/响应数据转换批量发送多个请求
安装axios
三种方式： Using npm:(项目中多用)
$ npm install axios
Using bower:
$ bower install axios
Using cdn: