使用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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
javascript 对象比较实现代码
Apr 27 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
javascript实现Table排序的方法
May 15 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 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操作数组的一些函数整理介绍
2011/07/17 PHP
PHP 时间日期操作实战
2011/08/26 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
python能做哪方面的工作
2020/06/15 Python
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
完美主义个人的自我评价
2014/02/17 职场文书
申报材料格式
2014/12/30 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
合作协议书格式范本
2016/03/21 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js