1、關(guān)于什么是json-server？

  1、json-server 是一個屬于npm管理的一個包，它是可以為前端提供mock的功能的，所以安裝需要用npm進(jìn)行全局安裝。
  2、json-server很好的結(jié)合了mock + express，也是非常的方便的。

2、安裝命令

  npm install -g json-server 或者 yarn global add json-server 

• 在電腦中打開cmd輸入以上命令：

  
  
  image.png
• 當(dāng)上面的包安裝完成后，會提供一個json-server的全局命令，基于這個命令就可以mock數(shù)據(jù)了
• 安裝完后，去新建一個json-server文件夾，在文件夾里面創(chuàng)建一個XXX.json文件,我這里新建一個user_info.json。
• 注意json文件格式必須要嚴(yán)格按照json的形式寫。如下所示

  {
    "user":[
        {
            "id":"1",
            "username":"程序中的一個迷途小書童",
            "title":"幸福，大概就是你喜歡粘著的那個人",
            "info":"當(dāng)一切都安靜下來的時候，你是否還在努力的敲代碼......",
            "ID":"qq_43843173"
        },
        {
            "id":"2",
            "username":"程序中的一個迷途小書童",
            "title":"幸福，大概就是你喜歡粘著的那個人",
            "info":"當(dāng)一切都安靜下來的時候，你還在努力的敲代碼嗎......",
            "ID":"qq_43849527"
        },
        {
            "id":"3",
            "username":"程序中的一個迷途小書童",
            "title":"幸福，大概就是你喜歡粘著的那個人",
            "info":"當(dāng)一切都安靜下來的時候，你是否還在努力的敲代碼......",
            "ID":"qq_4384hih3"
        }
    ]
}

• 接下來在所在的文件夾中，啟動cmd命令，輸入

  json-server --watch user_info.json(文件名)

• 結(jié)果如下：

  
  
  image.png
  
  

  -喲嚯，不好意思，報錯了額，接下來配置一下環(huán)境變量把，小作的電腦找到的是這個路徑下：C:\Users\acer\AppData\Local\Yarn\bin，直接找到bin目錄下，賦值路徑。
  -- 步驟1：

  
  
  huan.png
  
  --步驟2：
  
  huan1.png
  
  

  --步驟3：

  
  
  huan2.png

• 好了，點(diǎn)擊確定好，重新啟用cmd 輸入命令：json-server --watch user_info.json 就可以看到如圖所示啦：

  
  
  image.png

• 最后，在瀏覽器地址欄上輸入：Resource這個地址就可以訪問自己定義的api數(shù)據(jù)接口啦。嘻嘻，如圖：

  
  
  image.png
• json-server 里面提供了很多的功能，但是要使用json-server的標(biāo)準(zhǔn)哦。