本文解析了WOJILU框架中LayoutsSiteLayoutController的Layout方法工作原理，包括前后端交互流程、动态加载菜单及头部的过程，并揭示了通过JS异步请求更新用户状态的机制。
书接上回
本节来分析wojilu.Web.Controller.Layouts SiteLayoutController的Layout方法
public override void Layout() {
load("topNav", new TopNavController().Index);
对照framework\views\Layouts\SiteLayout\Layout.html里的前端视图代码看一下
以下代码片段
<body>
#{topNav}
<div id="pageWrap">
<div id="pageWrapInner">
#{header}
<div id="pageMainWrap">
load("topNav", new TopNavController().Index);
是对上面的topNav变量赋值，赋什么值呢，看一下load的定义
protected void load( String sectionName, aAction action ) {
set( sectionName, loadHtml( action ) );
}
可以看出是将framework\views\Layouts\TopNav\Index.html的内容填充后，替换#{topNav}
同理 load("header", new TopNavController().Header);
是将framework\views\Layouts\TopNav\Header.html的内容填充后，替换#{header}
接下来我们看一下TopNavController().Index和framework\views\Layouts\TopNav\Index.html有没有什么可以挖掘的东西。
我们看到TopNavController().Index最后有一句 set( "navUrl", t2( Nav ) );
对framework\views\Layouts\TopNav\Index.html最后的变量#{navUrl}进行了赋值，参见以下：
<script type="text/javascript">var ctx = null;var navUrl = '#{navUrl}';</script>
<script type="text/javascript" src="~js/wojilu.site.topnav.js?v=#{jsVersion}"></script>
欲知此处的奥秘，我们就要看下wojilu.web\static\js\wojilu.site.topnav.js的实现了
$(document).ready( function() {
navUrl = (navUrl + '?url='+window.location.href).toAjax();
......
$.post( navUrl, function(data) {
ctx = data;
......
}
这里通过ajax的post方法，再次请求了服务器TopNavController()的Nav action
public void Nav() {
// TODO 如果是在访问用户空间，则判断：是否好友、是否关注
echoJson( getLoginJsonString() );
}
Nav()方法返回一段json给客户端。动态设置用户的一些状态和权限。
load("header", new TopNavController().Header);
主要是加载site的菜单和子菜单。有空再进行深入探讨。
综上所述，整个流程，有两次服务器访问，一次是页面加载，一次是js请求topnav的json数据。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
