前面体验了一把spring boot(spring boot 初体验)。完成了一个简单的API服务。既然spring boot已经有servlet容器，那我们放个页面进去。让它也包含了界面。可能，有的服务（如用户登录）是需要有用户交互的。我的开发中，大部分服务是不带界面的。所以，在spring boot一系列文章中很少会涉及到。其实都是一样的，只要了解了使用方法，用到的时候就不会有什么问题。我还在计划整理一些前端开发的文章，主要用vue框架。到时候，vue实例中的服务端接的是这spring boot 系列文章的实例。
目录结构
首先在项目的src/main目录中创建一个资源文件夹：resources
资源文件夹
目录结构
在resources目录中建立两个文件夹：static和templates
建立文件夹
我想应该是这样的：templates 存放模板文件，static 存放静态文件。下面一步步试试。
静态资源
放张图片到static试试。会是什么效果呢？
放入图片
启动服务(spring boot 初体验这里有说明怎么启动了，后面就不再重复描述怎么启动服务)。
在浏览器中访问图片
在浏览器中访问图片，这是在根网站根目录下。看这情况静态资源的加入只要把文件放入static就可以访问到了。
如果加入html呢？试试。
html文件
在static中创建一个html文件。随便从W3School中复制一段html过来。
根
恩，404错误，没找到页面。如果加入文件名称呢？
成功
有了。如果乱码的话，把html文件中的head如下修改
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的第一个 HTML 页面</title>
</head>
这样看来，静态页面是可以访问的，但不像其它servlet容器那样，会到index.html定义为默认的静态资源文件。
如果到服务端去跳转。服务端的根跳转到index.html
控制器
新建一个controller，用spring mvc跳转的方法。
package com.biboheart.demos.helloworld.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class HelloController {
@RequestMapping(value = {"/", "/index", "/home"})
public String index() {
return "index.html";
}
}
访问结果
这样就可以用根目录访问到了。
模板文件
先把上面的controller文件删除。在了解一下模板文件会是怎么呢。
如果把刚才html文件放入templates会是怎么样呢？
放入模板
这里是找不到的
加上前面的HelloController之后，还是找不到页面。
在templates文件夹中放的动态页面，spring boot 推荐使用thymeleaf来做动态页面。
在pom.xml加入
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
现在是这么个结构
文件结构
现在浏览器中打开就可以访问了。
访问页面
这里提下，动态页面是可以从服务端向页面传参数的。
来改造一下。
HelloController
@RequestMapping(value = {"/", "/index", "/home"})
public String index(Model model) {
model.addAttribute("name", "biboheart");
return "index.html";
}
页面改造
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<span>hello </span><span th:text="${name}"></span>
</body>
</html>
访问页面
服务传参到页面
总结：文章主要体验了spring boot对静态页面、动态页面的处理。我觉得服务端还是不去做前端的工作。体验下，了解下，知道有这么回事。
网友评论