Day06_04_Spring Boot教程之开发Web应用

SpringBoot中开发Web应用

本教程利用Spring boot实现Web开发.

一. Web开发方式简介

Spring boot提供了一套完整的web开发流程,从前端到后台,再到数据库,定时任务,消息队列等都可以支持.一般利用Spring框架开发一个Web应用有两种方式:

1. 前后端分离

这种方式前端开发和后端开发完全分离,只需要协商好接口就行,前端负责开发页面并调用后端接口展示数据,后端负责提供Restful风格的接口.

2. 使用Spring boot自带的模板

Springboot支持多种主流后端模板:
· Thymeleaf
· FreeMarker
· Groovy
· Mustache
· Velocity
· JSP

需要注意的是,虽然Spring MVC支持JSP,但是Spring Boot不建议使用JSP,因为在使用嵌入式servlet容器时,有一些使用限制.另外在2010年后Velocity停止更新,所以这两种都不建议使用.

以上几个模板Springboot可以同时支持.什么叫同时支持呢?简而言之,Springboot项目中可以同时共存多个模板,我们需要做的仅仅是在pom文件中引入相关模板引擎的jar包就可以了.Springboot可以根据模板的后缀名来决定到底由哪种模板引擎解析这个动态页面.

2.1 常见模板页面后缀

Thymeleaf : .html
freemaker : .ftl
jsp : jsp

2.2 前后端模板区别

注意以上这些模板都是后端模板,有别于前端模板(如angular).

1️⃣. 前端模板:

前端模板通常是通过模板提供的js,根据模板规定的语法规则解析html中的模板标记;

2️⃣. 后端模板:

类似于前端,一个页面请求到达之后,后端模板引擎根据特定的语法规则解析模板中的内容,将数据填充到模板中,最终返回给浏览器的实际上已经是一个完整的html页面了.

二. 用Spring Boot搭建Web项目

1. 创建Maven工程及其module

注意:

为了方便我们以后讲述其他SpringBoot知识点,我们建立一个SpringBoot项目,然后在这个项目中创建多个module,每个module讲述一个SpringBoot的知识点,这样我们就不用建立多个intelliJ项目了.

我们创建一个maven工程(注意,不要勾选create from archytype,虽然它会帮你创建项目骨架,但是会从外网下载一些东西,很慢,导致会卡在那)来创建Web项目.

1.1 创建一个父项目--MyBootDemos

项目选择Maven构建

设置项目的GAV坐标

1.2 在父项目中创建一个子module--boot_web

子module也是Maven架构

此时的项目目录结构,我们项目案例中用不到默认的src目录,所以我把它删除了.

接下来我们就在boot_web这个module中讲述如何进行实现一个简单的Web功能.

2. Thymeleaf简介

Thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非Web环境中的应用开发.它提供了一个用于整合SpringMVC的可选模块,在应用开发中,你可以使用Thymeleaf来完全代替JSP或其他模板引擎,如Velocity\FreeMarker等.

Thymeleaf示例模板:

<table>
  <thead>
    <tr>
      <th th:text="#{msgs.headers.name}">Name</td>
      <th th:text="#{msgs.headers.price}">Price</td>
    </tr>
  </thead>
  <tbody>
    <tr th:each="prod : ${allProducts}">
      <td th:text="${prod.name}">Oranges</td>
      <td th:text="${#numbers.formatDecimal(prod.price,1,2)}">0.99</td>
    </tr>
  </tbody>
</table>

可以看到Thymeleaf主要以属性的方式加入到html标签中,浏览器在解析html时,当检查到没有的属性时候会忽略掉该属性,所以Thymeleaf的模板可以通过浏览器直接打开展现,这样非常有利于前后端的分离.

在Spring Boot中使用Thymeleaf,只需要引入下面依赖,并在默认的模板路径src/main/resources/templates下编写模板文件即可完成.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3. 利用Thymeleaf模板实现Web开发步骤

如果我们通过@RestController来处理请求,那么返回的内容为json对象,如果需要渲染html页面的时候,我们可以使用上述模板引擎中的任何一个,它们默认的模板配置路径为: src/main/resources/templates.当然也可以修改这个路径,具体如何修改,可在后续各模板引擎的配置属性中查询并修改.

3.1 在MyBootDemos项目的pom.xml中添加Spring boot依赖包

在MyBootDemos项目的pom.xml文件中添加Spring boot父项目的启动器依赖包,如图示:

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.21.RELEASE</version>
</parent>

然后在pom.xml文件中再添加些简单配置.

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <java.version>1.8</java.version>
</properties>

此时该pom.xml代码内容为:

3.2 在boot_web模块的pom.xml中添加相关依赖包

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

3.3 创建thymeleaf模板文件

src/main/resources/目录下创建一个文件夹templates,默认情况下名称固定,在该目录下创建一个index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <!--注意:这个meta节点最后有个结束的'/',一定要注意,否则会产生异常!!!后续我们再分析如何解决这个异常-->
    <meta charset="UTF-8"/>
    <title>index</title>
</head>
<body>
    <!--${msg},thymeleaf模板根据key取值-->
    <h1 th:text="${msg}">Hello </h1>
</body>
</html>

3.4 编写controller代码

创建一个HelloController类,里面编写一个controller接口,如图所示.

@Controller
public class HelloController {

    @RequestMapping("/")
    public String index(ModelMap map) {
        // 添加一个属性,用来在模板中根据这个key来读取对应的值
        map.addAttribute("msg", "跟一一哥学习SpringBoot");
        // return 模板文件的名称-->对应src/main/resources/templates/index.html
        return "index";
    }
}

3.5 创建Application入口类

@SpringBootApplication
public class BootWebApplication {

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

3.6 启动入口类

在浏览器中输入http://localhost:8080/,看到如下结果.

这就是利用Thymeleaf模板来渲染的一个页面,
做到了不破坏HTML自身内容的数据逻辑分离.

更多Thymeleaf的页面语法,可以参考我的另一篇关于Thymeleaf的博客!

三. SAXParseException异常处理方案

1. 问题描述

如果我们的模板文件,也就是index.html文件在编写的时候是默认生成的html文件,如图所示:

那么在启动项目后,访问接口,可能会产生如下异常:

org.xml.sax.SAXParseException: 元素类型 "meta" 必须由匹配的结束标记 "</meta>" 终止。

2. 产生该异常的原因如图示

3. 解决方案

1️⃣.修改thymeleaf.mode的值为LEGACYHTML5;
2️⃣.在pom.xml文件中添加一个依赖包:

<!--为了解决thymeleaf模板中,对html标签要求太严格的问题!-->
<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.22</version>
</dependency>

做完以上两步之后,以后的html文件中,即使标签不是成对出现或者标签没有结束标签,也不会再解析异常了.

四. Spring Boot中的配置文件

在SpringBoot中,如有需要修改默认配置的时候,只需复制下面要修改的属性到application.properties中,并修改成需要的值,如修改模板文件的扩展名,修改默认的模板路径等.

1. Thymeleaf默认的配置属性

# Enable template caching.
spring.thymeleaf.cache=true 

# Check that the templates location exists.
spring.thymeleaf.check-template-location=true 

# Content-Type value.
spring.thymeleaf.content-type=text/html 

# Enable MVC Thymeleaf view resolution.
spring.thymeleaf.enabled=true 

# Template encoding.
spring.thymeleaf.encoding=UTF-8 

# Comma-separated list of view names that should be excluded from resolution.
spring.thymeleaf.excluded-view-names= 

# Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.mode=HTML5 

# Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.prefix=classpath:/templates/ 

# Suffix that gets appended to view names when building a URL.
spring.thymeleaf.suffix=.html  

# Order of the template resolver in the chain.
spring.thymeleaf.template-resolver-order=  

# Comma-separated list of view names that can be resolved.
spring.thymeleaf.view-names= 

五. SpringBoot项目中静态资源的处理

1. 静态资源访问

在我们开发Web应用的时候,可能需要引用大量的js、css、图片等静态资源,Spring Boot默认提供的静态资源目录位置一般需置于classpath下,目录名需符合如下规则:

/static
/public
/resources
/META-INF/resources

举例: 我们可以在src/main/resources/目录下创建static,在该位置放置一个图片文件.启动程序后,尝试访问http://localhost:8080/a.jpg,如能显示图片,则说明配置成功.

六. 支持JSP的配置

Spring Boot并不建议使用jsp,但如果一定要使用,可以参考此工程作为脚手架:JSP支持

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一一哥Sun

您的鼓励是我继续创作的动力哦

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值