目录
1.安装axios
2.在public文件夹创建本地json文件数据
3.在需要进行接口数据的页面导入并调用axios
4.生成本地数据接口
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，刚接触 axios的同学可能会因为没有接口测试而犯难，本文教会你如何用axios获取本地json文件数据，以及创建本地数据接口
1.安装axios
在项目的根目录，打开终端，输入以下命令行安装axios
npm install(或简写为 i) axios
如果安装太慢一直卡，可以使用淘宝镜像来安装axios，打开终端依次输入以下命令
npm config set registry https://registry.npm.taobao.org/
npm install axios
2.创建json文件数据
在public文件夹里创建一个json文件
3.在需要接口数据的页面导入并调用axios
4.生成本地数据接口
引用了官方的一句话，大概意思是30秒就能获得一套完整的模拟 REST API 接口
node环境安装安装 json-server创建数据文件夹启动服务
1.node环境安装
json-server 需要通过 npm 下载，npm 依赖在 node 中。
node 常见的安装方法有2种。第一种是官方下载，第二种是使用 nvm 下载。自己选一种就行。进入官网下载，下载完狂按“下一步”和“完成”就行了。
注意node 版本一定要12以上，不然会报错
2.安装 json-server，建议全局安装
json-server是一款 json 数据服务器，它运行 Express 服务器，可以对json文件、js脚本生成的json数据、远程json数据进行restful风格的增删改查操作，通过指定一个json文件作为api数据源，可以进行分页、排序、关联查询、范围查询等各种查询操作，是一套完整的模拟 REST API 接口
在开始之前，需要先安装json-server，打开Windows power shell，运行npm install -g json-server全局安装json-server。
npm install -g json-server
3.创建数据文件夹，在本机创建一个文件夹，然后新建一个 json 文件，再填入数据
例：创建 api文件夹，在 api里创建 hhh.json文件，再导入以下数据
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}
4.启动服务
进入 目录api打开终端输入以下命令即可
json-server hhh.json
按照以上的步骤生成了三个接口后，我们就可以直接在浏览器、postman或者自己写JS代码获取数据，修改新增删除数据。
注意：
产生的接口地址中的posts,comments,profile是与db.json中的属性名是对应的。db.json的内容必须是json格式。属性名 ---> 接口的地址属性值 ---> 接口返回数据 （数组|对象）
5.接口使用规范
使用 json-server 需要遵守一定的规范。
数据查询要使用 GET。新增数据要使用 POST。删除数据要使用 DELETE。修改数据使用 PUT 和 PATCH。
最后附上json server的github，和axios的中文文档，大家可以进去研究一下。
json server设置和使用起来还是蛮方便的，大家感兴趣的话，可以跟着文章设置一波。
文章来源
发表评论