前面完成了API服务(虽然这个API没什么用)。接下去来个WEB服务，在前面项目中加上个页面。这章目标是通过访问一个URL展示一个界面，从服务端传递参数值到界面中展示动态数据。这里还会涉及到webjars的应用。
目录与文件
在项目src/main/resources目录下创建两个目录，分别是templates各static，templates 存放模板文件，static 存放静态文件。
目录
在static目录放入一张图片，图片名称为001.jpg，启动项目。打开浏览器访问http://localhost/001.jpg
访问资源
spring boot会默认从static查找静态资源，在这里还可以放css，js，html等文件，都可以直接访问到。但是，这里的html文件只能是静态页面，服务端不能传值到界面中。
templates中加入一个index.html，内容如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>这里是标题</title>
</head>
<body>
<div>
<p>这是首页</p>
</div>
</body>
</html>
重启服务，浏览器中访问http://localhost/index.html
404
找不到页面，如果index.html放到static目录中是可以访问的。templates目录中的文件是不能直接访问。下面讲到这么访问templates中的文件。
当前目录
目录
使用模板
访问templates文件，首先要引入模板引擎。这里使用thymeleaf，在pom.xml文件中包含thymeleaf组件。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
如图
thymeleaf
增加package：com.biboheart.demos.web，在package中创建class：PageController
package com.biboheart.demos.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class PageController {
@RequestMapping(value = {"/", "/home"})
public String home() {
return "index";
}
}
@Controller表示这是一个SpringMVC的控制器
@RequestMapping(value = {"/", "/home"}) 表示访问路径"/"或"/home"都指向home函数，home返回"index"页面，即templates/index.html模板生成的页面。
重新启动服务，在浏览器中访问 http://localhost/home
home页面
这时候，页面展示的是index.html的内容。
向页面传值
这里用Model对象传值到模板中
调整controller的实现
package com.biboheart.demos.web;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class PageController {
@RequestMapping(value = {"/", "/home"})
public String home(Model model, String name) {
model.addAttribute("name", name);
return "index";
}
}
在函数中增加两个参数，Model model用于向模板传递值，name用于接收请求参数。model.addAttribute("name", name);将接收到的值通过model传递到模板中。
模板文件index.html中接收并显示name的值。
<!DOCTYPE html>
<html lang="zh-CN"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>这里是标题</title>
</head>
<body>
<div>
<p>这是首页</p>
<p>欢迎你：<span th:text="${name}"></span></p>
</div>
</body>
</html>
重新启动服务，在浏览器中访问http://localhost/home?name=biboheart
参数
index.html中的<span th:text="${name}"></span>，展示Model中的name的值。
使用webjars
在pom.xml中包含webjars，并且包含jquery，bootstrap
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.34</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7-1</version>
</dependency>
界面中使用bootstrap
<!DOCTYPE html>
<html lang="zh-CN"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>这里是标题</title>
<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>欢迎你：<span th:text="${name}"></span></h1>
<p>这是首页</p>
</div>
</div>
</body>
</html>
重新启动项目，在浏览器中访问http://localhost/home?name=biboheart
bootstrap效果
模板中包含静态资源
将静态资源001.jpg图片在模板中显示，修改后index.html文件如下
<!DOCTYPE html>
<html lang="zh-CN"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>这里是标题</title>
<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>欢迎你：<span th:text="${name}"></span></h1>
<p>这是首页</p>
</div>
<img src="/001.jpg" alt="封面" class="img-thumbnail">
</div>
</body>
</html>
显示图片
网友评论