JsonServer使用详解

快来打我* 2022-05-17 05:13 344阅读 0赞

JsonServer主要的作用就是搭建本地的数据接口，创建json文件，便于调试调用

如果我们只是get一些数据，只用借助jsonplaceholder（[http://jsonplaceholder.typicode.com][http_jsonplaceholder.typicode.com]）就可以很好的实现，但是如果我们想要post一些数据，使用jsonplaceholder就有些力不从心了，所以我们今天就来聊聊怎么借助于json-server来搭建我们的本地的数据接口，对我们的数据进行增删改查

进入json-server网址：[https://www.npmjs.com/package/json-server][https_www.npmjs.com_package_json-server]

安装全局的json-server

在我们的终端中输入：npm install -g json-server（如果是mac电脑的话，需要在前面加sudo，windows电脑不需要）

*   如果是mac电脑还需要输入自己电脑的密码，windows电脑不需要

创建一个文件夹(不要用json-server为名字，否则会报错哦)，在终端进入到我们这个文件夹，然后初始化一个package.json文件 npm init --yes（之后我们的文件夹中就会有一个package.json的文件）

安装我们的json-server：npm i json-server --save

然后打开我们的package.json，修改一下"scripts"中的内容，看图吧

![70][]

其中json:server是可以自己随便起的名字，后面的是不变的，后面的代码，在[https://www.npmjs.com/package/json-server][https_www.npmjs.com_package_json-server]中找到，如图：

![70 1][]

然后创建一个db.json，在这个文件中创建我们的json数据，如下示例：

![70 2][]

然后我们就可以开启我们的json-server：在终端中输入npm run json:server（json:server就是我们刚刚在package.json中起的名字），然后可以看到如图：

![70 3][]

所以我们就可以在我们的浏览器中输入：localhost:3000，就可以帮我们启动当前的主页：

![70 4][]

比如进入到我们的users界面，如图：

![70 5][]

下面说说获取数据的方式：

get方式：比较简单：下面是我列举的一些：

//获取所有用户信息
    http://localhost:3000/users
    //获取id为1的用户信息
    http://localhost:3000/users/1
    //获取公司的所有信息
    http://localhost:3000/companies
    //获取单个公司的信息
    http://localhost:3000/companies/1
    //获取所有公司id为3的用户
    http://localhost:3000/companies/3/users
    //根据公司名字获取信息
    http://localhost:3000/companies?name=Google
    //根据多个名字获取公司信息
    http://localhost:3000/companies?name=Google&name=Apple
    //获取一页中只有两条数据
    http://localhost:3000/companies?_page=1&_limit=2
    //升序排序  desc降序  asc升序
    http://localhost:3000/companies?_sort=name&_order=asc
    //获取年龄为30以及30以上的
    http://localhost:3000/users?age_gte=30
    //获取年龄为30到40之间的
    http://localhost:3000/users?age_gte=30&age_gte=40
    //搜索用户信息
    http://localhost:3000/users?q=d

知识点总结如下：   
1、[http://localhost:3000/db][http_localhost_3000_db] 访问的是db.json文件下的所有内容；   
2、[http://localhost:3000/layoutList?categoryName=][http_localhost_3000_layoutList_categoryName] 模拟接口参数可筛选该目录下内容   
3、分页查询 参数为 \_start, \_end, \_limit，并可添加其它参数筛选条件   
如：[http://localhost:3000/posts?\_start=6&\_limit=3][http_localhost_3000_posts_start_6_limit_3]   
[http://localhost:3000/posts?\_start=3&\_end=6][http_localhost_3000_posts_start_3_end_6]   
4、排序 参数为\_sort, \_order   
如：[http://localhost:3000/posts?\_sort=id&\_order=asc][http_localhost_3000_posts_sort_id_order_asc]   
[http://localhost:3000/posts?\_sort=user,views&\_order=desc,asc][http_localhost_3000_posts_sort_user_views_order_desc_asc]   
5、操作符 \_gte, \_lte, \_ne, \_like   
\_gte大于，\_lte小于， \_ne非， \_like模糊查询   
6、q全局搜索（模糊查询）

如果使用post方式会需要借助postman软件：

![70 6][]

先选择方式post，在地址栏中输入我们的服务器接口地址：[http://localhost:3000/users][http_localhost_3000_users]

然后再headers中需要填写的是key和value 我在图上面已经标识了

然后再body中添加内容如图：

![70 7][]

在body中选择raw，然后写数据，之后点击send，生成右边所示的数据

然后我们在浏览器中输入地址就可以看到已经添加了数据到我们的服务器中

如果是delete方式，只需要选择delete方式，之后，在地址栏中填写地址如下图所示：其中5代表的是id为5的那条数据，删除之后，后面就为空，然后我们去到我们的服务器中看到这条id为5的数据已经被删除了

![70 8][]

也可以切换为patch方式，就是更新我们的数据，和delete类似，只需要在body中的数据中，把我们需要改变的数据，发送即可，比如我们要修改id为2的name，如图所示：

![70 9][]

然后再右边我们就可以看到修改后的数据，在我们的数据接口中也可以看到这条数据的name已经发生了改变

ok，其他的方式也都类似，不再一一列举

————————————————————————————————————————————————————————

更新于：2018/8/24

经测试，我们创建的json文件中，必须要有id属性，否则会报错，正确格式如下：

{
      "users": [
        {
          "accuontNumber": "12345678900",
          "password": "000000",
          "emial": "000000",
          "id": 1
        }
      ]
    }

切记，如果少了id，结果就会报错

另外，记得我们的json必须是标准的json格式，即要用双引号，不能用单引号哦

[http_jsonplaceholder.typicode.com]: http://jsonplaceholder.typicode.com/posts
[https_www.npmjs.com_package_json-server]: https://www.npmjs.com/package/json-server
[70]: /images/20220517/fc5ad92bf7624029b17f61d448052ac5.png
[70 1]: /images/20220517/ff76c16a4e3b415892abdfb10d2f967a.png
[70 2]: /images/20220517/b7498c7a30be4524bd3265f849fe90d3.png
[70 3]: /images/20220517/307fa8136f334b3286408a74c7faaef1.png
[70 4]: /images/20220517/b7e94cf53918450eaa8228ce35aacd98.png
[70 5]: /images/20220517/fd085867a9314d709a106fc0d95ced61.png
[http_localhost_3000_db]: http://localhost:3000/db
[http_localhost_3000_layoutList_categoryName]: http://localhost:3000/layoutList?categoryName=
[http_localhost_3000_posts_start_6_limit_3]: http://localhost:3000/posts?_start=6&_limit=3
[http_localhost_3000_posts_start_3_end_6]: http://localhost:3000/posts?_start=3&_end=6
[http_localhost_3000_posts_sort_id_order_asc]: http://localhost:3000/posts?_sort=id&_order=asc
[http_localhost_3000_posts_sort_user_views_order_desc_asc]: http://localhost:3000/posts?_sort=user,views&_order=desc,asc
[70 6]: /images/20220517/1429b9f877274bbea3365bc0b689bdd5.png
[http_localhost_3000_users]: http://localhost:3000/users
[70 7]: /images/20220517/4e69af5fb02040029a922a0e5f0ced87.png
[70 8]: /images/20220517/ad57a4c9e17244b09daf7b2e0b3ad4d5.png
[70 9]: /images/20220517/cbb2bc173f314db28e48c57f155a8fc0.png