详解使用Spring Boot开发Web项目

程序员文章站 2024-03-01 22:17:46

前面两篇博客中我们简单介绍了spring boot项目的创建、并且也带小伙伴们来diy了一个spring boot自动配置功能，那么这些东西说到底最终还是要回归到web上才...

前面两篇博客中我们简单介绍了spring boot项目的创建、并且也带小伙伴们来diy了一个spring boot自动配置功能，那么这些东西说到底最终还是要回归到web上才能体现出它的更大的价值，so，今天我们就来看一下如何使用spring boot来开发web项目。当然，如果小伙伴对spring boot尚不熟悉的话，可以先参考一下这两篇博客：

1.初识spring boot框架

2.初识spring boot框架(二)之diy一个spring boot的自动配置

spring boot 提供了spring-boot-starter-web来为web开发予以支持，spring-boot-starter-web为我们提供了嵌入的tomcat以及springmvc的依赖，用起来很方便。另外，我们这里还要用到模板引擎，我们做web开发可选的模板引擎还是挺多的，这里我主要使用thymeleaf作为模板引擎，事实上，spring boot提供了大量的模板引擎，包括freemarker、groovy、thymeleaf、velocity和mustache，在提供的这么多中它推荐使用thymeleaf。thymeleaf在使用的过程中通过thymeleafautoconfiguration类对集成所需要的bean进行自动配置，通过thymeleafproperties来配置thymeleaf，包括前缀后缀什么的，我们可以查看thymeleafproperties一段源码：

@configurationproperties("spring.thymeleaf")
public class thymeleafproperties {
 private static final charset default_encoding = charset.forname("utf-8");
 private static final mimetype default_content_type = mimetype.valueof("text/html");
 public static final string default_prefix = "classpath:/templates/";
 public static final string default_suffix = ".html";
 private boolean checktemplate = true;
 private boolean checktemplatelocation = true;
 private string prefix = "classpath:/templates/";
 private string suffix = ".html";
 private string mode = "html5";

 ......
 ......
 ......
}

ok，从这一段源码中我们可以看到默认的页面后缀名为.html，前缀为classpath:/templates/，实际上也就是我们需要把html页面放到resources文件夹下的templates文件夹中。同时我们也看到了要如何修改这个配置，在application.properties文件中以spring.thymeleaf为前缀来配置相关属性。

创建project

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

详解使用Spring Boot开发Web项目

创建javabean

我一会要从后台传递数据给前台页面，数据的载体就是这个javabean，如下：

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;
 }
}

后台数据构造

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

@requestmapping("/")
 public string index(model model) {
  person single = new person("aa", 11);
  list<person> people = new arraylist<>();
  person p1 = new person("zhangsan", 11);
  person p2 = new person("lisi", 22);
  person p3 = new person("wangwu", 33);
  people.add(p1);
  people.add(p2);
  people.add(p3);
  model.addattribute("singleperson", single);
  model.addattribute("people", people);
  return "index";
 }

这里的代码都很简单，不必我多说了，就是返回给前台页面两个对象，一个singleperson，一个people，另外，我们的前台页面叫做index.html。

引入相关的静态文件

这里我使用到了bootstrap和jquery两个库，当然这个并不是必须的，只是为了让我们显示的效果更好看一些,静态文件我们要放在src/main/resources/static目录下。

放置之后目录如下：

详解使用Spring Boot开发Web项目

前台展示页面

刚才小伙伴们都看到了，默认情况下前台页面要放在src/main/resources/templates目录下，so，我们在该目录下新建文件就叫index.html,如下：

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8" />
 <title>test20</title>
 <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
 <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="external nofollow" 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:src="@{jquery-3.1.1.js}" type="text/javascript"></script>
<script th:src="@{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>

关于这一段html文件我简单介绍一下，首先通过xmlns:th="http://www.thymeleaf.org"导入命名空间，在后期时候的时候，由于html本身是静态视图，在使用相关属性的时候加上th:前缀可以使之变为动态视图。th:href="@{bootstrap/css/bootstrap.min.css}" rel="external nofollow" rel="external nofollow" 表示引用web静态资源。ok，这是head部分。body部分整体上分为了两大块，第一块显示我那个单独的person对象，第二部分显示list集合中的person对象。div的样式这个没啥好说的，照着bootstrap的官网写就行了，th:text="${singleperson.name}"表示访问model中singleperson的name属性，th:if="${not #lists.isempty(people)}"表示判断model中的people集合是否为空，th:each="person:${people}"表示遍历people中的元素，这个和java里的foreach差不多，person表示迭代元素。th:onclick="'getname(\''+${person.name}+'\');'"表示添加点击事件，点击事件由javascript来处理。th:inline="javascript"这样添加到的script标签可以通过[[${singleperson}]]访问model中的属性。

如此之后，我们便可以运行我们自己的项目了，然后在浏览器中访问，结果如下：

详解使用Spring Boot开发Web项目

点击button也可以在浏览器控制台看到log输出：

详解使用Spring Boot开发Web项目

ok，perfect！

tomcat相关配置

上面几乎没做什么特别的配置，大部分都使用了springboot提供的默认的配置方式。有的时候我们可能需要有一些自定义的配置，比如tomcat的配置，很简单，和说的基本一致，有两种不同的配置方式：

在application.properties中配置

直接在application.properties中进行配置即可，如下：

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是否开启压缩，默认为关闭

在代码中进行配置

@component
public class customservletcontainer implements embeddedservletcontainercustomizer {
 @override
 public void customize(configurableembeddedservletcontainer container) {
  container.setport(8080);
  container.adderrorpages(new errorpage(httpstatus.not_found,"/404.html"));
  container.setsessiontimeout(10, timeunit.minutes);
 }
}

自定义类实现

embeddedservletcontainercustomizer接口，然后设置端口、设置错误请求页面、设置会话超时时间等，大家注意这里的404页面放在src/main/resources/static文件夹下，有了这个之后，当我访问一个不存在的页面的时候就会跳转到404.html页面了。

springmvc相关配置

虽然spring boot默认的配置很多情况都可以满足我们的项目需求，可是有的时候我们可能还是会需要更加灵活的springmvc配置，这个时候我们只需要自定义类继承自webmvcconfigureradapter，然后使用@configuration和@enablewebmvc注解，这样我们会完全屏蔽掉spring boot的默认配置，但是正常情况下我们可能只是希望在spring boot已有默认配置的基础上再添加一些配置即spring boot提供的默认配置和我自定义的配置并存的情况，这个也简单，只需要去掉@enablewebmvc注解就行了。如下代码：

@configuration
//@enablewebmvc//无需使用该注解，否则会覆盖掉springboot的默认配置值
public class webmvcconfig extends webmvcconfigureradapter {
 @override
 public void addviewcontrollers(viewcontrollerregistry registry) {
  registry.addviewcontroller("/hello").setviewname("/hello");
 }

}

自定义favicon

想要自定义favicon很简单，只需要将自己的favicon.ico文件放置到src/main/resources目录下即可，重新运行项目，再看浏览器左上角图标就会变了。如下：

详解使用Spring Boot开发Web项目

本案例下载地址：本案例github地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： VB.NET设置屏幕分辨率、颜色位数、刷新率实例代码

下一篇： Java使用正则表达式验证手机号和电话号码的方法

详解使用Spring Boot开发Web项目

详解使用Spring Boot开发Web项目

详解Spring Boot使用redis实现数据缓存

Spring Boot 异步框架的使用详解

详解在Spring Boot中使用Mysql和JPA

使用maven一步一步构建spring mvc项目（图文详解）

详解Spring Boot 事务的使用

详解eclipse下创建第一个spring boot项目

Spring Boot中lombok的安装与使用详解

详解Spring Boot的GenericApplicationContext使用教程

详解使用Spring Boot开发Web项目