一、问题

项目中需要公众号开发,移动端使用的是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标签取值

SpringMVC+Thymeleaf +HTML的简单框架的更多相关文章

  1. SpringMVC+Thymeleaf 简单使用

    一.简介 1.Thymeleaf 在有网络和无网络的环境下皆可运行,而且完全不需启动WEB应用,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.浏览器解释 h ...

  2. 第6章—渲染web视图—SpringMVC+Thymeleaf 处理表单提交

    SpringMVC+Thymeleaf 处理表单提交 thymleaf处理表单提交的方式和jsp有些类似,也有点不同之处,这里操作一个小Demo,并说明: 1.demo的结构图如下所示: pom.xm ...

  3. 基于SpringMVC下的Rest服务框架搭建【1、集成Swagger】

    基于SpringMVC下的Rest服务框架搭建[1.集成Swagger] 1.需求背景 SpringMVC本身就可以开发出基于rest风格的服务,通过简单的配置,即可快速开发出一个可供客户端调用的re ...

  4. NHIBERNATE的简单框架的设计

    NHIBERNATE的简单框架的设计 上次的 NHibernate的Session管理策略和NHibernateHelper 发布并提供下载,给NHibernate刚入门的同学们带来很多便利. 最近有 ...

  5. SpringMvc+thymeleaf+HTML5中文乱码问题

    SpringMvc+thymeleaf+HTML5环境下遇到中文乱码...... 按照以往经验逐个排查,开发环境统一为utf-8编码,服务器也配置了编码过滤器,tomcat也是utf-8编码.前台页面 ...

  6. springmvc拦截器的简单了解

    1.定义一个拦截器 2.在springmvc.xml中配置拦截器. (1)拦截器拦截的请求是建立在前端控制器配置之下的,若DispatcherServlet拦截的是*.action,则拦截器即使配置 ...

  7. 使用IntelliJ IDEA开发SpringMVC网站(二)框架配置

    原文:使用IntelliJ IDEA开发SpringMVC网站(二)框架配置 摘要 讲解如何配置SpringMVC框架xml,以及如何在Tomcat中运行 目录[-] 文章已针对IDEA 15做了一定 ...

  8. 基于全注解的SpringMVC+Spring4.2+hibernate4.3框架搭建

    概述 从0到1教你搭建spring+springMVC+hibernate整合框架,基于注解. 本教程框架为基于全注解的SpringMVC+Spring4.2+hibernate4.3,开发工具为my ...

  9. spring的了解以及简单框架的搭建

    了解spring: Spring是一个开源的控制反转(Inversion of Controller)和面向切面(AOP)的框架,目的是为了简化开发. IOC(控制反转): public class ...

随机推荐

  1. HRBUST - 1818 石子合并 区间dp入门

    有点理解了进阶指南上说的”阶段,状态和决策“ /* 区间dp的基础题: 以区间长度[2,n]为阶段,枚举该长度的区间,状态dp[l][r]表示合并区间[l,r]的最小费用 状态转移方程dp[l][r] ...

  2. Gym100340 线性dp

    //看题解写的 https://blog.csdn.net/sdfzyhx/article/details/51804748#include<bits/stdc++.h> using na ...

  3. hdu5646数学构造+二分

    /* 满足n>=(k+1)*k/2的整数n必定满足 a+(a+1)+...+(a+k-1)<=n<=(a+1)+(a+2)+...+(a+k) 只要在[a,a+k]中减掉一个数字ai ...

  4. python 全栈开发,Day90(Vue组件,前端开发工具包)

    昨日内容回顾 1. Vue使用 1. 生成Vue实例和DOM中元素绑定 2. app.$el --> 取出该vue实例绑定的DOM标签 3. app.$data --> 取出该vue实例绑 ...

  5. AOJ 0189 Convenient Location (Floyd)

    题意: 求某一个办公室 到其他所有办公室的 总距离最短  办公室数 不超过10 输入:多组输入,每组第一行为n (1 ≤ n ≤ 45),接下来n行是 (x, y, d),x到y的距离是d输出:办公室 ...

  6. 转载 c++指针 指针入门

    这是一篇我所见过的关于指针的最好的入门级文章,它可使初学者在很短的时间内掌握复杂的指针操作.虽然,现在的Java.C#等语言已经取消了指针,但作为一个C++程序员,指针的直接操作内存,在数据操作方面有 ...

  7. IIS 之 通过 Web.config 修改文件上传大小限制设置方法

    在IIS 6.0中,不设置默认大小为4M,设置文件上传大小的方法,maxRequestLength(KB),executionTimeout(毫秒),配置如下节点: <system.web> ...

  8. 第三章XML简介

    概念:XML:提供数据交换.系统配置.内容管理等的功能,可跨平台.跨网络.跨程序的数据描述方式.XSL:依靠XPath定位,提供显示模板,且专门为了显示XML文件信息的语言.CSS(层叠样式表):在网 ...

  9. 【Java】 剑指offer(25) 合并两个排序的链表

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 输入两个递增排序的链表,合并这两个链表并使新链表中的结点仍然是按照 ...

  10. C++语言实现-邻接表

    图的邻接表实现 邻接表是图的一种链式存储结构.主要是应对于邻接矩阵在顶点多边少的时候,浪费空间的问题.它的方法就是声明两个结构.如下图所示: 先来看看伪代码: typedef char Vertext ...