json-server的基本配置及简单使用

2024-01-20 14:00:46

文章目录

前言
一、json-server是什么？
二、json-server下载及启动

前言

一、json-server是什么？

对于一个前端工程师来说，自测数据如果没有可用的后端接口的话就只能自己伪造数据，但是这样的话每次手动创建的话都是很麻烦的，而且还不支持前端的一些rest风格的访问，但是json-server就解决了这个不足，它是纯前端的一个三方组件，可以实现前端通过异步请求的方式对文件的增删改查，而且使用起来也是十分的方便，接下来就来看一下json-serve的安装及使用。

二、json-server下载及启动

1.下载json-server

首先是json-server的官方文档

以及官方的npm下载

npm install -g json-server

这是一个全局的下载配置，然后我们可以在前端项目文件中创建一个xxx.json文件并打开xxx.json文件所在文件目录，在xxx.json文件中编写以下代码

{
    "users":[],
    "goods":[]
}

这就相当于给json-server配置了"users" "goods"两个父路径

2.启动

打开从cmd并来到xxx.json所在目录中输入以下代码，配置端口号并绑定json文件

G:\WeChat\firstApp> json-server --watch .\json-server.json --port 5001

当出现以下提示时说明已经开启成功

\{^_^}/ hi!
 Loading .\json-server.json
  .\json-server.json has changed, reloading...
  Done

  Resources
  http://localhost:5001/users
  http://localhost:5001/goods

  Home
  http://localhost:5001

三、json-server的简单操作

当我们通过GET、PUT、DELETE、POST等数据请求方式对5001端口上的数据进行操作时，就是就是对xxx.json文件进行操作，json文件中的数据也会跟着改变

1.基础语法

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

码农公寓