3-4 整合 ace 模板

最新推荐文章于 2021-06-25 16:06:17 发布

kiloyip

最新推荐文章于 2021-06-25 16:06:17 发布

阅读量1k

点赞数

分类专栏： pemission

本文链接：https://blog.csdn.net/kiloyip/article/details/79967986

版权

本文介绍了如何整合 Ace 模板与 Freemarker 模板引擎。首先，创建了 Freemarker（ftl）文件，并在 controller 中返回对应视图。接着，将 Ace 模板所需的 assets、bootstrap、css 和 js 文件夹添加到 static 目录。为了复用代码，创建了一个 `backend_common.ftl` 文件，包含页面共用的 js 和 css。所有 ftl 文件引入该 common 文件，最后展示了部门管理（dept.ftl）的部分代码以及 Mustache 模板的使用步骤，包括模板解析、渲染和挂载到 DOM 节点。

摘要由CSDN通过智能技术生成

添加 freemarker 模板引擎，在 templates 文件夹下创建 ftl 文件

controller 添加 return new ModelAndView("dept/dept")

@Controller
@RequestMapping("/sys/dept")
@Slf4j
public class SysDeptController {

	@RequestMapping("/page")
	public ModelAndView page() {
		return new ModelAndView("dept/dept");
	}	
}

整合 ace 模板，在 static 文件夹下添加 assets、bootstrap、css、js 文件夹

页面需要用到的 js、css 抽象为一个 backend_common.ftl 文件放在 templates 文件夹下

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta charset="utf-8"/>
<title>管理员控制台</title>
<meta name="description" content="overview & stats"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"/>

<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="/assets/css/google-fonts.css"/>

<!-- ace styles -->
<link rel="stylesheet" href="/assets/css/ace.min.css"/>

<!--[if lte IE 9]>
<link rel="stylesheet" href="/assets/css/ace-part2.min.css"/>
<![endif]-->

<link rel="stylesheet" href="/assets/css/ace-skins.min.css"/>
<link rel="stylesheet" href="/assets/css/ace-rtl.min.css"/>
<link rel="stylesheet" href="/assets/css/jquery.gritter.css" />
<link rel="stylesheet" href="/assets/css/jquery-ui.min.css" />
<link rel="stylesheet" href="/assets/css/chosen.css" />

<!--[if lte IE 9]>
<link rel="stylesheet" href="/assets/css/ace-ie.min.css"/>
<![endif]-->

<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="/assets/js/ace-extra.min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->

<script src="/js/jquery-1.9.1.min.js"></script>
<script src="/assets/js/jquery-ui.min.js"></script>
<script src="/assets/js/jquery.gritter.min.js"></script>
<script src="/assets/js/chosen.jquery.min.js"></script>
<script src="http://cdn.bootcss.com/mustache.js/2.2.1/mustache.js"></script>
<script src="/bootstrap3.3.5/js/bootstrap.min.js"></script>

<script t