前后端分离版本过渡微服务版本 前后端分离转微服务

前后端分离

通过我们本系列第二个文章"学习微服务系列（二）：基于springboot构建服务"我们可以搭建了一个基于springboot的服务，同时也可以实现类似我们以前的单体服务一样整合一个页面模板到服务中。现在主流的应用并不是在一个服务中整合页面模板，而是做成前后端分离的机构，采用http协议进行前后端数据交互，我们做的B-S类的产品大概进行了3个阶段最终到我们现在的前后端分离：

第一阶段是所有的请求都被发送给作为控制器的Servlet，并根据请求信息将它们分发给适当的JSP来响应，Servlet还根据JSP的需求生成model的实例并输出给JSP环境。JSP可以通过jstl表达式来解析由服务端返回的数据内容。通常我们View层采用 Velocity、Freemaker 等模板引擎。使用模板引擎可以在后端开发的同时前端编写html模板，最后按对应模板引擎的语法结构嵌套进去。

第二阶段的HTML部分经常我们会配合CDN进行加速，浏览器进行请求资源时主要流程是：

1. 请求页面加载静态资源，加载CSS，JS，图片。
2. 发起一个Ajax请求再到服务端请求数据，同时展示loading。
3. 得到服务端返回的数据后再根据逻辑选择模板渲染出DOM字符串，有时候可能还要动态渲染html标签。
4. 将DOM字符串插入页面中web view渲染出DOM结构。

这也过程都是串行的，都是由用户的浏览器一步一步去执行的，那就出现了这个快慢与用户的设备硬件网络都有关系了。可能用户的设备不行那就出现网页打开十分缓慢的情况。
大家看这个第二阶段这种方式相比第一阶段优点是很明显的。前端不会嵌入任何后台代码，前端专注于HTML、CSS、JS的开发，不依赖于后端。自己还能够模拟Json数据来渲染页面。发现Bug，也能迅速定位出是谁的问题。但是这个也会有很多问题：

• 如果服务端要返回数据量比较多就会出现页面卡顿。
• 资源消耗严重，一个页面要反复请求对应的一份资源。
• 页面的seo会很不方便。
  
  第三阶段SPA(Single-page application)单页面应用，所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的，前端只管展现。相当于自己干自己的事情，最后通过异步接口同步数据就好了。相继的出现了许多的前端框架比如vue.js，react.js，等等。但是其根本是一样的基于node.js的，有了node之后在前后端彻底分离这一时期，前端的范围被扩展，controller层也被认为属于前端的一部分。在这一时期：
• 前端：负责View和Controller层。
• 后端：只负责Model层，业务/数据处理等。

RESTFUL风格接口

服务端工程还是我们前一个文章中的工程，只需要把controller做一下相应的修改如下：

@RestController
public class IndexController {
    /**
     * Go Index
     *
     * @return
     */
    @RequestMapping(value = {"", "/"}, method = RequestMethod.GET)
    public String index() {
        Map<String ,String> result = new HashMap<>();
        result.put("aa", "123");
        result.put("bb", "456");

        String s = JSONObject.toJSONString(result);
        return s;
    }
}

这样我们前端页面就可以获取到服务端返回的json结构的数据了。