使用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 相关文章推荐
javascript定义函数的方法
Dec 06 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
实现高性能javascript的注意事项
May 27 Javascript
JS实现进度条动态加载特效
Mar 25 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服务器实现多session并发运行
2006/10/09 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
就业自荐书
2013/12/05 职场文书
初婚未育证明
2014/01/15 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
感恩节活动方案
2014/01/27 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
《故乡》教学反思
2014/04/10 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
学习保证书100字
2015/02/26 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang