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操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
JS字符串截取函数实例
Dec 27 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
回顾Javascript React基础
Jun 15 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新建文件自动编号的思路与实现
2011/06/27 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP实现的json类实例
2015/07/28 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
英文版餐饮运营管理求职信
2013/11/06 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
服务承诺书范文
2014/05/19 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
vue使用echarts实现折线图
2022/03/21 Vue.js