Spring Boot模板引擎

r囧r小猫 2023-10-03 19:47 72阅读 0赞

## Spring Boot模板引擎 ##

### 1、什么是模板引擎 ###

模板引擎是一种可以把程序员提供的**数据**和模板通过模板引擎转换成固定格式来动态生成HTML的技术。

其主要优点在于：可以提高代码的可读性和维护性，可大大提高一些简单页面的开发效率，减少字符串拼接。

实现流程为：浏览器请求抛给控制器，控制器处理好数据后，就跳转板引擎页面。\*\*（注意在跳转的同时，会将数据组装好，也交给模板引擎处理。）\*\*模板引擎会根据数据和模板引擎的规则，动态生成 HTML 页面，最后返回给浏览器显示。

### 2、Spring Boot中模板引擎的使用 ###

现阶段常用Spring Boot模板引擎有 FreeMarker 、Thymeleaf。而Spring Boot默认使用的是Thymeleaf。因此可以来实现一个基于Thymeleaf 商品浏览项目实例。  
第一步：创建Spring Boot项目并在pom.xml中引用相关依赖。  
![在这里插入图片描述][b86fa2b22e594250b3301ecfe9c4c10b.png]  
第二步：创建控制器方法来指向商品页面  
![在这里插入图片描述][791e60fe8dc24eb4aa83841b87270e5f.png]  
第三步：创建商品页面并启动项目，然后访问 http://127.0.0.1:8080/goods，来验证我们的项目能跑成功。  
![在这里插入图片描述][6f21de8cdba44167bb1f5ea1608ff868.png]  
![在这里插入图片描述][0dcefa0e1c3c41eb874a5750d34b768b.png]  
第四步：创建商品类和服务方法  
![在这里插入图片描述][4f1835738d014d77bcbc77b1a4d3571d.png]  
![在这里插入图片描述][02eb3abca4e443ae84a61e048586a553.png]

第五步：在控制器方法中，调用服务方法来获取商品信息，并将信息交给模板引擎处理  
![在这里插入图片描述][6f95434f8b0f4f0682208680f64b6d92.png]  
第六步：在商品页面通过模板引擎规则来显示出商品信息  
![在这里插入图片描述][f788748032474af8b25a7e0c4c38dd20.png]  
最后我们就可以启动项目然后访问 http://127.0.0.1:8080/goods，来看最终结果啦！  
![在这里插入图片描述][ae3d616b56504234887456ff80987b31.png]  
备注：**在编码过程过犯了个错误，在control层中把属性名取名为了goodsList,但是在html中却打成了goodList而导致一直页面没有结果出来，因为这小小的错误，我找了半个小时才发现，真的是太菜了。。所以，教训就是：以后自己取的属性名之类的还是直接复制粘贴会靠谱很多！！！**  
![在这里插入图片描述][b2ceac318b69428b87984c0d7ff4e087.png]  
![在这里插入图片描述][cd325c80259f42b2a0911bac0905c197.png]

[b86fa2b22e594250b3301ecfe9c4c10b.png]: https://img-blog.csdnimg.cn/b86fa2b22e594250b3301ecfe9c4c10b.png
[791e60fe8dc24eb4aa83841b87270e5f.png]: https://img-blog.csdnimg.cn/791e60fe8dc24eb4aa83841b87270e5f.png
[6f21de8cdba44167bb1f5ea1608ff868.png]: https://img-blog.csdnimg.cn/6f21de8cdba44167bb1f5ea1608ff868.png
[0dcefa0e1c3c41eb874a5750d34b768b.png]: https://img-blog.csdnimg.cn/0dcefa0e1c3c41eb874a5750d34b768b.png
[4f1835738d014d77bcbc77b1a4d3571d.png]: https://img-blog.csdnimg.cn/4f1835738d014d77bcbc77b1a4d3571d.png
[02eb3abca4e443ae84a61e048586a553.png]: https://img-blog.csdnimg.cn/02eb3abca4e443ae84a61e048586a553.png
[6f95434f8b0f4f0682208680f64b6d92.png]: https://img-blog.csdnimg.cn/6f95434f8b0f4f0682208680f64b6d92.png
[f788748032474af8b25a7e0c4c38dd20.png]: https://img-blog.csdnimg.cn/f788748032474af8b25a7e0c4c38dd20.png
[ae3d616b56504234887456ff80987b31.png]: https://img-blog.csdnimg.cn/ae3d616b56504234887456ff80987b31.png
[b2ceac318b69428b87984c0d7ff4e087.png]: https://img-blog.csdnimg.cn/b2ceac318b69428b87984c0d7ff4e087.png
[cd325c80259f42b2a0911bac0905c197.png]: https://img-blog.csdnimg.cn/cd325c80259f42b2a0911bac0905c197.png