目录
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 axios2.创建json文件数据
在public文件夹里创建一个json文件
3.在需要接口数据的页面导入并调用axios
<template>
<div>
<button @click="haha">哈哈哈</button>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
rise: [],
};
},
methods: {
haha() {
axios
.get("http://localhost:8080/book.json")
.then((response) => {
console.log("成功");
this.rise = response.data.rise;
console.log(response.data);
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
<style scoped></style>
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-server3.创建数据文件夹，在本机创建一个文件夹，然后新建一个 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设置和使用起来还是蛮方便的，大家感兴趣的话，可以跟着文章设置一波。
