乌镇网站建设标书,常营网站建设公司,2345网址导航电脑版大全,网站添加备案信息吗json-server环境搭建 一个在前端本地运行#xff0c;可以存储json数据的server。 基于node环境#xff0c;可以指定一个 json 文件作为 API 的数据源。 文章目录json-server环境搭建前提下载安装监听服务启动成功修改端口号方式一#xff1a;方式二#xff1a;数据操作测试…json-server环境搭建 一个在前端本地运行可以存储json数据的server。 基于node环境可以指定一个 json 文件作为 API 的数据源。 文章目录json-server环境搭建前提下载安装监听服务启动成功修改端口号方式一方式二数据操作测试数据源查询数据获取数据方式方式一方式二分页获取数据排序数据截取数据区间数据配置静态资源服务器前提
安装 node 环境 下载安装
全局安装json-server
npm install -g json-server监听服务
在需要的文件夹下执行以下命令执行成功后默认会创建 db.json 文件。
json-server --watch db.json启动成功
根据执行命令服务已正常监听我们可以根据以下地址进行访问体验。可以理解为json-server 把 db.json 根节点的每一个 key 当作一个 router 。我们可以根据这个规则来编写测试。 在浏览器运行 http://localhost:3000 效果如下 修改端口号
方式一
json-server 默认端口为 3000可以根据需要自定义端口号。
json-server --watch db.json --port 3006方式二
告诉你个可以偷懒的方式吧如果觉得每次 启动服务 都要执行相关命令可以在 db.json 同级文件夹新建一个 package.json 文件然后把以下配置信息放在里面就可以啦。
{scripts: {mock: json-server db.json --port 3006}
}注意启动服务的方式执行以下命令即可。
npm run mock数据操作
测试数据源
直接复制到所创建的 db.json 文件中
{subject: [{id: 1,name: JAVA,price: 888 },{id: 2,name: GO,price: 2088},{id: 3,name: VUE,price: 288}]
}查询数据 获取数据方式
方式一
直接在 url 后面拼接 id 值
http://localhost:3006/subject/3返回数据格式对象
{id: 3,name: VUE,price: 288
}方式二
也是我们常见 GET 的传参方式拼接需要查询参数
http://localhost:3006/subject?id3返回数据格式数组
[{id: 3,name: VUE,price: 288}
]分页获取数据
_page页码_limit每页显示数量如果没有指定默认每页10条数据。
http://localhost:3006/subject?_page1_limit2排序数据
_sort排序字段_order排序方式【asc | desc】默认asc
http://localhost:3006/subject?_sortid_orderdesc截取数据
使用 slice 方式通过参数 _start 指定开始位置_end指定结束位置注意 是通过 下标 方式截取也可以结合_limit 指定开始位置算起往后取n个数据。
http://localhost:3006/subject?_start3_end6http://localhost:3006/subject?_start3_limit6区间数据
_gte 大于等于_lte 小于等于_ne 不等于_like 模糊查询
http://localhost:3006/subject?id_gte2_lte5http://localhost:3006/subject?name_likeV配置静态资源服务器
在根目录下创建 json 文件例 json_server_config.json在根目录下创建 public 目录存放静态资源。
{port: 3006,watch: true,static: ./public,read-only: false,on-cors: true,no-gzip: false
}修改 package.json 文件中启动命令
{name: my-json-server,version: 1.0.0,description: ,main: index.js,scripts: {mock1: json-server db.json --port 3006,mock: json-server --c json_server_config.json db.json},keywords: [],author: ,license: ISC
}因为配置文件中指定静态文件的目录所以访问图片时可以忽略 public 目录。例访问图片public/imagehttp://localhost:3006/image/test.png
