本篇介绍引入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成功引入工程