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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
node.js连接mysql与基本用法示例
Jan 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
How do I change MySQL timezone?
2008/03/26 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
javascript学习之json入门
2016/12/22 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Python unittest模块用法实例分析
2018/05/25 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Django logging配置及使用详解
2019/07/23 Python
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
酒店公关部经理岗位职责
2013/11/24 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
演讲稿之开卷有益
2019/08/07 职场文书