Vue:使用webpack搭建MOCK服务器

前言

数据驱动是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数据 就是这样:)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

如何安装Node.js.

Node.js是服务器端JavaScript应用程序的跨平台运行环境。Node.js使用的是谷歌研发的JavaScript引擎V8,它也可以在Chromium和...

1664
来自专栏地方网络工作室的专栏

将移动硬盘上的archlinux复制到笔记本电脑硬盘并引导

将移动硬盘上的archlinux复制到笔记本电脑硬盘并引导 每次安装archlinux我都非常痛苦,在同事的协助下才能完成。为了避免这个问题,我在我的移动硬盘上...

2138
来自专栏腾讯云服务器团队的专栏

如何利用SCF实现定时开关机的功能

随着腾讯云的企业用户越来越多,而企业的场景也是多样化的,一方面作为云服务商需要不断地完善产品能力以满足更多业务需求,另一方面作为云用户其实也是可以利用已有的一些...

5.6K15
来自专栏张首富-小白的成长历程

强制编辑文件,文件属主和属组自动改变

为什么对文件的权限是r--权限 对文件所在目录的权限是rwx权限 我们也能强制保存文件,但是保存之后的文件属主和属主就变了? 猜想:因为我们文件所在目录有rwx...

1623
来自专栏潇涧技术专栏

React Native Upgrade

文中的代码和图片我都反复检查过了,基本上没有泄露公司的重要信息的数据,如若发现有泄露的话请立即告知我 ;-)

1202
来自专栏王大锤

github for Mac 教程

3716
来自专栏Java学习123

Linux自动压缩备份目录文件与恢复

首先建立以个空白文档,然后打开编辑成需要的内容,最后保存为*.sh文件 比如我现在Linux 系统 /usr下有个目录soft需要让它每天自动压缩打包到/opt...

4115
来自专栏知晓程序

如何让公众号粉丝使用小程序? | 小程序问答 #41

也许你已经知道,微信提供了「小程序关联公众号」的功能,而且小程序还能关联 50 个公众号。

1662
来自专栏小樱的经验随笔

Kali Linux 下安装中文版输入法

1.更新软件源: 修改sources.list文件: vim /etc/apt/sources.list 或者 leafpad /etc/apt/sources...

3755
来自专栏散尽浮华

Linux下快速迁移海量文件的操作记录

有这么一种迁移海量文件的运维场景:由于现有网站服务器配置不够,需要做网站迁移(就是迁移到另一台高配置服务器上跑着),站点目录下有海量的小文件,大概100G左右,...

3047

扫码关注云+社区

领取腾讯云代金券