0
点赞
收藏
分享

微信扫一扫

前置准备 -- json-server的介绍与服务搭建、axios的介绍与页面配置


文章目录

  • ​​json-server​​
  • ​​什么是json-server​​
  • ​​Json-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 方法,更提供了一系列的查询方法。

为我们快速搭建一个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这个文件的文件夹中。

这个时候你会得到:

前置准备 -- json-server的介绍与服务搭建、axios的介绍与页面配置_ios


如果你进入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"
}
}

前置准备 -- json-server的介绍与服务搭建、axios的介绍与页面配置_ajax_02

axios

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

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

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

axios的特点

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

安装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>.log(axios);</script>
</body>
</html>

前置准备 -- json-server的介绍与服务搭建、axios的介绍与页面配置_前端_03

说明配置成功


举报

相关推荐

0 条评论