练习一 添加页面
2018/5/30 15:29:39
我们写了一个简单的 spring boot 程序，目前只是输出一个 “sqber's blog”的字符串，并成功的部署了，可以使用 java.sqber.com 来访问。
给我们的任务是：搞一个页面，这个页面上有学习Java的链接，大伙都能够访问。
目前只剩下这个页面了。
使用 thymeleaf 展示页面
修改 pom.xml 文件来引入 thymeleaf
添加依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
为了方便开发，我们再做一些其它pom文件的修改。
在 project 节点下添加 Properties 节点，声明编码方式 和 java 版本
<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties>
在 dependencies 节点下添加 spring-boot-devtools，这样 我们修改项目后，能立刻看到效果。
不需要重新启动，他检测到代码变化后，会自己重启。
<!-- 热部署 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> <scope>provided</scope> </dependency>
在 build 节点上添加 spring boot 插件
<plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins>
pom文件修改完毕后，“Alt + F5”来更新 Maven 库。
添加页面
修改 HomeController 下的 index 方法。
将 @ResponseBody 注解去掉，方法内改为 return "home/index"; 注意：home前面没有斜杠。
@Controller
public class HomeController {
@GetMapping("/")
public String index() {
return "home/index";
}
}这里的 “home/index”指的是返回 home 目录下的 index 页面，而页面默认在 src/main/resources/templates 下面。
所以，先在 resources 下新建一个文件夹 templates，然后在 templates 下新建一个 home 文件夹，并添加一个 index.html 文件。
index.html 文件中输入 “abc”，先简单的测试使用。
添加配置文件
在 resources 文件夹下添加文件 application.yml，这个文件为 spring boot 的配置文件，并在文件内输入
server: port: 8003
需要注意空格
这样就修改了 项目的端口号。
注： resources 文件夹下 某些特定格式，特定名字的文件，都会被 spring boot 视为配置文件。
在 BlogApplication 页面中，右键选择 Run As，Java Application，启动项目。
在浏览器内输入 localhost:8003 查看，页面显示正常。
这样页面就添加好了。
页面展示后台数据
我们的页面上目前只有一个“abc”，我们要展示我们的 java 资源列表。
在后台，我们先创建一个 资源列表 。
我们新建一个包 “com.sqber.blog.dto”，并在此包下新建一个类 “ResourceItem”。
package com.sqber.blog.dto;
/*
* Java资源项
* */
public class ResourceItem {
private String name;
private String url;
public ResourceItem(String name,String url) {
this.name = name;
this.url = url;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}然后，在 HomeController 中，我们新建一个 List<ResourceItem> 列表，并通过 model.addAttribute("","")来将数据传递到页面上展示。
@GetMapping("/")
public String index(Model model) {
List<ResourceItem> items = new ArrayList<>();
items.add(new ResourceItem("官方Java教程","https://www.ibm.com/developerworks/cn/java"));
items.add(new ResourceItem("精选内容：developerWorks 上最受欢迎的 Java 内容","https://www.ibm.com/developerworks/cn/java/j-top-java-content-2017/index.html"));
items.add(new ResourceItem("Java快速入门","http://www.cnblogs.com/happyframework/p/3332243.html"));
items.add(new ResourceItem("W3C School 的 Java 基础教程","http://www.runoob.com/java/java-tutorial.html"));
items.add(new ResourceItem("Java 编程入门","https://www.ibm.com/developerworks/cn/java/intro-to-java-course/index.html"));
items.add(new ResourceItem("W3C School 的 Eclipse 教程","http://www.runoob.com/eclipse/eclipse-tutorial.html"));
model.addAttribute("items", items);
return "home/index";
}在 index.html 页面上，我们就可以拿到这个 items 对象，并通过循环遍历来展示他即可。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Java资源</title>
</head>
<body>
<h2>Java资源列表</h2>
<div th:each="item: ${items}">
<div th:text="${item.name}">Oranges</div>
<!--<a href="/" th:href="@{/order/details(orderId=${o.id})}">view</a>-->
<a href="/" th:href="${item.url}" th:text="${item.url}" target="_blank">view</a>
</div>
</body>
</html>这里我们用到了 thymeleaf 的循环遍历语法
通过在 标签上添加属性 th:each 来遍历
${XXX} 为后台传递过来的对象。
另外，我们还用到了 th:text th:href 等属性。
代码修改完毕之后，刷新我们的浏览器 localhost:8083，展示如下：
这样我们的页面就出来了。
*昵称：
*邮箱：
个人站点：
*想说的话：