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 乱码问题
Aug 06 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
简单了解JavaScript异步
May 23 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
js实现九宫格布局效果
May 28 Javascript
js实现网页随机验证码
Oct 19 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
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的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
asp批量修改记录的代码
2008/06/25 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
使用javascript插入样式
2016/03/14 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
如何在vue 中引入使用jquery
2020/11/10 jQuery
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python 实现归并排序算法
2012/06/05 Python
python使用marshal模块序列化实例
2014/09/25 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
python中time、datetime模块的使用
2020/12/14 Python
python实现经典排序算法的示例代码
2021/02/07 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
产品促销活动策划书
2014/01/15 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
教师读书活动总结
2014/05/07 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书