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 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
jQuery get和post 方法传值注意事项
Nov 03 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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脚本的10个技巧(1)
2006/10/09 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
js定时器实例分享
2016/12/20 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
上海某公司.net方向笔试题
2014/09/14 面试题
运动会通讯稿300字
2014/02/02 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
小学班级特色活动方案
2014/08/31 职场文书
同事离别感言
2015/08/04 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
学习党章心得体会2016
2016/01/15 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
js不常见操作运算符总结
2021/11/20 Javascript