vue使用axios获取本地json文件数据及创建本地数据接口

目录

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

<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 接口

1. node环境安装
2. 安装 json-server
3. 创建数据文件夹
4. 启动服务

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设置和使用起来还是蛮方便的，大家感兴趣的话，可以跟着文章设置一波。