使用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闭包入门示例
Apr 30 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
JavaScript实现简单拖拽效果
Sep 15 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 根据IP地址控制访问的代码
2010/04/22 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
python基于http下载视频或音频
2018/06/20 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
经销商会议欢迎词
2014/01/11 职场文书
运动会表扬稿大全
2014/01/16 职场文书
公益活动邀请函
2014/02/05 职场文书
新教师培训方案
2014/06/08 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书