JsonServer安装及启动过程图解

所属分类: 网络编程 / JavaScript 阅读数: 1855
收藏 0 赞 0 分享

JsonServer

  主要的作用就是搭建本地的数据接口,创建json文件,便于调试调用

  是一个 Node 模块,运行 Express 服务器,可以指定一个 json 文件作为 api 的数据源

  官网:https://www.npmjs.com/package/json-server

安装全局的json-server

  终端中输入:npminstall-gjson-server(windows系统)

  mac系统:则为 sudonpminstall-gjson-server 如下图:

  

初始化package.json

  终端中进入所要存放文件的目录

  执行初始化命令:npm init

  

  给文件包取一个名字,其他的默认 enter 就可以

jsonserver 保存到本地

  执行命令:npm install json-server --save

  执行后打开 package.json 文件

  将 scripts 中内容进行修改:

    “json:server” 将最为启动时json-server时使用

    db.json将做为启动后作为服务器的数据进行使用

  

创建db.json 文件

  在与package.json 同目录下创建db.json 文件,并以 对象 的格式进行填充数据

运行 json-server

  终端中输入:npm run json:server

  

  如上图:home 地址:http://localhost:3000

  resources 地址,即创建的db.json中数据所在位置:http://localhost:3000/product

  浏览器中运行http://localhost:3000 后:

  

  浏览器中运行http://localhost:3000/product 后结果:

  

  如下图,浏览器中每访问一次,终端则会输出对应的执行

  

postman 请求该接口

  通过postman 请求该 API 发现数据确实来源于服务端

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

js实现图片上传预览原理分析

这篇文章主要为大家详细介绍了js实现图片上传预览的原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Angular限制input框输入金额(是小数的话只保留两位小数点)

最近做项目遇到这样的需求输入框要求输入金额,只能输入数字,可以是小数,必须保留小数点后两位。下面分为两部分代码给大家介绍实现代码,需要的的朋友参考下吧
收藏 0 赞 0 分享

详解vue-cli + webpack 多页面实例配置优化方法

本篇文章主要介绍了详解vue-cli + webpack 多页面实例配置优化方法,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)

本篇文章主要介绍了React-Native解决键盘遮挡问题(Keyboard遮挡问题),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript反弹动画效果的实现代码

本文通过实例代码给大家介绍了js反弹动画效果的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享

解决vue2.x中数据渲染以及vuex缓存的问题

本篇文章主要介绍了vue2.x中请求之前数据显示以及vuex缓存的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jsonp跨域请求详解

这篇文章主要为大家详细介绍了jsonp跨域请求的相关资料,激活了所有接口支持浏览器跨域请求的封装,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

解决vue里碰到 $refs 的问题的方法

本篇文章主要介绍了解决vue里碰到 $refs 的问题的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js自定义弹框插件的封装

这篇文章主要为大家详细介绍了js自定义弹框插件的简单封装,自己封装一个弹框插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入理解vue $refs的基本用法

本篇文章主要介绍了深入理解vue $refs的基本用法 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多