一、問題
項目中需要公眾號開發,移動端使用的是H5,但是如果不用前端框架的話,只能考慮JS前端用ajax解析JSON字符串了。今天我們就簡單的說下前端框架Thymeleaf如何解決這個問題的;
二、開始實戰
2.1:配置pom.xml
<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring4 --><dependency><groupId>org.thymeleaf</groupId><artifactId>thymeleaf-spring4</artifactId><version>3.0.9.RELEASE</version></dependency><!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf --><dependency><groupId>org.thymeleaf</groupId><artifactId>thymeleaf</artifactId><version>3.0.9.RELEASE</version></dependency>
2.2:配置Spring mvc的主配置文件(spring-mvc.xml)
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context-4.0.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd"><!-- 注解掃描包 --><context:component-scan base-package="com.king.weixin"/><!-- 開啟注解 --><mvc:annotation-driven/><!--配置靜態資源,直接映射到對應的文件夾,不被DispatcherServlet處理,3.04新增功能,需要重新設置spring-mvc-3.0.xsd--><mvc:resources mapping="/img/**" location="/img/" /><mvc:resources mapping="/js/**" location="/js/" /><mvc:resources mapping="/css/**" location="/css/" /><mvc:resources mapping="/html/**" location="/html/" /><mvc:resources mapping="/tinymce/**" location="/tinymce/" /><mvc:resources mapping="/upload/**" location="/upload/" /><mvc:resources mapping="/assset/**" location="/assset/" /><!-- 定義跳轉的文件的前后綴 ,視圖模式配置--><!--采用前端模板工具thymeleaf--><bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver"><property name="prefix" value="/html/" /><property name="suffix" value=".html" /><property name="templateMode" value="HTML5" /><property name="cacheable" value="false" /><property name="characterEncoding" value="UTF-8"/></bean><bean id="templateEngine"class="org.thymeleaf.spring4.SpringTemplateEngine"><property name="templateResolver" ref="templateResolver" /></bean><bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver"><property name="templateEngine" ref="templateEngine" /><property name="characterEncoding" value="UTF-8"/></bean><!--采用前端模板工具thymeleaf--><!-- redis配置 --><import resource="spring-redis.xml"/> </beans>
需要注意的是:下面的是關鍵配置
<mvc:resources mapping="/img/**" location="/img/" />
<mvc:resources mapping="/js/**" location="/js/" />
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/html/**" location="/html/" />
<mvc:resources mapping="/tinymce/**" location="/tinymce/" />
<mvc:resources mapping="/upload/**" location="/upload/" />
<mvc:resources mapping="/assset/**" location="/assset/" />
<!-- 定義跳轉的文件的前后綴 ,視圖模式配置-->
<!--采用前端模板工具thymeleaf-->
<bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
<property name="prefix" value="/html/" />
<property name="suffix" value=".html" />
<property name="templateMode" value="HTML5" />
<property name="cacheable" value="false" />
<property name="characterEncoding" value="UTF-8"/>
</bean>
2.3:Controller配置
@RequestMapping(value = "/QueryUserbyOpenId", method = RequestMethod.GET)public String QueryUserbyOpenId(String openid,HttpServletRequest res,ModelMap model){System.out.println("來了");User user=new User();user=userService.findByOpenId(openid);if(user!=null){model.addAttribute("user_name", user.getUser_name());model.addAttribute("user_sex",user.getUser_sex());model.addAttribute("user_age", user.getUser_age());model.addAttribute("user_address", user.getUser_address());model.addAttribute("user_mobile", user.getUser_mobile());}System.out.println("------------------:"+user.getUser_id());return "userInfo";
return 返回的就是html視圖的名稱,具體是html還是jsp是在spring mvc中配置,需要在方法中生命ModelMap 來存放對象
2.4:HTML取值
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta name="viewport" content="width=device-width, initial-scale=1" /><meta charset="UTF-8"><title>個人中心</title> <!-- <link rel="stylesheet" th:href="@{/css/userInfo.css}"> --> <link rel="stylesheet" href="../css/userInfo.css"> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> </head> <body> <div class="home"><div class="doctor"><div class="doctorName" th:text="${user_name}"></div><img class="doctorImg" src="../assset/icon/mydoctor_man.png"><div class="changeUserInfo" onclick="window.location.href='updateUserInfoHTML'"><img src="../assset/icon/icon_bianjiziliao@2x.png">修改個人信息</div><div class="count"><div><span class="moneyCount">20元</span><span>金額</span></div><div class="borderLeft"></div><div><span class="Upoint">0個</span><span>U點</span></div><div class="borderRight"></div><div><span class="discount">0張</span><span>優惠券</span></div></div></div><div class="msg"><div>| 基本信息</div><div class="msgDiv"><span style="color: rgba(204,204,204,1)" >性別:</span><span th:text="${user_sex}"></span></div><div class="msgDiv"><span style="color: rgba(204,204,204,1)">年齡:</span><span th:text=" ${user_age}"></span></div><div class="msgDiv"><span style="color: rgba(204,204,204,1)">地址:</span><span th:text="${user_address}"></span></div><div class="msgDiv"><span style="color: rgba(204,204,204,1)">手機:</span><span th:text="${user_mobile}"></span></div> <!-- <div class="msgDiv"> --> <!-- <span style="color: rgba(204,204,204,1)">個人簽名:</span><span th:text="${mobile}">無就是我</span> --> <!-- </div> --> <!-- <div class="msgDiv"> --> <!-- <span style="color: rgba(204,204,204,1)">手機號:</span><span th:text="${mobile}"></span> --> <!-- </div> --><!-- <div class="changePhoneNum" οnclick="window.location.href='updateUserMobileHTML'">修改手機號</div> --></div> <!-- <div class="goToDownload" οnclick="javascript:test()">馬上下載APP,體驗更多服務</div> --> </div> </body> <script type="text/javascript">function test(){window.location.href="download"} </script> </html>
導入命名空間?<html lang="en" xmlns:th="http://www.thymeleaf.org">,用th:text標簽取值