JsonServer安装及启动过程图解


Posted in Javascript onFebruary 28, 2020

JsonServer

主要的作用就是搭建本地的数据接口,创建json文件,便于调试调用

是一个 Node 模块,运行 Express 服务器,可以指定一个 json 文件作为 api 的数据源

官网:https://www.npmjs.com/package/json-server

安装全局的json-server

终端中输入:npminstall-gjson-server(windows系统)

mac系统:则为 sudonpminstall-gjson-server 如下图:

JsonServer安装及启动过程图解

初始化package.json

终端中进入所要存放文件的目录

执行初始化命令:npm init

JsonServer安装及启动过程图解

给文件包取一个名字,其他的默认 enter 就可以

jsonserver 保存到本地

执行命令:npm install json-server --save

执行后打开 package.json 文件

将 scripts 中内容进行修改:

“json:server” 将最为启动时json-server时使用

db.json将做为启动后作为服务器的数据进行使用

JsonServer安装及启动过程图解

创建db.json 文件

在与package.json 同目录下创建db.json 文件,并以 对象 的格式进行填充数据

JsonServer安装及启动过程图解

运行 json-server

终端中输入:npm run json:server

JsonServer安装及启动过程图解

如上图:home 地址:http://localhost:3000

resources 地址,即创建的db.json中数据所在位置:http://localhost:3000/product

浏览器中运行http://localhost:3000 后:

JsonServer安装及启动过程图解

浏览器中运行http://localhost:3000/product 后结果:

JsonServer安装及启动过程图解

如下图,浏览器中每访问一次,终端则会输出对应的执行

JsonServer安装及启动过程图解

postman 请求该接口

通过postman 请求该 API 发现数据确实来源于服务端

JsonServer安装及启动过程图解

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

Javascript 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
bootstrap table小案例
Oct 21 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
Vue自定义组件的四种方式示例详解
Feb 28 #Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 #Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 #Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 #Javascript
vue 中的 render 函数作用详解
Feb 28 #Javascript
微信小程序动态添加和删除组件的现实
Feb 28 #Javascript
浅析Vue 中的 render 函数
Feb 28 #Javascript
You might like
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Python AES加密模块用法分析
2017/05/22 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python中time库的实例使用方法
2019/10/31 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
python自动生成sql语句的脚本
2021/02/24 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
先进班级集体事迹材料
2014/01/30 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript