首页手记 SpringBoot(二)SpringBoot的Web开发

SpringBoot(二)SpringBoot的Web开发

标签：

Java

SpringBoot提供了挺多的模板引擎，包含FreeMarker、Groovy、Thymeleaf、Velocity和Mustache，Springboot推介使用Thymeleaf作为模板引擎，它对SpringMVC有着很好的支持。Thymeleaf是一个java类库，它是一个xml/xthtml/html5的模板引擎，可以作为MVC的Web应用的View层。

创建Project
注意创建的时候要选择Thymeleaf作为依赖，这样创建成功的Project中将自动包含spring-boot-starter-web，如下图：

创建JavaBean

该类用来在模板页面展示数据使用，包含name和age属性，如下所示：

public class Person {
private String name;
private Integer age;

public Person() {
    super();
}

public Person(String name, Integer age) {
    super();
    this.name = name;
    this.age = age;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public Integer getAge() {
    return age;
}

public void setAge(Integer age) {
    this.age = age;
  }
}

引入脚本样式静态文件
根据一些默认的规则，脚本样式，图片等静态文件一般放在src/main/resources/static目录下
这里我用到了Bootstrap和jQuery，如下图：

添加前端页面

根据一般默认规则，页面放在src/main/resources/templates目录下，如上图所示，在该目录下新建文件index.html,如下：

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>web页面</title>
<link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
<link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"   
/>            
</head>
 <body>
   <div class="panel panel-primary">
   <div class="panel-heading">
   <h3 class="panel-title">访问Model</h3>
 </div>
<div class="panel-body">
    <span th:text="${singlePerson.name}"></span>
</div>
  </div>
    <div th:if="${not #lists.isEmpty(people)}">
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">列表</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item" th:each="person:${people}">
                <span th:text="${person.name}"></span>
                <span th:text="${person.age}"></span>
                <button class="btn"     
      th:onclick="'getName(\''+${person.name}+'\');'">获得名字</button>
            </li>
        </ul>
    </div>
</div>
</div>
 <script th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{jquery-3.1.1.js}" type="text/javascript"></script>
 <script th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{bootstrap/js/bootstrap.min.js}"           
 type="text/javascript"></script>
<script th:inline="javascript">
var single = [[${singlePerson}]];
console.log(single.name+"/"+single.age);
function getName(name) {
    console.log(name);
}
</script>
 </body>
 </html>

后台数据构造

在入口类DemoApplication中添加如下代码，由后台向前台页面返回两条数据，一个单个的Person对象，还有一个people对象是一个List集合，集合中放了3个Person对象，到时候我们直接将这两条数据在html页面上显示出来，代码如下：

@Controller
@SpringBootApplication
public class DemoApplication {

public static void main(String[] args) {
	SpringApplication.run(DemoApplication.class, args);
}


@RequestMapping("/")
public String index(Model model) {
	//单个persion
	Persion single = new Persion("小哥",18);
	//persion集合，传3个值
	List<Persion> people = new ArrayList<>();
	Persion p1 = new Persion("小哥1",21);
	Persion p2 = new Persion("小哥2",22);
	Persion p3 = new Persion("小哥3",23);

	people.add(p1);
	people.add(p2);
	people.add(p3);
	model.addAttribute("singlePerson",single);
	model.addAttribute("people",people);
	return  "index";
 }

}

这样可以运行项目，然后在浏览器中访问，结果如下：

Tomcat相关配置

我们一直使用SpringBoot提供的默认的配置方式。有的时候我们可能需要有一些自定义的配置，比如Tomcat的配置，我们需要在application.properties中进行配置，通用的Servlet容器配置以“server”作为前缀，而Tomcat特意配置以“server.tomcat”为前缀，如下：

server.port=8081#配置服务器端口，默认为8080
server.session-timeout=1000000#用户回话session过期时间，以秒为单位
server.context-path=/index#配置访问路径，默认为/
server.tomcat.uri-encoding=UTF-8#配置Tomcat编码，默认为UTF-8
server.tomcat.compression=on#Tomcat是否开启压缩，默认为关闭

点击查看更多内容