关于json-server包的使用

作者原文

1、关于什么是json-server?

  1、json-server 是一个属于npm管理的一个包,它是可以为前端提供mock的功能的,所以安装需要用npm进行全局安装。
  2、json-server很好的结合了mock + express,也是非常的方便的。

2、安装命令

  npm install -g json-server 或者 yarn global add json-server 
  • 在电脑中打开cmd输入以上命令:
    image.png
  • 当上面的包安装完成后,会提供一个json-server的全局命令,基于这个命令就可以mock数据了
  • 安装完后,去新建一个json-server文件夹,在文件夹里面创建一个XXX.json文件,我这里新建一个user_info.json。
  • 注意json文件格式必须要严格按照json的形式写。如下所示
  {
    "user":[
        {
            "id":"1",
            "username":"程序中的一个迷途小书童",
            "title":"幸福,大概就是你喜欢粘着的那个人",
            "info":"当一切都安静下来的时候,你是否还在努力的敲代码......",
            "ID":"qq_43843173"
        },
        {
            "id":"2",
            "username":"程序中的一个迷途小书童",
            "title":"幸福,大概就是你喜欢粘着的那个人",
            "info":"当一切都安静下来的时候,你还在努力的敲代码吗......",
            "ID":"qq_43849527"
        },
        {
            "id":"3",
            "username":"程序中的一个迷途小书童",
            "title":"幸福,大概就是你喜欢粘着的那个人",
            "info":"当一切都安静下来的时候,你是否还在努力的敲代码......",
            "ID":"qq_4384hih3"
        }
    ]
}
  • 接下来在所在的文件夹中,启动cmd命令,输入
  json-server --watch user_info.json(文件名)
  • 结果如下:
    image.png
    -哟嚯,不好意思,报错了额,接下来配置一下环境变量把,小作的电脑找到的是这个路径下:C:\Users\acer\AppData\Local\Yarn\bin,直接找到bin目录下,复制路径。
    – 步骤1:
    huan.png
    –步骤2:
    huan1.png
    –步骤3:
    huan2.png
  • 好了,点击确定好,重新启用cmd 输入命令:json-server --watch user_info.json 就可以看到如图所示啦:
    image.png
  • 最后,在浏览器地址栏上输入:Resource这个地址就可以访问自己定义的api数据接口啦。嘻嘻,如图:
    image.png
  • json-server 里面提供了很多的功能,但是要使用json-server的标准哦。
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值