资讯专栏INFORMATION COLUMN

前端模拟后台数据--JSON Server,POST,PUT,DELETE,GET

hiyayiji / 1434人阅读

摘要:在实现虚拟数据的功能里面已经非常出色了,具体的功能可以去主页查询,不再赘述。,在使用方法时,需要像数据库那样得到返回,而不是更改。这时候需要额外添加一个中间件在文件夹里,比如写法如下然后在里面启动中间件就可以了项目结构如图

JSON-Server 在实现虚拟数据的功能里面已经非常出色了,具体的功能可以去JSON-Server github主页查询,不再赘述。

除了需要在根目录下建mock文件夹,并且文件夹建db.json文件外,
这里主要讲两个配置需要注意的问题:
1,同时启动端口监视与应用,需在package.json 里面做的更改:

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "mock": "json-server --watch mock/db.json --m mock/post-to-get.js",
    "mockdev": "npm run mock | npm run dev"
  }

这样,在启动webpack时写npm run mockdev就可以同时启动了。

2,在使用post方法时,需要像数据库那样得到返回,而不是更改。这时候需要额外添加一个中间件在mock文件夹里,比如post-to-get.js,写法如下:

module.exports = function (req, res, next) {
  req.method = "GET";
  next();
}

然后在package.json里面启动中间件就可以了:"mock": "json-server --watch mock/db.json --m mock/post-to-get.js"

项目结构如图:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95348.html

相关文章

  • 理解RESTful架构与json-server模拟REST api的使用

    摘要:一什么是架构即的缩写,我们把他翻译为表述性状态传递,是博士在年他的博士论文中提出来的一种软件架构风格。是个无状态的协议,所以状态就保存在服务器端。只要少量的数据就可使用,支持和。同时支持,同时提供一系列的查询方法如。 一、什么是RESTful架构? REST即Representational State Transfer的缩写,我们把他翻译为表述性状态传递,是Roy Fielding博...

    Atom 评论0 收藏0
  • 介绍两大神器!——使用json-server和faker.js模拟REST API

    摘要:今天发现了一个神器在他的帮助下可以在很短的时间内搭建一个然后就可以让前端在不依赖后端的情况下进行开发啦关于什么是设计指南阮一峰简单来说,是一个模块,运行服务器,你可以指定一个文件作为的数据源。更多属性可以查看这里好啦,基本就是这样啦, 今天发现了一个神器——json-server!在他的帮助下可以在很短的时间内搭建一个Rest API, 然后就可以让前端在不依赖后端的情况下进行开发啦!...

    sarva 评论0 收藏0
  • JSON-server模拟REST API(一) 安装运行

    摘要:曹县宣布昨日晚间登日成功长江流域首次发现海豚支持党中央决定抄写党章势在必行为了方便,再创建一个文件,写入然后使用到目录下执行命令,如果成功会出现你的电脑中文件夹所在目录的路径如果不成功请检查文件的格式是否正确。 在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的。所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的。 对比过多种mock工具后,我最终...

    Sleepy 评论0 收藏0
  • 30秒无需编码完成一个REST API服务

    摘要:秒内无需编码快速完成一个模拟的服务。这个服务主要是给那些需要快速的模拟原型后端接口的前端人员使用的安装新建一个文件启动服务到这一步秒不到吧,一个完整的就基本完成了。 JSON Server 30秒内无需编码快速完成一个模拟的REST API服务。 这个服务主要是给那些需要快速的模拟原型后端接口的前端人员使用的 GitHub:https://github.com/typicode/j.....

    amuqiao 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<