欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

JsonServer安装及启动过程图解

时间:2021-07-24 09:35:11|栏目:JavaScript代码|点击:

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实现图片粘贴到网页

栏    目:JavaScript代码

下一篇:Webpack4+Babel7+ES6兼容IE8的实现

本文标题:JsonServer安装及启动过程图解

本文地址:http://www.codeinn.net/misctech/160921.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有