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拖拽并简单保存的实现代码
Nov 28 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
JavaScript中对象介绍
Dec 31 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 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表单转换textarea换行符的方法
2010/09/10 PHP
ini_set的用法介绍
2014/01/07 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
微信自定义分享php代码分析
2016/11/24 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
原生js调用json方法总结
2018/02/22 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
python中的计时器timeit的使用方法
2017/10/20 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
python基于SMTP协议发送邮件
2019/05/31 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python3常见函数range()用法详解
2019/12/30 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
《美丽的田园》教学反思
2014/03/01 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
品质保证书格式
2015/02/28 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang