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 相关文章推荐
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
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 生成N个不重复的随机数
2015/01/21 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
vue实现购物车案例
2020/05/30 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
Python是什么 Python的用处
2020/05/26 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
numba提升python运行速度的实例方法
2021/01/25 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
C语言编程题
2015/03/09 面试题
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
医药专业应届毕业生求职信范文
2014/01/01 职场文书
办公室经理岗位职责
2014/01/01 职场文书
小学生环保倡议书
2014/05/15 职场文书
春节联欢会策划方案
2014/05/16 职场文书
2015年暑期见闻
2015/07/14 职场文书
升学宴学生致辞
2015/07/27 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis