• json-server|0编码实现REST API


    在这里插入图片描述

    欢迎来到我的博客
    📔博主是一名大学在读本科生,主要学习方向是前端。
    🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
    🛠目前正在学习的是🔥 R e a c t 框架 React框架 React框架🔥,中间穿插了一些基础知识的回顾
    🌈博客主页👉codeMak1r.小新的博客

    本文被专栏【前端常见JS库】收录

    🕹坚持创作✏️,一起学习📖,码出未来👨🏻‍💻!

    前言

    在个人前端项目实战中,我们经常因为缺少数据,没有相应的后端数据,导致没办法做出良好的页面来提升自己。其实,有一种方法,可以不需要java API,不需要node API0编码即可实现一个包含增删改查的API接口,还能实现过滤、查询、排序等等操作

    这个方法就是:json-server。各位,30秒时间,一个json文件,剩下的交给json-server通通都能搞定!

    什么是json-server?

    一个基于express,node的一个被npm管理的库,它可以基于一个json文件,来为前端提供一个良好、可用的模拟数据接口。

    (类似mock^^)

    json-server站在mock与express的肩膀上,为前端提供了不错的模拟数据解决方案。

    另外,json-server在创建server服务的同时,设置了Access-Control-Allow-Origin请求头,在服务端层面解决了跨域资源共享,无需前端再配置跨域。

    安装json-server

    npm i json-server 
    yarn global add json-server
    //
    !需要全局安装!
    
    • 1
    • 2
    • 3
    • 4

    json-server的使用

    在包安装完成之后,json-server提供了全局命令:json-server --watch

    我们首先准备一个用于测试的json文件,例如,我在~/Documents/db/路径下创建了一个test.json文件,文件内容如下:

    ~/Documents/db/test.json

    {
      "posts": [
        { "id": 1, "title": "json-server", "author": "typicode" },
        { "id": 2, "title": "json-server-test", "author": "codeMak1r" }
      ],
      "comments": [
        { "id": 1, "body": "comment1", "postId": 1 },
        { "id": 2, "body": "comment2", "postId": 2 }
      ]
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    启动json-server服务:

    json-server --watch test.json
    
    • 1

    如果执行成功了,那么服务就已经开启在3000端口了。

    如果报以下错误:

    在这里插入图片描述

    说明你电脑中的3000端口已被占用,我们换个端口就好了:

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

    使用--port指定服务开启的端口号。

    此时,直接在浏览器的地址栏中访问json-server服务,我的json-server服务是开启在5000端口的,于是我在浏览器地址栏中输入:localhost:5000按下回车,看到如下页面:

    在这里插入图片描述

    说明你的json-server服务器启动成功。

    取数据 – get

    axios.get("http://localhost:5000/posts".then(res => {
    	console.log(res)
    }))
    
    • 1
    • 2
    • 3
    // 取id=1的数据
    axios.get("http://localhost:5000/posts?id=1")
    // 取id=1且title=json-server的数据
    axios.get("http://localhost:5000/posts?id=1&title=json-server")
    
    • 1
    • 2
    • 3
    • 4
    // 取id=1的对象
    axios.get("http://localhost:5000/posts/1")
    
    • 1
    • 2

    增加数据 – post

    axios.post("http://localhost:5000/posts",{
      title: "333",
      author: "xiaoming"
    })
    
    • 1
    • 2
    • 3
    • 4

    此时,test.json文件内容变为

    {
      "posts": [
        { "id": 1, "title": "json-server", "author": "typicode" },
        { "id": 2, "title": "json-server-test", "author": "codeMak1r" },
        { "id": 3, "title": "333", "author": "xiaoming" }
      ],
      "comments": [
        { "id": 1, "body": "comment1", "postId": 1 },
        { "id": 2, "body": "comment2", "postId": 2 }
      ]
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    更新数据 – put

    axios.put("http://localhost:5000/posts/1",{
      title: "json-server-修改"
    })
    
    • 1
    • 2
    • 3

    此时,test.json文件内容变为

    {
      "posts": [
        { "id": 1, "title": "json-server-修改" },
        { "id": 2, "title": "json-server-test", "author": "codeMak1r" },
        { "id": 3, "title": "333", "author": "xiaoming" }
      ],
      "comments": [
        { "id": 1, "body": "comment1", "postId": 1 },
        { "id": 2, "body": "comment2", "postId": 2 }
      ]
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    我们发现,原先数据中的author字段不见了,这是因为在put请求下,创建的是一个新的对象,你没有声明修改的字段(比如author)默认视为舍弃,新对象中只有id、title字段存在。

    如果想要不声明修改的字段就保留原字段值的话,可以使用局部更新

    局部更新 – patch

    axios.patch("http://localhost:5000/posts/2"),{
      title: "json-server-test-修改"
    }
    
    • 1
    • 2
    • 3

    此时,test.json文件内容:

    {
      "posts": [
        { "id": 1, "title": "json-server-修改" },
        { "id": 2, "title": "json-server-test-修改", "author": "codeMak1r" },
        { "id": 3, "title": "333", "author": "xiaoming" }
      ],
      "comments": [
        { "id": 1, "body": "comment1", "postId": 1 },
        { "id": 2, "body": "comment2", "postId": 2 }
      ]
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在局部更新下,没有声明的author字段被保留下来了,并没有被舍弃。

    删除数据 – delete

    axios.delete("http://localhost:5000/posts/3")
    
    • 1

    此时,test.json文件内容:

    {
      "posts": [
        { "id": 1, "title": "json-server-修改" },
        { "id": 2, "title": "json-server-test-修改", "author": "codeMak1r" }
      ],
      "comments": [
        { "id": 1, "body": "comment1", "postId": 1 },
        { "id": 2, "body": "comment2", "postId": 2 }
      ]
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    连接操作 – _embed

    连接操作符:_embed获取包含下级资源的数据(类似SQL语句中的表关联)

    // 查询文章以及文章对应的评论
    axios.get("http://localhost:5000/posts?_embed=comments")
    
    • 1
    • 2

    查询结果为:

    [
      {
        id: 1,
        title: "json-server-修改",
        comments: [{
          id: 1,
          body: "comment1",
      		postId: 1
        }]
      },
      {
        id: 2,
        title: "json-server-test-修改",
        comments: [{
          id: 2,
          body: "comment2",
          postId: 2
        }]
      }
    ]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    连接操作 – _expand

    连接操作符:_expand获取包含上级资源的数据

    // 查询评论以及评论所属的文章
    axios.get("http://localhost:5000/comments?_expand=post")
    
    • 1
    • 2

    查询结果为:

    [
      {
        id: 1,
        body: "comment1",
        postId: 1,
        post: {
          id: 1,
          title: "json-server-修改"
        }
      },
      {
        id: 2,
        body: "comment2",
        postId: 2,
        post: {
          id: 2,
          title: "json-server-test-修改",
          author: "codeMak1r"
        }
      }
    ]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
  • 相关阅读:
    刷题记录(NC235267 星球大战,NC216012 Let‘s Play Curling,NC235294 任务,NC235569 牛可乐与NCPC)
    RestEasy入门小程序
    模拟实现【哈希】
    【postgresql】查看数据中表的信息
    SysML与MBSE的关系
    解决问题error: reference to ‘byte‘ is ambiguous
    ISCSLP 2022 | NPU-ASLP实验室8篇论文被录用
    微分方程数值解法(PID仿真用一阶被控对象库PLC算法实现)
    Vue3 + TS 自动检测线上环境 内容分发部署 —— 版本热更新提醒
    Laravel 不经常用的小技巧
  • 原文地址:https://blog.csdn.net/Svik_zy/article/details/126737509