您的位置：首页 > 运维架构 > 网站架构

架构小白到砖家-06-【界面渲染问题】-整合模板引擎thymeleaf

2019-01-09 13:53 309 查看

浏览器和应用怎么发送请求和传递参数，咱们是掌握了，好像平时我们经常访问的网站，应用返回的内容都非常丰富，怎么才能让咱们的应用也能做到呢？

我们需要先看看http全称叫超文本传输协议，也就是说http协议本身是能够传输大量信息。另外在web应用的世界里面，为什么是使用浏览器作为web应用访问工具呢？而不是传统应用QQ一样，使用之前还需要先安装一个软件呢？（当然QQ也是有web版本的）。这其实就是web应用的优势，叫轻客户端概念。使用一个应用不需要安装软件，打开浏览器就能用，这就是web应用流行的原因。那么浏览器是如何做到类似安装软件一样丰富的界面功能呢？

因为人们在定义http协议的同时，还创造出了一种web展示的技术，就是我们熟悉的HTML语言。它能够展示出类似软件一样的功能控件，但是界面并不够美观，于是人们又定义了CSS样式规则，来美化HTML，这样咱们就看到了漂亮的web页面了。是不是好像还少了点什么？QQ软件可不止简单的界面，还有复杂的业务逻辑，那么怎么才能实现web的业务逻辑呢？就需要使用脚本语言javascript。这样咱们就能满足web轻客户端要求了。所以浏览器就是来发送用户请求，解析http传回来的丰富内容，通过支持HTML、CSS、javascript这三种技术的方式，当然现在浏览器还能调用硬件资源，咱们就不讨论了。html、css、js这三个技术内容都非常复杂，这里也不讨论，后续讲解前端技术的时候，咱们再研究吧。

那么我们想让web应用返回丰富信息，就是返回HTML信息。springmvc怎么操作呢？咱们前面已经学会返回信息给浏览器了，那么能不能直接把html返回呢？答案是可以的，我们来新建一个html的方法试试。先准备好一个html内容。

<html><head></head><body><h1>hello world!</h1></body></html>

我们可以看到浏览器能够识别我们的html信息，helloworld已经加粗了，因为html的标签h1表示标题格式。这种直接返回html信息的方式，就是最原始的servlet的方式，应用需要通过对html字符串信息进行拼接操作，来让它的内容动起来，也就是所谓的web2.0动态网页时代。这样返回html信息方式，想象一下都能让人奔溃，如果是一个新浪首页那样的页面，基本上人都看不懂了。那怎么办呢？

最开始人们把html内容保存成文件，用户访问的时候，直接将文件内容返回给浏览器，但是由于html内容是固定的，这就是web1.0静态网页时代。后来人们就在html文件和servlet的特性上，创建了JSP这种页面模板语言。JSP的原理是返回html内容给浏览器之前，可以先运行jsp中的java逻辑，把servlet拼接string的方式变成了可以排版的jsp方式，把html的内容进行处理，让它动态起来。到了springmvc时代，模板语言有很多，springboot默认推荐的thymeleaf和freemarker。这里我们就使用thymeleaf作为模板语言，它的好处是可以不依赖运行环境，直接用浏览器查看html效果，让前端美工和开发人员进行解耦，实现并行工作，从而提升开发效率。

那我们就来看看怎么让springmvc整合thymeleaf，首先让maven引入jar，然后创建html文件放到springboot约定的templates目录下面，最后controller的方法去掉@ResponseBody，返回html文件路径，这样就大功告成了。我们来看看吧。

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head></head><body><h1>hello world!</h1></body></html>

这样我们就把thymeleaf整合到springboot中了，并且还学会了如何返回html信息给浏览器。但是咱们还没有将前面案例中用户参数传递到模板文件中，让html内容动态起来。下面我们先用restful风格接收请求参数，然后给模板引擎传入参数，就需要用到springmvc的对象Model，最后在html文件中用thymeleaf的标签语言获取参数信息，具体细节看下面的案例。thymeleaf的语法这里就不展开探讨，后续再补充。

回顾总结，springmvc要返回丰富信息，需要使用html、css和js的前端技术，另外为了让html内容能够动态生成，引入thymeleaf的模板语言。最后springboot还约定html放在templates目录，css和js放在static目录。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航