使用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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
Jquery注册事件实现方法
May 18 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 Javascript
Javascript实现打鼓效果
Jan 29 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
晶体管单管来复再生式收音机
2021/03/02 无线电
php 全局变量范围分析
2009/08/07 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
简单实现php上传文件功能
2017/09/21 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
Python3.6正式版新特性预览
2016/12/15 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
Python爬虫开发与项目实战
2020/12/16 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
2014年会演讲稿范文
2014/01/06 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
学生会部长竞选稿
2015/11/19 职场文书