Spring Boot实践二 --Web开发

造夢先森

已于 2023-08-04 09:25:21 修改

阅读量735

点赞数

分类专栏： JAVA进阶文章标签： spring boot 后端 java

于 2023-07-26 14:12:15 首次发布

本文链接：https://blog.csdn.net/qq_15437629/article/details/131937998

版权

JAVA进阶专栏收录该内容

24 篇文章 1 订阅

订阅专栏

一、模板引擎简介

在之前的示例中，我们通过@RestController来处理请求：

package com.example.demospringboot.web;

import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RequestMapping;

@RestController
public class HelloController {
	// @RequestMapping可以指定GET、POST请求方式
	// @GetMapping等价于@RequestMapping的GET请求方式
     @RequestMapping("/hello")
    public String index() {
        return "Hello World !";
    }
}

返回的内容为json对象。那么如果需要渲染html页面的时候，要如何实现呢？在动态HTML实现上，Spring Boot提供了多种模板引擎的默认配置支持，所以在推荐的模板引擎下，我们可以很快的上手开发动态网站。

Spring Boot提供了自动化配置模块的模板引擎主要有以下几种：

Thymeleaf
FreeMarker
Groovy

Spring Boot从一开始就建议使用模板引擎，而不是使用JSP。这是因为JSP在处理动态内容时存在一些问题，例如：

JSP需要在服务器端编译，这会增加服务器的负担。
JSP的语法比较复杂，需要学习一些特定的标签和语法规则。
JSP的可重用性比较差，难以将页面模板和业务逻辑分离。

相比之下，模板引擎具有以下优点：

模板引擎可以在客户端渲染，减轻服务器的负担。
模板引擎的语法比较简单，易于学习和使用。
模板引擎可以将页面模板和业务逻辑分离，提高代码的可重用性和可维护性。

因此，Spring Boot建议使用模板引擎，尤其推荐使用Thymeleaf作为模板引擎来处理动态内容，因为Thymeleaf提供了完美的Spring MVC的支持。

MVC是模型(Model)、视图(View)、控制器(Controller)的简写，是一种软件设计规范。

是将业务逻辑、数据、显示分离的方法来组织代码。
MVC主要作用是降低了视图与业务逻辑间的双向偶合。
MVC不是一种设计模式，MVC是一种架构模式。当然不同的MVC存在差异。

Model（模型）：数据模型，提供要展示的数据，因此包含数据和行为，可以认为是领域模型或JavaBean组件（包含数据和行为），不过现在一般都分离开来：Value Object（数据Dao）和服务层（行为Service）。也就是模型提供了模型数据查询和模型数据的状态更新等功能，包括数据和业务。
View（视图）：负责进行模型的展示，一般就是我们见到的用户界面，客户想看到的东西。
Controller（控制器）：接收用户请求，委托给模型进行处理（状态改变），处理完毕后把返回的模型数据返回给视图，由视图负责展示。也就是说控制器做了个调度员的工作。

二、Thymeleaf 模板示例：

Web开发的核心内容主要包括内嵌Servlet容器和Spring MVC。更重要的是，Spring Boot为web开发提供了快捷便利的方式进行开发，使用依赖jar：spring-boot-starter-web，提供了嵌入式服务器Tomcat以及Spring MVC的依赖，且自动配置web相关配置，可查看org.springframework.boot.autoconfigure.web。

Tomcat 是Web应用服务器,是一个Servlet/JSP容器. Tomcat 作为Servlet容器,负责处理客户请求,把请求传送给Servlet,并将Servlet的响应传送回给客户.而Servlet是一种运行在支持Java语言的服务器上的组件. Servlet最常见的用途是扩展Java Web服务器功能,提供非常安全的,可移植的,易于使用的CGI替代品.

在这里插入图片描述

①：Tomcat将http请求文本接收并解析，然后封装成HttpServletRequest类型的request对象，所有的HTTP头数据读可以通过request对象调用对应的方法查询到。

②：Tomcat同时会要响应的信息封装为HttpServletResponse类型的response对象，通过设置response属性就可以控制要输出到浏览器的内容，然后将response交给tomcat，tomcat就会将其变成响应文本的格式发送给浏览器

Java Servlet API 是Servlet容器(tomcat)和servlet之间的接口，它定义了serlvet的各种方法，还定义了Servlet容器传送给Servlet的对象类，其中最重要的就是ServletRequest和ServletResponse。所以说我们在编写servlet时，需要实现Servlet接口，按照其规范进行操作。

SpringMVC概念：

Spring MVC 是 Spring 提供的一个基于 MVC 设计模式的轻量级 Web 开发框架，本质上相当于 Servlet。
Spring MVC 是结构最清晰的 Servlet+JSP+JavaBean 的实现。
由于 Spring MVC 本身就是 Spring 框架的一部分，可以说和 Spring 框架是无缝集成。性能方面具有先天的优越性，是当今业界最主流的 Web 开发框架，最热门的开发技能。
在 Spring MVC 框架中，Controller 替换 Servlet 来担负控制器的职责，用于接收请求，调用相应的 Model 进行处理，处理器完成业务处理后返回处理结果。Controller 调用相应的 View 并对处理结果进行视图渲染，最终客户端得到响应信息。
Spring MVC 的注解驱动和对 REST 风格的支持

SpringMVC详解：https://blog.csdn.net/ailaohuyou211/article/details/130394223

以下是一个简单的Thymeleaf Spring Boot应用示例：

首先，新建一个Spring Boot应用，在pom.xml中加入所需的模板引擎模块，比如使用thymeleaf的话，只需要引入下面依赖：

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

注意：在pom中引入相关依赖后，一定要刷新下maven，否则可能导致访问失败的。

在application.properties文件中添加以下配置：

spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

创建一个Controller类，用于处理请求并返回视图：

package com.example.demospringboot.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.ui.ModelMap;

@Controller
public class HelloController {
    @GetMapping("/hello")
    public String index(ModelMap map) {
        // 加入一个属性，用来在模板中读取
        map.addAttribute("message", "Hello, Thymeleaf!");

        // return模板文件的名称，对应src/main/resources/templates/index.html
        return "index";
    }
}

说明：@Controller和@RestController的区别主要有以下几点：

@RestController相当于@Controller和@ResponseBody合在一起的作用；
如果使用@RestController注解Controller层的话，则返回的是return里面的内容，无法返回到指定的页面，配置的视图解析器InternalResourceViewResolver也就自然没有作用了；
如果要返回到指定的页面，则需要用@Controller配合视图解析器InternalResourceViewResolver；
如果需要返回JSON、XML或自定义mediaType内容到页面，则需要在对应的方法上加上@ResponseBody注解。

创建一个Thymeleaf模板，用于渲染视图，模板路径src/main/resources/templates下新建模板文件index.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Spring Boot Example</title>
</head>
<body>
    <h1 th:text="${message}"></h1>
</body>
</html>

运行应用程序并访问http://localhost:8080/hello，应该能够看到“Hello, Thymeleaf！”的消息。

三、ECharts 绘制数据图表

ECharts是百度开源的一个前端组件。它是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

它提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

index.html示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title>Spring Boot中使用ECharts1</title>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
</body>

<script type="text/javascript">
    // 初始化ECharts组件到id为main的元素上
    let myChart = echarts.init(document.getElementById('main'));
    // 定义图标的配置项
    let option = {
        title: {
            text: 'Spring Boot中使用ECharts'
        },
        tooltip: {},
        // x轴配置
        xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        // y轴配置
        yAxis: {},
        series: [{
            // 数据集（也可以从后端的Controller中传入）
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            // 图表类型，这里使用line，为折线图
            type: 'line'
        }]
    };
    myChart.setOption(option);
</script>
</html>

四、文件上传

文件上传的功能实现是我们做Web应用时候最为常见的应用场景，比如：实现头像的上传，Excel文件数据的导入等功能，都需要我们先实现文件的上传，然后再做图片的裁剪，excel数据的解析入库等后续操作。

首先，新建一个Spring Boot应用，在pom.xml中加入所需的模板引擎模需要的依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.20</version>
    <scope>provided</scope>
</dependency>

注意：在pom中引入相关依赖后，一定要刷新下maven，否则可能导致访问失败的。

2，在resources/templates目录下再创建一个文件上传的页面upload.html，内容如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title>文件上传页面</title>
</head>
<body>
<h1>文件上传页面</h1>
<form method="post" action="/upload" enctype="multipart/form-data">
    选择要上传的文件1：<input type="file" name="files"><br>
    选择要上传的文件2：<input type="file" name="files"><br>
    <hr>
    <input type="submit" value="提交">
</form>
</body>
</html>

注意：
（1），这里有2个input文件输入框，且name是一样的，这样才能在后端处理文件的时候组织到一个数组中；
（2）， method=“post” action=“/upload”, 与UploadController中的@PostMapping(“/upload”)一致。

3，创建文件上传的处理控制器，命名为UploadController

package com.example.demospringboot.web;

import lombok.extern.slf4j.Slf4j;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;

@Controller
@Slf4j
public class UploadController {

    // 成员变量path，通过@Value注入配置文件中的file.upload.path属性
    // 这个配置用来定义文件上传后要保存的目录位置
    @Value("${file.upload.path}")
    private String path;

    // GET请求，路径"/"
    // 用于显示upload.html这个文件上传页面
    @GetMapping("/")
    public String uploadPage() {
        return "upload";
    }

    // POST请求。路径"/upload"
    // 用于处理上传的文件，即保存到file.upload.path配置的路径下面
    @PostMapping("/upload")
    @ResponseBody
    // MultipartFile使用数组，参数名称files对应html页面中input的name，一定要对应
    public String create(@RequestPart MultipartFile[] files) throws IOException {
        StringBuffer message = new StringBuffer();

        for (MultipartFile file : files) {
            String fileName = file.getOriginalFilename();
            String filePath = path + fileName;

            File dest = new File(filePath);
            // 文件已存在时拷贝前端不会出现异常，后端抛出异常原因，如：
            // java.nio.file.FileAlreadyExistsException: \test\file1.txt
            try {
                Files.copy(file.getInputStream(), dest.toPath());
            } catch (IOException e) {
                e.printStackTrace();
            }
            message.append("Upload file success : " + dest.getAbsolutePath()).append("<br>");
        }
        return message.toString();
    }
}

4，编辑application.properties配置文件

spring.servlet.multipart.max-file-size=2MB
spring.servlet.multipart.max-request-size=2MB

file.upload.path=/test/

前两个参数用于限制了上传请求和上传文件的大小，而file.upload.path是上面我们自己定义的用来保存上传文件的路径。

5，启动Spring Boot应用，访问http://localhost:8080，可以看到文件上传页面：

在这里插入图片描述
上传文件后提交：

如果再次选择相同的文件提交，页面正常，后端可以看到抛出的FileAlreadyExistsException异常：

在这里插入图片描述

问题记录：

1，springboot能正常启动，且能通过编译，无错误；
然后后台访问静态页面的时候，出现whittelabel error page错误
检查思路如下：

（1），判断application是否能检查到controller类，首先application在目录中的范围大于或等于controller的范围；
（2），然后检查能否映射静态资源，检查getmapping和访问目录是否一致；
（3），如果在 th:text 中引用后台发送过来的变量时，页面就报错，如果取消引用就不报错，这种可能就是你在 th: 属性中进行时，没有正确地做到字符串和变量的拼接；
（4），在pom中引入相关依赖后，一定要刷新下maven，没有刷新新加入的依赖会导致访问失败。重新刷新pom依赖后，重启项目，就能正常访问了

2，编译报错如下：
Please refer to xxx\target\surefire-reports for the individual test results.
Please refer to dump files (if any exist) [date].dump, [date]-jvmRun[N].dump and [date].dumpstream.
修改pom.xml，不执行测试用例，也不会编译测试用例：

    <properties>
        <maven.test.skip>true</maven.test.skip>
    </properties>

参考：
https://blog.didispace.com/spring-boot-learning-21-4-2/

造夢先森

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot实践二 --Web开发

在之前的示例中，我们通过@RestController来处理请求，所以返回的内容为json对象。那么如果需要渲染html页面的时候，要如何实现呢？在动态HTML实现上，Spring Boot提供了多种模板引擎的默认配置支持，所以在推荐的模板引擎下，我们可以很快的上手开发动态网站。Spring Boot从一开始就建议使用模板引擎，而不是使用JSP。因此，Spring Boot建议使用模板引擎，例如Thymeleaf、Freemarker等，来处理动态内容。
复制链接

扫一扫