电子商务网站建设讨论,网站建设公司深圳,建投能源公司简介,潮州+网站建设1#xff0c;json-server介绍
一个在前端本地运行#xff0c;可以存储json数据的server。
通俗来说#xff0c;就是模拟服务端接口数据#xff0c;一般用在前后端分离后#xff0c;前端人员可以不依赖API开发#xff0c;而在本地搭建一个JSON服务#xff0c;自己产生测…1json-server介绍
一个在前端本地运行可以存储json数据的server。
通俗来说就是模拟服务端接口数据一般用在前后端分离后前端人员可以不依赖API开发而在本地搭建一个JSON服务自己产生测试数据。
顾名思义json-server就是个存储json数据的server~。
json-server网址json-server - npm
2下载安装
使用npm全局安装json-server
npm install -g json-server可以通过查看版本号来测试是否安装成功
json-server -v3创建模拟json数据
test.json 既然是造数据就需要创建一个json数据。
{fruits: [{id: 1,name: 苹果,price: 1.28},{id: 2,name: 橘子,price: 3.88},{id: 3,name: 西瓜,price: 1.98}],users: [{name: {username:admin,nickname:zhangsan},pwd: 123456}]
}要注意数据格式符合JSON格式尤其注意最后一个键值对后面不要有逗号。如果数据格式有误命令窗口会报错可以根据错误提示进行修整。
4启动 json-server
json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。
在任意一个文件夹下此处假设我创建了一个myserver文件夹进入到该文件夹里面执行代码
例如以下命令把db.json文件托管成一个 web 服务。
json-server --watch db.json5修改端口号
json-server 默认是 3000 端口我们也可以自己指定端口指令如下
json-server --watch db.json --port 3004如果觉得启动服务的这段代码有点长还可以考虑db.json同级文件夹也就是myserver文件夹新建一个package.json把配置信息写在里头
//JavaScript
{scripts: {mock: json-server db.json --port 3004}
}之后启动服务只需要执行如下指令就可以了
npm run mock6json-server 的相关启动参数 语法json-server [options] 选项列表 source可以是json文件或者js文件。实例
$ json-server --watch -c ./jsonserver.json
$ json-server --watch app.js
$ json-server db.json
json-server --watch -port 8888 db.json7操作数据
通过3中创建的 db.json 数据进行举例说明如何使用GET, POST, PUT, PATCH or DELETE 方法来对数据进行操作。
获取数据 首先我们先来看GET操作。
浏览器地址访问就可以看做GET操作所以不用写任何代码我们就可以先来测试下 url -GET 操作。
常规获取
http://localhost:3004/fruits可以得到所有水果数据对象数组
[{id: 1,name: 苹果,price: 1.28},{id: 2,name: 橘子,price: 3.88},{id: 3,name: 西瓜,price: 1.98}
]过滤获取 Filter 根据id获取数据
http://localhost:3004/fruits/1可以得到指定id为1的水果对象
{id: 1,name: 苹果,price: 1.28
}当然指定id为1的获取指令还可以用如下指令但要注意此时返回的数据是一个数组。
http://localhost:3004/fruits?id1[{id: 1,name: 苹果,price: 1.28}
]以此类推我们也可以通过水果名称或者是价格来获取数据
http://localhost:3004/fruits?name橘子[{id: 2,name: 橘子,price: 3.88}
]也可以指定多个条件用符号连接
http://localhost:3004/fruits?name橘子price3.88[{id: 2,name: 橘子,price: 3.88}
]你甚至还可以使用对象取属性值 obj.key 的方式
http://localhost:3004/users?name.nicknamezhangsan[{name: {username: admin,nickname: zhangsan},pwd: 123456}
]以上看着是不是特别眼熟不就是HTTP中GET请求方式嘛~嗯更好玩的还在后面。分页 Paginate 为了能演示分页效果我们在db.json文件里的fruits里面多添加了几种水果。
{fruits: [{id: 1,name: 糖心富士苹果,price: 2.38},{id: 2,name: 橘子,price: 3.88},{id: 3,name: 宁夏西瓜,price: 1.98},{id: 4,name: 麒麟西瓜,price: 3.98},{id: 5,name: 红蛇果,price: 2.5},{id: 6,name: 黑皮西瓜,price: 0.98},{id: 7,name: 红心火龙果,price: 2.69},{id: 8,name: 国产火龙果,price: 1.69},{id: 9,name: 海南荔枝,price: 9.9},{id: 10,name: 陕西冬枣,price: 5.39},{id: 11,name: 软籽石榴,price: 2.39},{id: 12,name: 蜜橘,price: 1.99},{id: 13,name: 海南香蕉,price: 1.45}],users: [{name: {username:admin,nickname:zhangsan},pwd: 123456}]
}编辑过db.jsondb.json数据有变动都要关闭服务重新启动。注意不要用 CTRL C 来停止服务因为这种方式会导致 node.js 依旧霸占着3004端口导致下一次启动失败。简单粗暴关闭窗口即可 —— 个人window系统其他系统可能没有这样的烦恼。
分页采用 _page 来设置页码 _limit 来控制每页显示条数。如果没有指定 _limit 默认每页显示10条。
http://localhost:3004/fruits?_page2_limit5[{id: 6,name: 黑皮西瓜,price: 0.98},{id: 7,name: 红心火龙果,price: 2.69},{id: 8,name: 国产火龙果,price: 1.69},{id: 9,name: 海南荔枝,price: 9.9},{id: 10,name: 陕西冬枣,price: 5.39}
]排序 Sort 排序采用 _sort 来指定要排序的字段 _order 来指定排序是正排序还是逆排序asc | desc 默认是asc。
http://localhost:3004/fruits?_sortprice_orderdesc[{id: 9,name: 海南荔枝,price: 9.9},{id: 10,name: 陕西冬枣,price: 5.39},{id: 4,name: 麒麟西瓜,price: 3.98},{id: 2,name: 橘子,price: 3.88},{id: 7,name: 红心火龙果,price: 2.69},{id: 5,name: 红蛇果,price: 2.5},{id: 11,name: 软籽石榴,price: 2.39},{id: 1,name: 糖心富士苹果,price: 2.38},{id: 12,name: 蜜橘,price: 1.99},{id: 3,name: 宁夏西瓜,price: 1.98},{id: 8,name: 国产火龙果,price: 1.69},{id: 13,name: 海南香蕉,price: 1.45},{id: 6,name: 黑皮西瓜,price: 0.98}
]也可以指定多个字段排序一般是按照price进行排序后相同price的再根据id排序
http://localhost:3004/fruits?_sortprice,id_orderdesc,asc取局部数据 Slice slice的方式和 Array.slice() 方法类似。采用 _start 来指定开始位置 _end 来指定结束位置、或者是用_limit来指定从开始位置起往后取几个数据。
http://localhost:3004/fruits?_start2_end4[{id: 3,name: 宁夏西瓜,price: 1.98},{id: 4,name: 麒麟西瓜,price: 3.98}
]http://localhost:3004/fruits?_start2_limit4[{id: 3,name: 宁夏西瓜,price: 1.98},{id: 4,name: 麒麟西瓜,price: 3.98},{id: 5,name: 红蛇果,price: 2.5},{id: 6,name: 黑皮西瓜,price: 0.98}
]取符合某个范围 Operators
采用 _gte _lte 来设置一个取值范围range:
http://localhost:3004/fruits?id_gte4id_lte6[{id: 4,name: 麒麟西瓜,price: 3.98},{id: 5,name: 红蛇果,price: 2.5},{id: 6,name: 黑皮西瓜,price: 0.98}
]采用_ne来设置不包含某个值
http://localhost:3004/fruits?id_ne1id_ne10[{id: 2,name: 橘子,price: 3.88},{id: 3,name: 宁夏西瓜,price: 1.98},{id: 4,name: 麒麟西瓜,price: 3.98},{id: 5,name: 红蛇果,price: 2.5},{id: 6,name: 黑皮西瓜,price: 0.98},{id: 7,name: 红心火龙果,price: 2.69},{id: 8,name: 国产火龙果,price: 1.69},{id: 9,name: 海南荔枝,price: 9.9},{id: 11,name: 软籽石榴,price: 2.39},{id: 12,name: 蜜橘,price: 1.99},{id: 13,name: 海南香蕉,price: 1.45}
]采用_like来设置匹配某个字符串或正则表达式
http://localhost:3004/fruits?name_like果[{id: 1,name: 糖心富士苹果,price: 2.38},{id: 5,name: 红蛇果,price: 2.5},{id: 7,name: 红心火龙果,price: 2.69},{id: 8,name: 国产火龙果,price: 1.69}
]全文搜索 Full-text search 采用 q 来设置搜索内容:
http://localhost:3004/fruits?q3[{id: 1,name: 糖心富士苹果,price: 2.38},{id: 2,name: 橘子,price: 3.88},{id: 3,name: 宁夏西瓜,price: 1.98},{id: 4,name: 麒麟西瓜,price: 3.98},{id: 10,name: 陕西冬枣,price: 5.39},{id: 11,name: 软籽石榴,price: 2.39},{id: 13,name: 海南香蕉,price: 1.45}
]除了获取数据我们当然还希望能向操作sql一样能更改数据、删除数据了。
所以这里我们采用大部分人熟悉的 ajax 方法来操作下响应的数据。
