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

json-server使用步骤:

1、在项目下新一个文件夹,我新建的文件名叫mock
2、mock文件下建一个xxx.json文件用来存放模拟数据
json-server模拟数据使用方法详解,小白教程。_第1张图片
模拟练习就放这了,别客气,直接拿上跟着下面的步骤练习

{
	"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
json-server模拟数据使用方法详解,小白教程。_第2张图片
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启动
如下图就是启动成功
json-server模拟数据使用方法详解,小白教程。_第3张图片
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

json-server模拟数据使用方法详解,小白教程。_第4张图片
2、浏览器输入:http://localhost:3000/readers
json-server模拟数据使用方法详解,小白教程。_第5张图片

3、浏览器输入:http://localhost:3000/readers/007
json-server模拟数据使用方法详解,小白教程。_第6张图片

你可能感兴趣的:(js,vue)