基于Webpack&Vue和Nodejs搭建前后端分离的web系统开发框架

前后端分离的例子就是SPA(Single-page application)，所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的，前端只管展现。 
从某种意义上来说，SPA确实做到了前后端分离，但这种方式存在两个问题：

• WEB服务中，SPA类占的比例很少。很多场景下还有同步/同步+异步混合的模式，SPA不能作为一种通用的解决方案。
• 现阶段的SPA开发模式，接口通常是按照展现逻辑来提供的，有时候为了提高效率，后端会帮我们处理一些展现逻辑，这就意味着后端还是涉足了View层的工作，不是真正的前后端分离。

SPA式的前后端分离，是从物理层做区分（认为只要是客户端的就是前端，服务器端的就是后端），这种分法已经无法满足我们前后端分离的需求，我们认为从职责上划分才能满足目前我们的使用场景：

• 前端：负责View和Controller层。
• 后端：只负责Model层，业务处理/数据等。

 

前期准备

需要准备相关的环境，比如git、nodejs等，环境准备好之后全局安装express-generator、vue-cli、webpack、webpack-cli等。

① 通过应用生成器工具 express-generator 可以快速创建一个应用的骨架。

express-generator 包含了 express 命令行工具。通过如下命令即可安装：

$ npm install express-generator -g

② 全局安装 vue-cli ，在命令提示窗口执行：

$ npm install -g vue-cli 

③ webpack、webpack-cli等安装与上面类似，不再赘述。

目录框架

① 新建项目文件夹web-test，在项目下再新建两个文件夹，分别是client和server

② 控制台终端，进入server目录，执行如下命令：

$ express --ejs [server目录] //使用ejs模板，不指定目录则为当前目录

 完成以后在server目录会自动生成对应的目录结构：

server目录结构

③ 控制台终端，进入client目录，执行如下命令：

$ vue init webpack [client目录] //使不指定目录则为当前目录

//如果没有特殊需求的话就一直回车，然后等待安装成功（时间有点慢，可以选择cnpm，自行了解~~~）

 完成以后在client目录会自动生成对应的目录结构：

client目录结构

启动server/client

① 在server目录下，通过执行如下命令启动服务器：

$ npm start

在控制台就可以看到服务器已启动。

在浏览器输入localhost:3000，则能看到express框架的初始化界面。

 

② 在client目录下，通过执行如下命令启动服务器：

$ npm run dev

在控制台就可以看到客户端已启动。

在浏览器输入localhost:8080，则能看到vue的初始化界面。