使用json-server简单完成CRUD模拟后台数据的方法


Posted in Javascript onJuly 12, 2018

在开发中,后端的接口往往是较晚出来的,但是有时候我们必须给前端页面一些虚假的数据去开发,这个时候一些mock工具就很有必要了,最终我选择了 json server 工具,因为它足够简单,而且也能和你们所熟知的Mock.js 配合模拟数据(思考:mockjs是可以作为一个独立的 mock server 存在,但为什么不单独用它?)。

安装

npm install json-server -g

安装完成后可以用 json-server -h 命令检查是否安装成功。

json-server [options] <source>

Options:
 --config, -c    指定 config 文件         [默认: "json-server.json"]
 --port, -p     设置端口号                  [default: 3000]
 --host, -H     设置主机                  [默认: "0.0.0.0"]
 --watch, -w    监控文件                      [boolean]
 --routes, -r    指定路由文件
 --static, -s    设置静态文件
 --read-only, --ro 只允许 GET 请求                  [boolean]
 --no-cors, --nc  禁止跨域资源共享                  [boolean]
 --no-gzip, --ng  禁止GZIP                     [boolean]
 --snapshots, -S  设置快照目录                   [默认: "."]
 --delay, -d    设置反馈延时 (ms)
 --id, -i      设置数据的id属性 (e.g. _id)           [默认: "id"]
 --quiet, -q    不输出日志信息                   [boolean]
 --help, -h     显示帮助信息                    [boolean]
 --version, -v   显示版本号                     [boolean]

使用

创建个 Mock 目录,在该目录下创建一个json文件, db.json

{
 "list": [
 {
  "name": "游魂博客",
  "link": "www.iyouhun.com",
  "id": 1
 },
 {
  "id": 2,
  "name": "买卖淘",
  "link": "www.868432.net"
 },
 {
  "id": 3,
  "name": "游魂全自动网页制作系统",
  "link": "www.youhun.wang"
 },
 {
  "id": 4,
  "name": "游魂博客",
  "link": "www.iyouhun.com"
 },
 {
  "id": 5,
  "name": "买卖淘",
  "link": "www.868432.net"
 },
 {
  "id": 6,
  "name": "游魂全自动网页制作系统",
  "link": "www.youhun.wang"
 }]
}

在Mock目录下执行

json-server db.json

打开浏览器, http://localhost:3000 ,查看页面。可以试着直接访问他索引出来的资源 如果要监控json文件的变化,启动的时候加上参数 --watch 或者 -w 。

支持的方法

你可以使用任何 HTTP method

如:

  • GET /list 获取列表
  • GET /list/1 获取id=1的数据
  • POST /list 创建一个项目
  • PUT /list/1 更新一个id为1的数据
  • PATCH /list/1 部分更新id为1的数据
  • DELETE /list/1 删除id为1的数据

注意:

  • 当你发送POST,PUT,PATCH 或者 DELETE请求时,变化会自动安全的保存到你的db.json文件中。
  • 你的请求体body应该是封闭对象。比如{"name": "Foobar"}
  • id不是必须的,在PUT或者PATCH方法中,任何的id值将会被忽略。
  • 在POST请求中,id是可以被添加的,如果该值没有没占用,会使用该值,否则自动生成。
  • POST,PUT或者PATCH请求应该包含一个Content-Type:application/json的header,来确保在请求body中使用json。

操作数据

这里请求数据我全部使用postman工具,最后一条删除我使用jquery的$.ajax  举例

查询

GET请求:http://localhost:3000/list

使用json-server简单完成CRUD模拟后台数据的方法

新增

POST请求:http://localhost:3000/list

参数:{"name":"游魂博客","link":www.iyouhun.com}

使用json-server简单完成CRUD模拟后台数据的方法

请求成功后会看到返回的就是新增成功的友链信息

修改

PUT请求:http://localhost:3000/list/1  修改id为1的友链信息

参数:{"name":"哈哈哈哈哈客","link":"www"}

使用json-server简单完成CRUD模拟后台数据的方法

删除

DELETE请求:http://localhost:3000/list/1 删除id为1的友链信息

$.ajax({
  type: 'DELETE',
  url: 'http://localhost:3000/list/1',
  success: function (data) {
    console.log(data)
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
Node.js的包详细介绍
Jan 14 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
jQuery操作css样式
May 15 jQuery
vue-router相关基础知识及工作原理
Mar 16 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
教你如何用node连接redis的示例代码
Jul 12 #Javascript
angular 内存溢出的问题解决
Jul 12 #Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 #Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 #Javascript
vue中如何实现pdf文件预览的方法
Jul 12 #Javascript
js+css实现红包雨效果
Jul 12 #Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 #Javascript
You might like
PHP原理之异常机制深入分析
2010/08/08 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
吸烟检讨书2000字
2014/02/13 职场文书