json-server实现增删改查(day1)

212 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第1天,点击查看活动详情

Json-server简介

  • json-server是一个前端模拟接口数据的一个小工具,他可以快速搭建存储数据的api,供给前端还没得到后端接口进行页面编写使用,功能十分强大,使用起来非常方便,可快速入门,适合前端测试接口使用,还可以支持分页查询,排序,增删改查等操作以及功能,是十分强大的一个工具。

Json-server快速入门

  1. json-server所需要的环境依赖:
  • json-server的使用需要安装node.js,node官网链接:nodejs.org/en/

image.png

  • 我们只需要下载最新版本即可用来搭建json-server服务
  1. json-server快速上手
  • 在项目里创建一个空的文件,建议可以命名为myserver,然后在cmd终端窗口里输入以下代码(前提是电脑配置有npm包管理工具):
json-server --watch db.json
  • 稍等一会就会创建一个db.json文件,里面有初始的代码,我们可以删除然后用vscode打开这个文件来编写我们所需要的数据并进行渲染,让数据展现到前端页面上,编写接口的数据需要是json格式,具体的数据样式如下所示:
{
  "user": [
    {
      "id": "0",
      "name": "张三",
      "address": "河南信阳",
      "phone": "416846846"
    },
    {
      "id": "1",
      "name": "李四",
      "address": "江西抚州",
      "phone": "15416546"
    },
    {
      "id": "2",
      "name": "王五",
      "address": "四川",
      "phone": "15416546"
    },
    {
      "id": "3",
      "name": "赵六",
      "address": "重庆",
      "phone": "15416546"
    }
  ]
}
  • 然后在这个文件的终端窗口输入json-server --watch db.json ,这样我们的接口数据就跑起来了,可以在终端窗口可以看到它跑在http://localhost:3000/user ,然后我们在浏览器输入这个本地链接就可以看到我们的数据展示在浏览器窗口上,之后就可以发送axios请求,将数据渲染到页面上。