一天搞定前端开发必备技能（5）——json、json-server搭建接口数据

前端也能配置接口数据啦！！！，实习生是不是还在忧愁项目提供的接口关闭了，开发者是不是还在等待后端接口写的太慢了，测试是不是还看不懂前端的json数据呢？现在学习了这篇文章，看看能不能解君愁🌹。

文章目录

json
json-server
json数据操作

json

json简单的的说json就是一个字符串规范，json文本实质上就是一条字符串，所以程序中使用json数据，需要特定方法转换成对象变量才能是使用。

json支持的六种值类型

类型	描述	示例	备注
字符串	需要用双引号括起来	`"test string"`	如果字符串中包含双引号，需用`\`进行转义，如：`"He said, \"Hello!\""`
数字	整数或浮点数	`0`, `-1`, `10`, `1.1`, `-1.1`	没有限制小数点后位数的表示
布尔值	逻辑值	`true`, `false`	只有两个值
null	空值	`null`	表示一个空值或无值
对象	键值对集合	`{"key": "value"}`	键必须是字符串，值可以是任何JSON支持的类型
数组	有序集合	`[1, "a", true, null]`	元素可以是任何类型，包括其他数组或对象

JSON的应用场景

JSON由于其简洁性和易于解析的特点，适用于以下场景：

数据量不大的场合。
需要记录树形结构数据的场合。
需要灵活扩展数据结构的场合。

转义字符

在JSON中，某些字符是特殊字符，如果需要在字符串中使用它们，则需要进行转义，例如：

双引号"：\"
反斜杠\：\\
斜线/：\/
回车\n
制表符\t

HTTP状态码

HTTP状态码用于表示HTTP请求的结果，其中JSON经常用于API响应中，以传递状态信息。常见的HTTP状态码包括：

200 OK：请求成功。
201 Created：资源被成功创建并且服务器返回了资源信息。
400 Bad Request：请求有语法错误或请求无法处理。
404 Not Found：请求的资源不存在。
500 Internal Server Error：服务器内部错误，无法完成请求。

json-server

有了json-server，一个前端也能在本地运行服务器啦🥳，通俗来说，json-server就是模拟服务器接口，这样使得前端人员可以不依赖后端开发，而在本地自己搭建一个json服务器，方便自己测试项目。

下载安装

使用npm全局安装json-server

npm install -g json-server

可以通过查看版本号来检查是否安装成功：

json-server -v

模拟数据

在任意的文件夹下创建一个数据，但是⚠️不能用json-server这个名字，否则会报错。

进入该文件夹，执行以下👇代码：

json-server --watch 文件名.json

如果你自己没有这个文件夹.json这个文件的话，系统会自动生成给你。

修改端口号

默认端口号是3000，我们也可以指定端口

json-server --watch db.json --port 5000

当然每次启动都要输入一大段代码就会很繁杂，我们可以在统计文件夹新建一个package.json，把配置文件信息写进入：

{
    "scripts": {
        "mock": "json-server db.json --port 5000"
    }
}

下次启动服务器就使用以下👇指令即可

npm run mock

json-server的相关启动参数

语法：json-server [options] <source>

选项列表：

参数	简写	默认值	说明
`--config`	`-c`	`"json-server.json"`	指定配置文件
`--port`	`-p`	`3000`	设置端口（Number）
`--host`	`-H`	`"0.0.0.0"`	设置域（String）
`--watch`	`-w`		是否监听文件变化
`--routes`	`-r`		指定自定义路由
`--middlewares`	`-m`		指定中间件files（数组）
`--static`	`-s`		设置静态文件目录（类比：express的静态目录）
`--readonly`	`--ro`		只允许GET请求（布尔）
`--no-cors`	`--nc`		禁用跨源资源共享（布尔）
`--no-gzip`	`--ng`		禁用GZIP内容编码（布尔）
`--snapshots`	`-S`	`"."`	设置数据库快照目录（默认值: "."）
`--delay`	`-d`		对响应添加延迟（ms）
`--id`	`-i`	`"id"`	设置数据库id属性（例如：_id）
`--foreignKeySuffix`	`-fks`	`"Id"`	设置外键后缀（例如：post_id中的_id）
`--help`	`-h`		显示帮助信息（布尔）
`--version`	`-v`		显示版本号（布尔）

加粗的是常用，需要必记必会⚠️

json数据操作

可以看这个up主的视频，讲解的非常好(*^▽^*)

07_json server_搭建静态资源服务器_哔哩哔哩_bilibili

get获取数据

在浏览器地址访问数据就是get操作，获取数据的操作就是在url地址下输入属性名就可以获取到数据。

模版：

http:localhost:端口号/对象名

案例：

1、这里有一部分数据，我们只需要通过"http://localhost:5000/users"就能访问到users里面的对象数据。
2、同理获得register里面的数据，只需要将users更换成register："http://localhost:5000/users"

{
  "users": [
    {
      "name": "李雷",
      "UID": "01a1"
    },
    {
      "name": "韩梅梅",
      "UID": "02b2"
    }
  ],
  "register": [
    {
      "username": "01",
      "password": "a1"
    },
    {
      "username": "02",
      "password": "a2"
    }
  ]
}

filter过滤获取

还是上面那个例子，我们可以通过

http://localhost:5000/users/1

就能拿到第一项数据，也就是

 {
   "name": "李雷",
   "UID": "01a1"
 }

条件查询

模版：

http:localhost:端口号/对象名?属性名=属性值

如果不是按照顺序来获取数据的话，我们可以通过指定属性来获取。例如：

http://localhost:5000/users?name=韩梅梅

就会返回回来属于name等于韩梅梅的数据

{
  "name": "韩梅梅",
  "UID": "02b2"
}

多条件查询

除了一个条件指向以外，还可以通过&来连接多条件

http:localhost:端口号/对象名?属性名1=属性值1&属性名2=属性值2

分页操作

分页操作采用_page来设置页码，_limit来控制每页显示的条数。如果没有添加_limit，默认是每页显示10条。

http:localhost:端口号/对象名?_page=页码&_limit=条数

排序操作

排序操作采用_sort来指定要排序的字段，_order来指定排序是升序还是降序（asc|desc，默认是asc）。

http:localhost:端口号/对象名 ? _sort=id & _order=asc/desc

Slice切片获取

s所谓的切片获取，就是获取局部数据。lice的方式和Array.slice()方式类似，采用_start来指定开始的位置，_end来指定结束的位置。

http:localhost:端口号/对象名 ? _start=开始的位置 & _end=结束的位置

我们甚至还可以通过使用_limit来指定从开始位置到其实为止后截取多少个数据。

Operators操作符获取

1、采用_gte和_lte来设置一个取值范围：

_gte：就是大于等于
_lte：就是小于等于
去掉e就是等于，gt和lt分别是大于和小于。

http:localhost:端口号/对象名 ? 属性值_gte=某条件 & 属性值_lte=某条件

2、采用_ne来设置不包含某个值，也就是不等于!=。

3、采用_like来设置模糊查询

http:localhost:端口号/对象名 ? 属性值_like=某些字符串

slice和Operatorsd的区别

用途：切片用于获取数组的一部分，而操作符用于执行查询、比较和运算。

数据变更 ：切片不会改变原始数据，而使用操作符进行查询可能会创建数据的新视图或副本（如使用.filter()）。

切片通常用于数组，它允许你获取数组中的一部分元素，基于元素的索引位置。在JavaScript中，数组的.slice()方法可以用来进行切片操作。

操作符在编程中用于执行操作，比如比较、算术运算、逻辑运算等。在处理JSON数据时，操作符通常用于查询和过滤数据。

全文搜索

使用q来搜索全文内容：

http:localhost:端口号/对象名 ? q=某个字符串

这个全文搜索太宽泛了，咱们不经常用到，所以可以不用花费心思。

POST添加数据

在网络通信和数据传输的上下文中，"POST"通常指的是HTTP POST方法，这是一种用于向服务器提交数据的HTTP请求类型。

添加数据使用的是POST方法，经常用来创建一个新的资源。

示例：

httpPUT /users/1 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com"
  //这个请求将完全替换用户1的信息。
}

这个使用就要用到PATCH，他与PUT不同，PATCH不会替换调整个资源，只更新请求指定的字段就可以了。

示例：

PATCH /users/1 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "email": "newalice@example.com"
  //这个请求将只更新用户1的电子邮件地址。
}

PUT更新数据

更新数据用到的是PUT方法，会更新已有的资源里面的数据。如果资源不存在的话，会自动创建数据。

⚠️这里要注意的是：PUT方法会更新整个资源对象。

Delete删除数据

Delete方法就是用来删除资源。

这里要注意的是，如果要删除全部，使用http:localhost:端口号/对象名是没办法完全删除数据的，因为必须指定删除的对象id，所以只能通过循环来删除，这就需要通过GET方法获取到当前的最大值id来作为循环key。