现在来把我们前面做的html放置到java工程中。

这样做的目的,一是实现我们前面的目标-使用html做后台模板。二是在实际开发中,整合页面模板到工程中后,我们只要开启工程项目的debug模式,浏览器直接就能访问调试,就像已经发布出一个网站一样。步骤

1、打开java工程

2、展开src目录,右键点击resources目录,出来的菜单中选择new | Directory,名字定位static

这样,我们就在工程目录的resources下面,建立了一个static目录。注意这个名字不能错。

3、拷贝原来的index.html,到static目录下。

4、修改原来的HelloWorldController.java中的代码,注释掉Controller这一行,因此这个java文件整个就成为:

package DefaultMain;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
//@Controllerpublic class HelloWorldController {
@RequestMapping("/")
@ResponseBody
String hello() {
return "Hello World!";
}
}

完成。

是的,就这么简单。先测试一下,使用debug方式(那个虫子按钮),让我们的工程运行起来。等运行出现下面的类似结果后(图一):图一:正常运行的截图

我们就可以开启喜欢的浏览器,在浏览器的地址栏输入 "127.0.0.1:8080",可以看到图二画面:图二:放进后台后展示的主页画面原理

这个画面的意义重大:因为整个流程已经跟原来不一样了;它说明了我们的java后台,能够知道浏览器要访问的主页是我们放置在static下的index.html。即:当用户通过浏览器访问网站根目录,它会通过一定规则寻找对应要提交给浏览器的页面。几乎所有的web服务器都默认index.html是一种被认可的默认页面,所以这里我们就用index.html名字。

注意:

对于java后台工程来说,resources下的static目录,是默认的“静态文件”存在的地方。因此我们前面花了点时间创建了那个目录。

现在这个工程运行起来后,当浏览器访问主页,服务器接收到请求就会去寻找根目录(对应的RequestMapping是"/"),由于我们没有提供这个RequestMapping(注释了原来的"/"这个对应的Controller),那么它会进入备选方案,找寻static目录下的index.html。所以,正好就是我们要的效果。

工程里的index.html,严格来说,属于静态资源。实际项目中,的确有不少html我们是不需要改变任何东西的,一旦做出来,无论什么时候都不会改动。这样的html,我们就用这种方式放置在static即可。模板

但有很多的页面,内容在访问的时候“动态”决定。比如京东的首页,里面展示的商品每天都在变化,甚至刷新一次就可能有内容在变化。这个内容是由服务器根据一定规则实现的。对于这样的页面,我们还是做出html,不过这种html会特殊一些。除了原来浏览器能认的元素,还会加上浏览器不能认、但后台程序能认的标记。这些东西加入后,后台程序会处理这个特殊的html,把那些浏览器不能认,但是它能认的标记用浏览器能识别的元素替代,然后再返回给浏览器。处理的过程往往是通过这些特殊标记,知道对应的数据应该从哪里开始安放,然后读取数据库,用数据替换特殊记号的内容,做成一个合格的html内容。

这样的特殊html文本,我们就叫做模板。

模板文件有很多,每个不同的后台解决方案,都有自己的模板格式。比如http://ASP.net(微软出的网站后台解决方案),因为使用C#开发,模板后缀名就使用.cshtml,一看就知道是CSharpHTML的意思。SpringBoot模板有好多种,比如FreeMarker、thymeleaf等等,一般只要选其中的一种即可。这些东西,比如thymeleaf,都是一个运行库,用来处理带有特殊标记的html文本。

我们这个个人博客系统会使用FreeMarker模板。这个模板的后缀名是.ftl。也就是说,我们以后会经常做一些html,然后把它的后缀改成.ftl,里面的内容大多数还是html,只不过会用上一些FreeMarker标记。

既然FreeMarker是一个运行库,那么我们第一步就是要通过Maven把它导入到工程里来。在pom.xml中,加入

org.springframework.boot
spring-boot-starter-freemarker

整体的pom.xml内容就变成:

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

4.0.0

com.shixue

PersonalBlog

1.0-SNAPSHOT

org.springframework.boot

spring-boot-starter-parent

2.3.1.RELEASE

org.springframework.boot

spring-boot-starter-web

org.springframework.boot

spring-boot-starter-freemarker

等Maven导入FreeMarker库结束后,我们就可以使用模板了。

下面我们尝试创建、使用第一个模板。步骤

创建模板文件

1、工程树状图上,在resources加入新的文件夹,名字templates

2、在templates文件夹上,右键点出上下文菜单,new | File,输入名字test.ftl

3、跳出来的Pattern对话框中选择html

这样我们就建立了一个模板文件。

4、打开这个模板文件,我们拷贝index.html中的内容到该文件中,暂时什么都不改。创建工程属性文件

工程树状图上,在resources目录上点击右键,new | File,输入名字application.properties

这样我们就在resources目录下创建了一个application.properties文件。

打开这个文件,在里面添加如下内容:

spring.freemarker.template-loader-path: classpath:/templates

spring.freemarker.suffix: .ftl

保存。

这两句话是告诉SpringBoot,模板文件的寻找目录和对应的后缀名。创建测试的java代码

1、工程树状图上,在DefaultMain文件夹上,右键点击,new | Java Class,名字:TestController

2、打开该文件,拷贝以下内容

package DefaultMain;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import javax.servlet.http.HttpServletRequest;
@Controller
public class TestController {
@GetMapping("/test")
public String test(HttpServletRequest request, ModelMap modelMap) {
return "test";
}
}

保存后一切就准备完成。

使用虫子按钮开启debug,等待运行正常。

浏览器地址栏输入 127.0.0.1/test,我们就能看到跟主页一样的画面。现在关闭调试。

到这里,读者可能会有疑问,那这个有什么意思?似乎只是改了后缀,跟html没有什么差别吗!不然。我这一步只是想让你知道,如果没有什么需要动态改的,事实上,ftl就是一个html,SpringBoot加上FreeMarker完全可以正常处理这个情况。

那模板怎么用?

一个简单的例子:

假设这个页面的title栏是随机的,每次用户访问的时候,都会给一个随机的名字,那么显然静态页面是做不到的。方案就是使用模板!

下面来改动实现这个功能。

在html中,title是通过

中的实现的。因此我们改动test.ftl中为:${siteName}


这里的${siteName}就是一个FreeMarker的标记,可以看做是一个名字为siteName的变量。有了这个变量后,我们就可以通过java代码来使用它。

所以,把TestController.java代码中的test方法内容改成如下:

@GetMapping("/test")
public String test(HttpServletRequest request, ModelMap modelMap) {
modelMap.put("siteName", "random");
return "test";
}

再次启动调试。然后访问 127.0.0.1/test,现在看页面的title,是不是变成了我们刚写的random?

这个实验的意义在于,用户每次访问该页面的时候,我们都可以在java代码中控制模板中siteName变量的值。这个就是跟静态的html完全不一样的地方。

好了,这个就是模板。先从现实中知道它,后面我们讲述遇到的代码的一些知识,我们一直是这样,不是吗?:)