cdns个人博客asp_实学:Java开发自己的博客系统-第十三篇(静态资源和后台模板)...

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

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

步骤

1、打开java工程

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

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

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

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

package 

完成。

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

90751659d8511543cfcd3cb7958da947.png
图一:正常运行的截图

我们就可以开启喜欢的浏览器,在浏览器的地址栏输入 "127.0.0.1:8080",可以看到图二画面:

77901ce8cbe53bcaace2ab24fae8b75a.png
图二:放进后台后展示的主页画面
原理

这个画面的意义重大:因为整个流程已经跟原来不一样了;它说明了我们的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中,加入

<dependency>
            

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

<?xml version="1.0" encoding="UTF-8"?>

等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 

保存后一切就准备完成。

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

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

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

那模板怎么用?

一个简单的例子:

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

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

在html中,title是通过<head>中的<title>实现的。因此我们改动test.ftl中<title>为:

<title>${siteName}

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

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

@GetMapping

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值