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 相关文章推荐
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
Vuex的实战使用详解
Oct 31 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 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 翻页 实例代码
2009/08/07 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
javascript实现智能手环时间显示
2020/09/18 Javascript
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python读取并写入mat文件的方法
2019/07/12 Python
python中的global关键字的使用方法
2019/08/20 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
质检部岗位职责
2013/11/11 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
中学教师教育感言
2014/02/21 职场文书
项目工作说明书
2014/07/29 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
教育实习指导教师评语
2014/12/31 职场文书
营业员岗位职责范本
2015/04/14 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python