json-server模拟数据使用方法详解，小白教程。

偏执的太偏执、 2022-12-15 06:13 155阅读 0赞

# json-server使用步骤: #

1、在项目下新一个文件夹，我新建的文件名叫mock  
2、mock文件下建一个xxx.json文件用来存放模拟数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
模拟练习就放这了，别客气，直接拿上跟着下面的步骤练习

{
    	"books":[
    		{"id":"878911","name":"三国","author":"罗贯中"},
    		{"id":"878912","name":"水浒","author":"吴承恩"}
    	],
    	"readers":[
    		{"id":"007","name":"张三疯","age":35},
    		{"id":"008","name":"张四疯","age":32}	
    	]
    }

3、cd到mock文件下使用npm init -y 命令生成package.json  
![在这里插入图片描述][20201015184219519.png_pic_center]  
4、**安装json-server**  
cd mock下使用 npm i json-server -D 下载  
5、**修改启动命令**  
在mock下package.json中修改，如下代码示例

"scripts": {
        "server":"json-server db.json"
    },

**6、启动**  
cd mock下 npm run server启动  
如下图就是启动成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]  
1、在浏览器访问：http://localhost:3000/books/ 能够得到books的内容  
2、在浏览器访问：http://localhost:3000/books/878911能得到books里id为878911 的书籍信息。  
3、在浏览器访问：http://localhost:3000/books?id=878911也能得到books里id为878911 的书籍信息。  
4、在浏览器访问：http://localhost:3000/readers 能得到readers的信息。

#### 测试效果展示 ####

**1、浏览器输入：http://localhost:3000/books**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]  
**2、浏览器输入：http://localhost:3000/readers**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]

**3、浏览器输入：http://localhost:3000/readers/007**  
![在这里插入图片描述][20201015185924319.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6978de2c341f44a997a1ac7acd05c2fa.png
[20201015184219519.png_pic_center]: /images/20221123/fd9e9dfddc484efbb005372c6c4e72f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/ea6d3d4e5d2a462bac0fb1738557a389.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/1dfa00afbdd64f539739c3c1efe5895e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/17abfd6d86c441569a6ce5f8583285a1.png
[20201015185924319.png_pic_center]: /images/20221123/70a00034636e4273974d7ebd3eef74eb.png