您现在的位置是：网站首页> 编程资料编程资料

Vue中请求本地JSON文件并返回数据的方法实例_vue.js_

2023-05-24 270人已围观

简介 Vue中请求本地JSON文件并返回数据的方法实例_vue.js_

1.目录结构
2.检查一下自己是否安装了 json-server（以下截图代表安装了）
3.安装完成以后我们就可以运行自己的json文件了
4.看看浏览器里的数据呈现效果吧
5.为了保险起见，我还特地去 postman 上测试了一下（可以省略这步）
6.现在我们可以编写代码发送请求来获取数据啦
7.在控制台就可以看到我们数据请求回来了
总结

1.目录结构

直接在根目录下创建自己的JSON文件，在此我的JSON文件名为data.json

以下是我的JSON文件内容（此处是参照的黑马程序员的vue视频教程）

{ "data": { "totalpage": 5, "pagenum": 4, "users": [{ "id": 1, "username": "tiger117", "mobile": "18616358651", "type": 1, "email": "tige112@163.com", "create_time": "2017-11-09T20:36:26.000Z", "mg_state": true, "role_name": "炒鸡管理员" }, { "id": 2, "username": "tiger118", "mobile": "18616358651", "type": 1, "email": "tige112@163.com", "create_time": "2017-11-09T20:36:26.000Z", "mg_state": true, "role_name": "炒鸡管理员" }, { "id": 3, "username": "tiger119", "mobile": "18616358651", "type": 1, "email": "tige112@163.com", "create_time": "2017-11-09T20:36:26.000Z", "mg_state": true, "role_name": "炒鸡管理员" }, { "id": 4, "username": "tiger110", "mobile": "18616358651", "type": 1, "email": "tige112@163.com", "create_time": "2017-11-09T20:36:26.000Z", "mg_state": true, "role_name": "炒鸡管理员" }, { "id": 25, "username": "tiger111", "mobile": "18616358651", "type": 1, "email": "tige112@163.com", "create_time": "2017-11-09T20:36:26.000Z", "mg_state": true, "role_name": "炒鸡管理员" } ] }, "meta": { "msg": "获取成功", "status": 200 } }