关于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的标准哦。