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遍历input取得input的name
Apr 27 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
Node.js事件驱动
Jun 18 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
postman+json+springmvc测试批量添加实例
Mar 31 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设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
CI框架中数据库操作函数$this->db->where()相关用法总结
2016/05/17 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
判断网页编码的方法python版
2016/08/12 Python
利用Python破解验证码实例详解
2016/12/08 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
学生安全责任书模板
2014/07/25 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP