枣庄定制网站建设公司,移动端包括哪些,网页设计师求职,wordpress myisam作者简介#xff1a;大家好#xff0c;我是撸代码的羊驼#xff0c;前阿里巴巴架构师#xff0c;现某互联网公司CTO 联系v#xff1a;sulny_ann#xff08;17362204968#xff09;#xff0c;加我进群#xff0c;大家一起学习#xff0c;一起进步#xff0c;一起对抗…作者简介大家好我是撸代码的羊驼前阿里巴巴架构师现某互联网公司CTO 联系vsulny_ann17362204968加我进群大家一起学习一起进步一起对抗互联网寒冬 # 序言 Thymeleaf 是Java服务端的模板引擎与传统的JSP不同前者可以使用浏览器直接打开因为可以忽略掉拓展属性相当于打开原生页面给前端人员也带来一定的便利。如果你已经厌倦了JSPJSTL的组合Thymeleaf或许是个不错的选择 # 开始使用 1.引入依赖 SpringBoot默认提供了Thymeleaf的Starter只需简单引入依赖即可。 dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-thymeleaf/artifactId /dependency 目前默认版本是2.1如果想升级版本到3.0可以这样修改。
properties thymeleaf.version3.0.7.RELEASE/thymeleaf.version thymeleaf-layout-dialect.version2.0.0/thymeleaf-layout-dialect.version /properties 为了方便开发项目案例采用了热部署工具dev-tools 这样我们在修改页面之后IDEA会自动加载从而达到实现热更新的效果。
dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-devtools/artifactId scoperuntime/scope /dependency 注由于IDEA默认关闭了热部署需要做一些设置才能使其生效。解决方法首先按住CtrlShiftAlt/ 然后进入 Registry 或者双击Shift搜索Registry...然后勾选compiler.automake.allow.when.app.running 即可。另外Build-Compiler 也要勾选上Build Project automatically . 2. 添加相关配置 Thymeleaf默认开启了页面缓存在开发的时候应该关闭缓存。此外通常我们还会指定页面的存放路径。默认是classpath:/templates/
application.yml 配置如下spring: thymeleaf: cache: false #关闭缓存 prefix: classpath:/views/ #添加路径前缀 3.编写HTML 编写Thymeleaf和书写HTML5页面没有什么不同最大的转变就是使用拓展属性th:xx去跟服务端进行数据交互保留原始页面风格也是Thymeleaf的推崇的风格。例如下面这个简单的案例启动项目我们发现页面跳转的是简书的连接这一点也验证了Thymeleaf覆盖原生页面数据的极佳能力。
页面代码!DOCTYPE htmlhtml xmlns:thhttp://www.thymeleaf.orghead titleThymeleaf/title/headbody h2欢迎使用Thymeleaf!!/h2 a hrefhttp://www.baidu.com th:href${info}戳我有惊喜/a/body/html
后端代码
Controllerpublic class UserController {GetMapping(/) public String index(Model model) { model.addAttribute(info, user/list); return index; }GetMapping(/user) public String hehe(Model model) { model.addAttribute(user, new User(UUID.randomUUID().toString(), yizhiwazi, 20170928)); return user; }GetMapping(/user/list) public String userlist(Model model) { ListUser userList new ArrayList(); userList.add(new User(UUID.randomUUID().toString(), yizhiwazi, 20170928)); userList.add(new User(UUID.randomUUID().toString(), kumamon, 123456)); userList.add(new User(UUID.randomUUID().toString(), admin, admin)); model.addAttribute(userList, userList); return userList; }
} 现在我们尝试回填一个表单展示单个用户信息。
!-- 使用th:object 搭配*{} 可以省略对象名 --form action/ th:object${user} input typehidden nameuserId th:value*{userId} / input typetext nameusername th:value*{username} / input typetext namepassword th:value*{password} //form 接下来我们进入一个更复杂的案例例如展示一个用户列表信息 不需要编写新的标签就可以完成对批量用户的遍历。
h2用户列表/h2!--说明th:eachobj,stat:${objects} 分别代表单个实例,状态(可省略),待遍历对象--div th:eachuser:${userList} input typehidden nameuserId th:value${user.userId}/ 用户姓名input typetext namepassword th:value${user.username}/ 登录密码input typetext nameusername th:value${user.password}//div好了Thymeleaf简单介绍到这里
