本篇介绍引入spring mvc框架中引入handlebars.js插件最基本步骤
1、下载handlebars.js插件，并添加到项目中
2、下载handlebars依赖的jar包，添加到工程
红框中的是handlebars核心包，其他是handlebars依赖的工具包
3、在spring mvc配置文件springMvc-servlet.xml中添加handlebars视图解析器配置
1 <!-- VIEW RESOLVER --> 2 <bean id="handlebarsViewResolver" class="com.github.jknack.handlebars.springmvc.HandlebarsViewResolver"> 3 <!-- <constructor-arg value="com.ruijie.crazy.handlebars.CustomHandlebarsView" />--> 4 <property name="order" value="1" /> 5 <property name="prefix" value="/page/" /> 6 <property name="suffix" value=".html" /> 7 <property name="contentType" value="text/html;charset=utf-8" /> 8 <property name="failOnMissingFile" value="false" /> 9 <property name="cache" value="false" /> 10 </bean>
4、测试
controller中实现如下：
1 package com.ruijie.crazy.controller;
2
3 import java.util.HashMap;
4 import java.util.Map;
5
6 import org.springframework.stereotype.Controller;
7 import org.springframework.web.bind.annotation.RequestMapping;
8 import org.springframework.web.bind.annotation.RequestMethod;
9 import org.springframework.web.bind.annotation.ResponseBody;
10 import org.springframework.web.servlet.ModelAndView;
11
12 @Controller
13 @RequestMapping("/myweb")
14 public class MyFirstController {
15
16 @RequestMapping(value = "/test", method = RequestMethod.GET)
17 public ModelAndView getUserInfoByCode() {
18 Map<String, Object> map = new HashMap<String, Object>();
19 map.put("userName", "ypf");
20 return new ModelAndView("hello",map);
21 }
22
23 }
前端hello.html实现如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
7 <title>hello ypf</title>
8 <script type="text/javascript" src="../js/libs/jquery/jquery.min.js"></script>
9 <script type="text/javascript" src="../js/libs/handlebars/handlebars-1.0.0.beta.6.js"></script>
10 </head>
11 <body>
12 <div>
13 {{userName}}
14 </div>
15 </body>
16 </html>
运行工程，在浏览器输入http://127.0.0.1/crazypf/myweb/test.html，显示结果如下：
至此handlebars成功引入工程
时间： 2024-10-25 07:13:28