本文探究如何在传统后端开发的基础上进一步实现前后端分离 （配套 项目 + Webpack多页面应用脚手架）
一、前言
目前主流开发有大前端和传统后端开发
1. 大前端开发
遵循RESTful Api，实现前后端分离。前端负责数据渲染、路由跳转和权限等，并需要SEO（搜索引擎优化）；后端提供接口。
2. 传统后端开发
采用后端模板渲染， 不需要SEO。往往需要前端人员交付静态页面后，后端人员才能完全展开工作。
二、更进一步
进一步前后端分离，主要点在于模板页面
将模板页面也划分给前端人员，后端人员只需关注服务器端开发。
（1）制定后端模板规则
要在服务器端模板渲染的情况下，进行前后端分离，主要问题在于静态页面中的模板变量。将页面完全交付于前端人员开发，那么后端人员需自定义一套容易让前端人员接受的模板变量语法，前端人员在完成静态页面后直接使用模板变量占位符、逻辑判断和循环等进行改造。
这里使用Beetl后端模板引擎，并自定义规则，使其语法类似于前端模板EJS。
（2）Webpack多页面应用脚手架
针对页面中有模板变量占位符、逻辑判断和循环等不被浏览器编译的字符串（将其作为字符串，在打包时候加入页面中），搭建Webpack多页面应用脚手架来配合前端打包生成到后端项目中。将Webpack作为后端项目的一个子项目，如下图所示。
下图是Webpack多页面应用脚手架 目录图
打包生成到后端项目中文件目录图（JavaEE 后端），如下。
（3）Mock Server
如何前端如何校验所写的模板页面呢？
模拟后端搭建一个简易的服务器，比如mock server。因为是配合后端，所以要模拟后端的运行环境，那就需实现以下几点：
1. 能渲染模板，即有对应的模板引擎；
2. 实现路由请求映射；
3. 能获取请求中的数据并进行反馈。请求得渲染页面的过程如图5.5所示。Mock server不仅能配合前端进行开发，也能用于测试时自动化测试。
请求过程如下图所示。
三、小结
以上在后端模板渲染下实现前后端分离的关键点，同时也是技术难点。虽打通一条窄窄的小路，但仍有很多未知难点和因素。一个已知的操作难点是，前端人员需学习后端模板规则。前后端对接方面，大前端前后端凭借定义json接口进行对接，然而后端模板渲染并不能仅凭json接口对接。
在搭建Webpack和梳理开发模式理念的时候，借鉴了业界很多前辈的观点和思路。在搭建Webpack借鉴了较多的开源框架，然而仍是步步坑，一步步填，最后搭建了适应本系统的多页面应用脚手架。
在此基础上又引人深思，能否结合大前端和传统后端开发的优点形成一种混合形式呢？在需要SEO的情况下使用后端模板渲染，而异步加载的情况下课选择前端模板渲染，那么就能凭此再近一步进行职责划分，并针对业务需求进行模板择优选择，从而实现在降低技术难点和减少消耗时间同时提升性能。本文提及的 Webpack多页面应用脚手架 和 小项目 ， Have Fun (#^.^#)~
PS：关于Vue或者其他前端框架的SSR（服务器端渲染）
貌似大部分只为首屏渲染。
参考资料：
https://www.zhihu.com/question/35436669
https://segmentfault.com/a/1190000008203380
http://jasinyip.com/WebFE/mock_server_1.html
https://ssr.vuejs.org/zh/
https://cn.vuejs.org/v2/guide/ssr.html