SpringMVC+Thymeleaf +HTML的简单框架

时间：2021-03-08 15:10:12

一、问题

项目中需要公众号开发，移动端使用的是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..RELEASE</version>

    </dependency>

    <!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->

    <dependency>

      <groupId>org.thymeleaf</groupId>

      <artifactId>thymeleaf</artifactId>

      <version>3.0..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.xsd

    http://www.springframework.org/schema/context

    http://www.springframework.org/schema/context/spring-context-4.0.xsd

    http://www.springframework.org/schema/mvc

    http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">

    <!-- 注解扫描包 -->

    <context:component-scan base-package="com.king.weixin"/>

    <!-- 开启注解 -->

    <mvc:annotation-driven/>

    <!--

    配置静态资源，直接映射到对应的文件夹，不被DispatcherServlet处理，.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" onclick="window.location.href='updateUserMobileHTML'">修改手机号</div> -->

    </div>

<!--     <div class="goToDownload" onclick="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标签取值

相关文章