Vue之使用json-server快速搭建本地数据接口

好长时间没有更新内容了，从今天开始继续动起来，每天分享一个知识点↖(^ω)↗

在讲如何如何配置json-server之前，我们先说说为什么要配置json-server

在vue日常的教学中，我么如果想使用axios请求数据时，有两种方式，一种是从网上的接口请求,如下图:

2020-07-03_230805.png

还有一种就是我们自己写json，然后放到我们的项目中通过路径请求。
但如果我们想让我们自己写的json数据也和网上接口一样，通过一个地址就能访问到，这个该怎么做？

接下来就该我们的json-server出场了

首先大家选择一个文件，然后使用我们的git工具初始化一下，在git中输入： cnpm init,然后会弹出如下的内容:

2020-07-03_231618.png
从图中红框的内容开始，我们就要写一些东西了，也可以不写，直接按回车
2020-07-03_232218.png
里面的内容我们可以不用修改，直接都按回车就可以
这是后再我们的文件夹中就会生成一个package.json的文件
2020-07-03_232345.png

打开package,json,里面的代码是这样的：

2020-07-03_232521.png

这时候我们需要安装我们的json-server,

cnpm install json-server  --save

2020-07-03_232915.png

json-server安装好之后我们会发现文件夹中多一个node_modules的文件夹

打开github，关于json-server的安装教程，https://github.com/typicode/json-server

2020-07-03_233517.png

我们发现接下来需要创建一个db.json的文件夹，所以我们先来修改package.json,如下图：

2020-07-03_233715.png

然后我们在创建一个db.json的文件，里面写一些数据：

{
    "users":[
        {
            "name":"herry",
            "phone":"333-444-555",
            "email":"herry@126.com",
            "id":1,
            "age":30,
            "companyId":1
        },
        {
            "name":"lily",
            "phone":"333-444-555",
            "email":"lily@126.com",
            "id":2,
            "age":30,
            "companyId":2
        },
        {
            "name":"amy",
            "phone":"333-444-555",
            "email":"amy@126.com",
            "id":3,
            "age":30,
            "companyId":3
        },
        {
            "name":"lucy",
            "phone":"333-444-555",
            "email":"lucy@126.com",
            "id":4,
            "age":30,
            "companyId":3
        }
    ],
    "companys":[
        {
            "id":1,
            "name":"huawei",
            "description":"huawei is good"
        },
        {
            "id":2,
            "name":"xiaomi",
            "description":"xiaomi is good"
        },
        {
            "id":3,
            "name":"vivo",
            "description":"vivo is good"
        }
    ]
}

写完之后我们继续在git中输入命令：

 npm run json:server

2020-07-03_234059.png

这时候会给我们弹出两个地址，然后我们把地址放到浏览器中就分别能看到我们写的users数据和company数据了

今天就更新到这吧，明天继续！！！

以上仅代表个人所学，如有错误欢迎纠正