这个HTML文件就是服务器的同步响应内容，也是我们每一个页面的入口。这时我们需要把一个网页理解成一个应用（APP），而这个layout.html只定义APP启动入口和框架。可以看到该文件引用了基本的css和js，其最后的core.js内部完成了这个APP的初始化。下面我们来看看这个core.js内部的主要部分代码。
（3）core.js。完成APP初始化的代码如下：
上面的示例代码是笔者为了本文精简过的，实际上这个JS文件在完成APP初始化的过程中还做了很多的操作，比如获取用户登录信息、获取页面动态导航菜单数据等，然后将获取的数据通过一个layoutVue实例呈现到页面上，从而layoutVue实例完全接管layout.html中全部的HTML呈现工作。
在APP初始化的最后一步，就是根据URL #后面的路径加载内容页HTML到一个id为body的DIV中了。服务器如何异步响应URL（/pe/page?path=home/index），请参考本章第一小节中的异步请求java源码（pePage方法）。
（4）内容页HTML。请看ajax加载的内容页的HTML：
从上方代码可以看出，每个内容页对应一个js和一个css文件，然后html代码以一个id为page的DIV开始。当然，这些都不是必须的，只是我们的项目规范，当然，笔者也建议大家可以参考我们的规范。
当内容页HTML加载完成后，就会执行其引用的js文件了。接下来就让我们来看看内容页的JS代码。
（5）内容页JS代码。请看下图：
这个JS文件首先是由一个自执行函数包裹，好处是避免不经意将对象定义到window下面（编码开发人员写出错误的代码），这也是我们的规范之一，实际上我们项目的所有JS文件都由自执行函数包裹。
上方代码的主入口是Vue.nextTick方法的回调function。Vue.nextTick是一个非常重要的方法，但是官网上并没有给他一个特别明显的位置，因此笔者要在此多说两句，这个方法有什么用。这得要回到Vue的render机制了。当Vue实例发现绑定的数据改变之后，Vue采用了异步更新UI元素的方式，因此，当我们修改了数据的时候，这时DOM元素还没有生成出来，如果这时去操作DOM（比如通过jQuery），那么就会报找不到该DOM元素，所以一定要在改变Vue数据后使用Vue.nextTick去操作其影响的DOM元素。
再回到上方代码。在Vue.nextTick回调中，首先是初始化内容页的Vue实例，从而接管id为page的div及其下的所有DOM元素的呈现工作。
至此，一个完整的页面就算加载完成了，用户在浏览器中就能看到这个完整的页面了。
这就是我们前后端分离框架的整个工作流程，希望笔者已经把这个流程解释的足够清晰，然后你可以开始动手搭建自己的前后端分离框架了。但是在你真正开始之前，笔者还想跟大家分享一个我们前后端分离的最佳实践：mock，请看下一章。
第五章 前后端分离框架中的API mock思路
想要实现真正的前后端分离，那就必须得用好API mock（模拟数据）。使用mock数据的好处有两个：
（1）前端开发人员可以基于API文档生成mock数据，在后端开发人员将API发布出来之前就可以完成整个业务流程的开发；
（2）使用mock数据能够更低成本、更快速地，通过直接修改mock数据的方式，调试页面样式、调试页面功能。
在本文中，笔者不会给大家推荐任何mock框架，因为我们根本用不着：我们要用纯手工造数据的方式造出更真实的mock数据。