配置JSON-SEVER,模拟接口数据

利用json-sever搭建一个本地的数据接口进行增删改查

https://github.com/typicode/json-server


1.安装json-server

全局安装json-server

npm install -g json-server
弹出版本号表示安装成功

1.安装完成之后创建一个文件夹
2.创建完文件夹之后在当前文件夹初始化

npm init --yes

初始化完之后会在文件夹下多一个package.json文件
3.之后在当前文件夹下安装需要的依赖,也就是刚刚在全局安装过的json-server

npm install json-server --save 

安装成功之后打开package.json
如果刚才打开过package.json的话会发现多出一条dependencies 依赖信息



2.调整json-server的启动方式

打开github找到Start JSON Server

json-server --watch db.json

db.json可以是自己创建的名字自己改,我改的是school.json
可以在终端直接输入这个监听db.json
也可以在package.json里配置
直接复制这条放到package.json的"test"里边



"test"也可以修改一个自己的名字


这是我修改完成的
3.创建json文件

在当前文件夹下创建一个json文件
把需要的数据写在json文件中

{
  "users": [
    {
      "name": "张敢",
      "age": 14,
      "sex": "male",
      "hobbit": "篮球",
      "achievement": "bad",
      "id": 1,
      "schoolId": 1
    },
    {
      "name": "大傻",
      "age": 15,
      "sex": "male",
      "hobbit": "铅球",
      "achievement": "bad",
      "id": 2,
      "schoolId": 2
    },
    {
      "name": "周芷若",
      "age": 18,
      "sex": "Female",
      "hobbit": "古筝",
      "achievement": "good",
      "id": 3,
      "schoolId": 3
    },
    {
      "name": "凯子",
      "age": 20,
      "sex": "male",
      "hobbit": "足球",
      "achievement": "bad",
      "id": 4,
      "schoolId": 3
    }
  ],
  "schools": [
    {
      "id": 1,
      "name": "龙城小学",
      "description": "小学生读的"
    },
    {
      "id": 2,
      "name": "龙城初中",
      "description": "初中生读的"
    },
    {
      "id": 3,
      "name": "龙城高中",
      "description": "高中生读的"
    }
  ]
}

这是我随便创建的一个json文件
接着就可以启动json-server了


启动json-server
npm run json:server

json:server就是修改了"test"的名字



启动之后会打开一个localhost:3000的端口
接着就可以访问这个端口了,也可以在这个端口添加/user就可以访问到对应的json数据



成功搭建json-server
测试get请求

get请求直接在浏览器url中输入就可以
创建一个README.md文件记录操作方式
常用的一些方法

//获取所有用户信息
http://localhost:3000/users

//获取id为1的用户信息
http://localhost:3000/users/1

//获取学校的所有信息
http://localhost:3000/schools

//获取单个学校的信息
http://localhost:3000/schools/1

//获取所有公司id为1的用户信息
http://localhost:3000/schools/1/users

//根据学校名字获取信息
http://localhost:3000/schools?name=龙城高中

//根据多个名字获取学校信息
http://localhost:3000/schools?name=龙城小学&name=龙城初中

//获取一页中的两条数据
http://localhost:3000/schools?_page=1&_limit=2

//asc升序 desc降序排序
http://localhost:3000/schools?_sort=name&_order=asc

//获取年龄15及以上的用户信息
http://localhost:3000/users?age_gte=15

//获取年龄15-18之间的用户信息
http://localhost:3000/users?age_gte=15&age_lte=18

//搜索用户信息
http://localhost:3000/users?q=张敢

测试post和其他请求方式

安装一个软件postMan
下载地址https://www.getpostman.com/downloads/

测试post需要配置下请求头

随便写点数据

点击send,就可以发现package.json文件多出了这条数据这就说明post请求已经成功了


测试DELETE请求

当点击Send之后会发现package.json刚post请求的数据已经没有了.

PATCH更新请求

第一条数据名字为张敢和学习成绩比较差的同学给开除啦,
学习成绩较好的俊俊同学替代了这位小张同学





最后拿到JSONPlaceholde里面的数据

Remote schema
You can load remote schemas.

json-server http://example.com/file.json
json-server http://jsonplaceholder.typicode.com/db

复制第二条


添加至第八行

重启一下终端就可以拿到JSONPlaceholder里的数据了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,651评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,468评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,931评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,218评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,234评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,198评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,084评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,926评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,341评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,430评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,036评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2 354

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,182评论 0 3
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,097评论 1 32
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,082评论 0 2
  • 前两部分我们已经完成了博客页面的展示和后台页面的展示: React技术栈+Express+Mongodb实现个人博...
    SamDing阅读 5,460评论 1 12
  • 《菜根谭》有言:“恩里由来生害,故快意时须早回首;败后或反成功,故拂心处莫便放手。” 雁穹悟道:水满则溢,月盈则亏...
    哲理大师阅读 398评论 0 0