SpringMVC+thymeleaf

这个也是配置了好久,对Spring也是似懂非懂,虽然可以简单的搭建出来项目,但是很多东西确实还是不太理解

但是最近公司的项目上是利用的SpringBoot这个框架,都是Spring啊,所以我自己练习的时候感觉Spring是否也是使用thymeleaf这个模板

比如在修改页面,之前我们需要做的事情是,从后台查询出来每一个字段,然后里面js给每一个控件进行赋值,讲数据回显到页面上,那么我们能不能在加载该页面的时候,一些变量自然的显示到页面上,如何实现这样的功能,这个就是需要我们用到的模板

1.模板的使用----pom.xml 中引入相关的jar

	<dependency>
			<groupId>org.thymeleaf</groupId>
			<artifactId>thymeleaf-spring4</artifactId>
			<version>3.0.11.RELEASE</version>
		</dependency>

2.配置Spring视图利用thymeleaf实现返回视图的解析 SpringMVC-servlet.xml的配置

<!-- 	<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/pages/" />
		<property name="suffix" value=".html" />
	</bean> -->

     <bean id="viewResolver" class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
        <property name="order" value="1"/>
        <property name="characterEncoding" value="UTF-8"/>
        <property name="templateEngine" ref="templateEngine"/>
    </bean>
    
    <bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
		<property name="templateResolver" ref="templateResolver" />
	</bean>
	
	 <bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
        <property name="prefix" value="/WEB-INF/pages/"/>
        <property name="suffix" value=".html"/>
        <property name="templateMode" value="HTML5"/>
        <property name="characterEncoding"  value="UTF-8" />
    </bean>

这个里面有注释的部分,注释的部分是之前的视图解析用到的bean,这个bean仅仅是将后台返回的字符串映射到对应的html文件

没有实现数据渲染的效果

3.调用后台controller返回页面地址和要需要渲染的数据

	@RequestMapping(value = "/useredit_init")
	public String useredit_init(String rowguid,Model model) {
		UserInfo user = userService.getUserByGuid(rowguid);
		model.addAttribute("user", user);
		return "userinfo/useredit";

	}

4.改变html标签,实现数据的渲染功能

		<div class="col-xs-6">
			<label for="exampleInputPassword1">地址</label> 
             <input type="text" class="form-control" placeholder="地址" id="address"
						required="true" th:value=${user.address}>
		</div>

th:value=${user.address}

最后实现的效果就是我们一开始的那张图一样了

希望对你有所帮助

 

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值