前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue:使用webpack搭建MOCK服务器

Vue:使用webpack搭建MOCK服务器

作者头像
MrTreasure
发布2018-05-10 11:15:30
1.4K0
发布2018-05-10 11:15:30
举报
文章被收录于专栏:不止是前端

前言

数据驱动是Vue的核心理念之一,前后端分离也是未来WEB开发的趋势。但是往往前后端开发的进度不一样,作为前端开发的我们不能一直等后端的数据,只要规定好了数据结构,我们便可以进行数据MOCK。在获取数据的和过程中,有很多方法。把数据写入Vue中无疑是最蠢的,最后的方法便是留下一个接口,通过这个接口进行ajax获取数据,项目上线时只需要改变接口的url就好了,因此这里介绍一种使用webpack搭建mock服务器方法。你需要一定的node基础

webpack中的服务器

使用webpack进行Vue开发时,它会在本机启动一个临时服务器。借助这个服务器,我们就可以搭建mock部分。先看看webpack中的服务器设置

XXX/build/dev-server

服务器配置.png

webpack使用exprss做服务器,express不了解的同学可以参考一下其他简书文章,简而言之就是通过一个个中间件构建网络服务,不会的同学也没有关系。照着我写就OK。

制作一个路由中间件

路由中间件.png

你肯定不愿意在webpack中的配置更改,因此我们新建一个路由器中间件。这里你可以看到怎么去生成一个中间件。GET POST方法就是前端要进行的请求,逻辑不算复杂吧。

我把数据挂载到DATA后面,避免和前端的路由冲突。
我把数据挂载到DATA后面,避免和前端的路由冲突。
我把数据挂载到DATA后面,避免和前端的路由冲突。

数据部分,我直接写死了,用require进行加载。当然你完全可以用moogosse等数据库。最后记得导出

使用中间件及POST获取data主题

使用中间件.png

app.use(router)便是加载这个路由中间件。

注意,在express3以后,它精简了许多中间件作为第三方,使得它本身体积变得轻巧。因此想要获取前端通过POST提交的数据需要使用bodyParser这个中间件。

body-parser.png

安装依赖

body-parser使用.png

使用

这样你就能在POST方法后面通过req.body获取POST提交的数据

Vue中的数据获取

url.png

Vue中获取数据.png

这里的操作就很简单了,项目上线的时候只需要更改url就好了。

最后

因为express的原理,当一个中间件匹配到了请求并解决以后就不会扔给后面的中间件,因此你自定义的中间件一定要写在服务器配置之前。即生成一个app后立即加载你定义的路由中间件

或许你觉得这样写有点麻烦,团队项目中也不好处理请求逻辑,因此推荐另一个方法实用主义:前后端分离MOCK数据

就是这样:)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.04.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • webpack中的服务器
    • 制作一个路由中间件
      • 我把数据挂载到DATA后面,避免和前端的路由冲突。
      • 我把数据挂载到DATA后面,避免和前端的路由冲突。
      • 我把数据挂载到DATA后面,避免和前端的路由冲突。
    • 使用中间件及POST获取data主题
      • Vue中的数据获取
      • 最后
      相关产品与服务
      消息队列 TDMQ
      消息队列 TDMQ (Tencent Distributed Message Queue)是腾讯基于 Apache Pulsar 自研的一个云原生消息中间件系列,其中包含兼容Pulsar、RabbitMQ、RocketMQ 等协议的消息队列子产品,得益于其底层计算与存储分离的架构,TDMQ 具备良好的弹性伸缩以及故障恢复能力。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档