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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
使用javascript访问XML数据的实例
Dec 27 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
php 输出双引号"与单引号'的方法
2010/05/09 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
什么是GWT的Module
2013/01/20 面试题
开门红主持词
2014/04/02 职场文书
建议书的格式
2014/05/12 职场文书
北京申奥口号
2014/06/19 职场文书
财务会计实训报告
2014/11/05 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
优秀班组申报材料
2014/12/25 职场文书
指导老师鉴定意见
2015/06/05 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python