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数据

就是这样：）