html5移动网站制作教程商业网络

前端开发经常需要模拟接口请求，可以通过 json-server 实现。

1. 安装 json-server

在前端项目的终端命令行中执行

npm i json-server

2. 创建数据源

在项目中新建文件 db.json ，与 package.json 同级，内容为模拟的数据

• 注意 json 文件对格式的显示，整个数据用 {} 包裹，每一项数据为一个属性
• 属性和字符串都需要用双引号包裹

{"dataList": [{"id": 1,"title": "文章1"},{"id": 2,"title": "文章2"},{"id": 3,"title": "文章3"}]
}

3. 添加启动接口服务的脚本

在 package.json 的 scripts 选项中添加 （端口可以自定义为其他值）

    "serve": "json-server db.json --port 3000"

4. 启动接口服务

vscode 中直接启动

如下图显示，即启动成功

5. 访问接口

浏览器中访问 http://localhost:3000/dataList，可见模拟的数据