SpringMVC+freemarker实现菜单导航的思想一
2018-01-01 21:26
561 查看
1、登录系统后进入的首页index.ftl
<!DOCTYPE html>
<html lang="en">
<head>
<#include "common/html_header.ftl" />
<#-- WIDGETS static files -->
</head>
<body>
<div id="loading"><img src="/static/images/spinner/loader-dark.gif" alt="Loading..."></div>
<div id="sb-site">
<#include "common/mainsite.ftl" /><#--这个是主要的菜单导航和内容显示的文件-->
</div>
</body>
<#--data init-->
<#include "global/widgets_static.ftl" />
<#include "common/init.ftl" />
</html>
2、mainsite.ftl配置
<div id="page-wrapper">
<!-- #page-header -->
<div id="page-header" class="clearfix"><#include "page-header.ftl"></div>
<div id="page-sidebar" class="rm-transition">
<#include "page-slidebar.ftl"><!-- 左侧菜单导航栏 -->
</div>
<div id="page-content-wrapper" class="rm-transition">
<!--<div id="page-nav"><#include "navigation.ftl" /></div><!-- #page-nav -->
<div id="page-content">
<#include "../global/component_regist.ftl" /><#--根据左侧菜单导航栏的请求的URL,引入对应的逻辑页面 -->
<#include "../global/js.ftl" /><#--引入逻辑页面对应的js-->
</div>
</div><!-- #page-content-wrapper -->
</div><!-- #page-wrapper -->
3、导航栏page-slidebar.ftl
<#assign security=JspTaglibs["http://www.springframework.org/security/tags"] />
<@security.authorize ifAnyGranted="ROLE_ADMIN,ROLE_ORDINARY" >
<div id="sidebar-menu">
<ul>
<li>
<a href="/ps_service/hellotest.do" title="Dashboard">
<i class="glyph-icon icon-linecons-tv"></i>
<span>Hello Test</span>
</a>
</li>
</ul>
</div>
</@security.authorize>
4、单用户点击菜单导航栏中的Hello Test按钮时，向后台发出URL请求/ps_service/hellotest.do
后台cotroller接收请求
4000
、
@RequestMapping("/hellotest.do")
public String hellotest(ModelMap modelMap, HttpServletRequest request) {
modelMap.put("component", "hellotest");
return "/admin/index.ftl";
}
在视图解析器中装入hellotest，即modelMap.put("component", "hellotest");
5、逻辑页面component_regist.ftl配置如下：
<@.vars["${component}"] />
<#macro hellotest>
<#include "../component/hello.ftl" />
</#macro>
根据后台返回的component在index.ftl中引入hello.ftl页面，实现菜单请求到内容展示的全过程
同时引入hello.ftl中对应处理页面的js
6、js.ftl
<!--Ztree的包,这是必须要加载的js，后面是根据请求加载的js-->
<link rel="stylesheet" href="/static/widgets/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/static/widgets/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/static/widgets/ztree/js/jquery.ztree.excheck.js"></script>
<!--根据请求加载的js-->
<@.vars["${component}"] />
<#macro hellotest>
<script src="/static/custom/js/admin/authorization/hellotest.js"></script>
</#macro>
<!DOCTYPE html>
<html lang="en">
<head>
<#include "common/html_header.ftl" />
<#-- WIDGETS static files -->
</head>
<body>
<div id="loading"><img src="/static/images/spinner/loader-dark.gif" alt="Loading..."></div>
<div id="sb-site">
<#include "common/mainsite.ftl" /><#--这个是主要的菜单导航和内容显示的文件-->
</div>
</body>
<#--data init-->
<#include "global/widgets_static.ftl" />
<#include "common/init.ftl" />
</html>
2、mainsite.ftl配置
<div id="page-wrapper">
<!-- #page-header -->
<div id="page-header" class="clearfix"><#include "page-header.ftl"></div>
<div id="page-sidebar" class="rm-transition">
<#include "page-slidebar.ftl"><!-- 左侧菜单导航栏 -->
</div>
<div id="page-content-wrapper" class="rm-transition">
<!--<div id="page-nav"><#include "navigation.ftl" /></div><!-- #page-nav -->
<div id="page-content">
<#include "../global/component_regist.ftl" /><#--根据左侧菜单导航栏的请求的URL,引入对应的逻辑页面 -->
<#include "../global/js.ftl" /><#--引入逻辑页面对应的js-->
</div>
</div><!-- #page-content-wrapper -->
</div><!-- #page-wrapper -->
3、导航栏page-slidebar.ftl
<#assign security=JspTaglibs["http://www.springframework.org/security/tags"] />
<@security.authorize ifAnyGranted="ROLE_ADMIN,ROLE_ORDINARY" >
<div id="sidebar-menu">
<ul>
<li>
<a href="/ps_service/hellotest.do" title="Dashboard">
<i class="glyph-icon icon-linecons-tv"></i>
<span>Hello Test</span>
</a>
</li>
</ul>
</div>
</@security.authorize>
4、单用户点击菜单导航栏中的Hello Test按钮时，向后台发出URL请求/ps_service/hellotest.do
后台cotroller接收请求
4000
、
@RequestMapping("/hellotest.do")
public String hellotest(ModelMap modelMap, HttpServletRequest request) {
modelMap.put("component", "hellotest");
return "/admin/index.ftl";
}
在视图解析器中装入hellotest，即modelMap.put("component", "hellotest");
5、逻辑页面component_regist.ftl配置如下：
<@.vars["${component}"] />
<#macro hellotest>
<#include "../component/hello.ftl" />
</#macro>
根据后台返回的component在index.ftl中引入hello.ftl页面，实现菜单请求到内容展示的全过程
同时引入hello.ftl中对应处理页面的js
6、js.ftl
<!--Ztree的包,这是必须要加载的js，后面是根据请求加载的js-->
<link rel="stylesheet" href="/static/widgets/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/static/widgets/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/static/widgets/ztree/js/jquery.ztree.excheck.js"></script>
<!--根据请求加载的js-->
<@.vars["${component}"] />
<#macro hellotest>
<script src="/static/custom/js/admin/authorization/hellotest.js"></script>
</#macro>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 怎么实现登录之后跳转到登录之前的页面？SpringMVC+Freemarker
- spring MVC +freemarker + easyui 实现sql查询和执行小工具总结
- 怎么实现登录之后跳转到登录之前的页面？SpringMVC+Freemarker
- freemarker+springMVC+ajaxfileupload实现异步图片上传（多张）
- MVC导航菜单高亮显示实现思路
- 怎么实现登录之后跳转到登录之前的页面？SpringMVC+Freemarker
- Spring MVC+FreeMarker实现页面按钮权限控制1
- 怎么实现登录之后跳转到登录之前的页面？SpringMVC+Freemarker
- Spring MVC + freemarker实现半自动静态化
- freemarker+springMVC+ajaxfileupload实现异步图片上传（单张）
- easyUI+SpringMVC JPA 实现树形菜单
- Spring MVC+Freemarker+Javascript的多语言（国际化i18n/本地化）和主题（Theme）实现
- springMVC freemarker实现页面静态化
- Spring MVC + freemarker实现半自动静态化
- springmvc + freemarker 实现hello-world
- 在ASP.NET MVC下实现树形导航菜单
- SpringMVC+ZTree实现树形菜单权限配置
- Spring MVC + freemarker实现半自动静态化
- SpringMVC+Freemarker+jQuery实现多语言（国际化）切换
- Spring MVC+Freemarker+Javascript的多语言（国际化i18n/本地化）和主题（Theme）实现