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 相关文章推荐
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
vue一步步实现alert功能
Jul 05 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
vue循环数组改变点击文字的颜色
Oct 14 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采集利器 Snoopy 试用心得
2011/07/03 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
python实现文字版扫雷
2020/04/24 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
金融行业职业生涯规划范文
2014/01/17 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
获奖感言范文
2015/07/31 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript