Spring Boot实践二 --Web开发

news2024/10/5 8:13:19

一、模板引擎简介

在之前的示例中，我们通过@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("/hello")
    public String index() {
        return "Hello World !";
    }
}

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

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

  • Thymeleaf
  • FreeMarker
  • Groovy

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

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

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

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

因此，Spring Boot建议使用模板引擎，例如Thymeleaf、Freemarker等，来处理动态内容。

二、Thymeleaf 模板示例：

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

  1. 首先，新建一个Spring Boot应用，在pom.xml中加入所需的模板引擎模块，比如使用thymeleaf的话，只需要引入下面依赖：
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

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

  1. 在application.properties文件中添加以下配置：
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
  1. 创建一个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";
    }
}
  1. 创建一个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>
  1. 运行应用程序并访问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数据的解析入库等后续操作。

  1. 首先，新建一个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/

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/796396.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

1.Web API基本认知

1.Web API基本认知

变量声明 const优先&#xff0c;尽量使用const ●const声明的值不能更改&#xff0c;而且const声明变量的时候需要里面进行初始化 ●简单数据类型 用const声明后不能修改值 ●但是对于 引用数据类型&#xff0c;const声明的变量&#xff0c;里面存的不是值&#xff0c;是地址&a…
阅读更多...
spring-authorization-server （1.1.1）自定义认证

spring-authorization-server （1.1.1）自定义认证

前言 注意&#xff1a;我本地没有生成公钥和私钥&#xff0c;所以每次启动项目jwkSource都会重新生成&#xff0c;导致之前认证的token都会失效&#xff0c;具体如何生成私钥和公钥以及怎么配置到授权服务器中&#xff0c;网上有很多方法自行实现即可 之前有个项目用的0.0.3的…
阅读更多...
ATA-2021B高压放大器经典应用合集（内附技术指标）

ATA-2021B高压放大器经典应用合集（内附技术指标）

多年来Aigtek安泰电子一直潜心于电子测试仪器的研发&#xff0c;已拥有完善的功率放大器产品线&#xff0c;并针对超声声学、无损检测、电磁驱动、生物医疗、微流控、材料测试等主流各行业领域测试建立的了专属测试方案&#xff0c;在国内功率放大器行业及市场中获得认可&#…
阅读更多...
【智能可视化---01】揭示Python AI中Matplotlib的魅力，提升数据洞察力！探索AI 中的Matplotlib，这一篇就够了！

【智能可视化---01】揭示Python AI中Matplotlib的魅力，提升数据洞察力！探索AI 中的Matplotlib，这一篇就够了！

Success keeps eluding me yet my passion abides. 🎯作者主页： 追光者♂🔥 🌸个人简介： 💖[1] 计算机专业硕士研究生💖 🌟[2] 2022年度博客之星人工智能领域TOP4🌟 🏅[3] 阿里云社区特邀专家博主🏅 🏆[4] CSDN-人工智能领域优质创作者…
阅读更多...
团队运营能力不足？「企业学院」3大板块全面提升运营技能

团队运营能力不足？「企业学院」3大板块全面提升运营技能

『矩阵通』本期上线「企业学院」功能&#xff0c;内容包含新媒体培训课程、行业动态资讯及新媒体营销、矩阵运营的干货指南等&#xff0c;帮助企业提高团队运营能力&#xff0c;对此功能感兴趣的客户可前往矩阵通官网&#xff08;matrix.newrank.cn&#xff09;体验。 在当今数…
阅读更多...
太绝了！医疗行业管理，原来可以这么简单！

太绝了！医疗行业管理，原来可以这么简单！

在现代医疗领域&#xff0c;科技的不断进步和创新为医疗设备的发展带来了前所未有的突破和提升。然而&#xff0c;这些先进的医疗设备往往对其运行环境的要求非常严格&#xff0c;尤其是温度和湿度等参数的稳定性。 因此&#xff0c;为了确保医疗设备的高效、可靠运行&#xff…
阅读更多...
【学会动态规划】删除并获得点数（13）

【学会动态规划】删除并获得点数（13）

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…
阅读更多...
百度智能云连拿四年第一，为什么要深耕AI公有云市场

百度智能云连拿四年第一，为什么要深耕AI公有云市场

AI是过去几年云计算市场中的最大变量&#xff0c;而大模型的成熟&#xff0c;毫无疑问将指数级增强这个变量。 记得在2022年年底&#xff0c;生成式AI与大模型开始爆火的时候&#xff0c;我们就曾讨论过一个问题&#xff1a;这轮AI浪潮中&#xff0c;最先受到深刻影响的将是云计…
阅读更多...
利用spss进行多元逐步回归

利用spss进行多元逐步回归

1.首先用代码将变量归一化 我这第5列及后是我要归一化的数据&#xff0c;将归一化后的数据保存为nor_result.csv文件 import pandas as pd from sklearn.preprocessing import MinMaxScalerdf pd.read_csv(E:\\Sentinel12\\yangben\\result.csv) cols_to_normalize df.colu…
阅读更多...
vue3 + TS + VueUse 快捷存取操作cookie，存储用户token流程

vue3 + TS + VueUse 快捷存取操作cookie，存储用户token流程

1.依赖安装 VueUse可以为Vue开发提供方便和高效的支持&#xff0c;提高开发效率和代码质量。 VueUse网址&#xff1a;https://vueuse.org/integrations/useCookies/#usecookies 依赖1(主)&#xff1a;npm i vueuse/integrations 依赖2(模块)&#xff1a;npm i universal-cooki…
阅读更多...
PCB设计中常见的走线等长要求

PCB设计中常见的走线等长要求

1、在做 PCB 设计时&#xff0c;为了满足某一组所有信号线的总长度满足在一个公差范围内&#xff0c;通常要使用蛇形走线将总长度较短的信号线绕到与组内最长的信号线长度公差范围内&#xff0c;这个用蛇形走线绕长信号线的处理过程&#xff0c;就是我们俗称的 PCB 信号等长处理…
阅读更多...
GPT一键化身「AI助理」——自定义指令功能

GPT一键化身「AI助理」——自定义指令功能

最近GPT又更新了一个超实用的功能——自定义指令&#xff0c;启用后&#xff0c;你可以给GPT设置一些固定指令&#xff0c;让它记住或扮演某个角色&#xff0c;比如客服、律师、投资管理师、老师、营养师...... 这样&#xff0c;我们就不再需要每次都要打开新的聊天&#xff0c…
阅读更多...
AT15透明屏有哪些特点？

AT15透明屏有哪些特点？

AT15透明屏是一种新型的显示技术&#xff0c;它采用了透明材料制成的屏幕&#xff0c;可以实现透明显示效果。这种屏幕可以广泛应用于各种领域&#xff0c;如商业广告、展览展示、智能家居等。 AT15透明屏的特点之一是其高透明度。 由于采用了透明材料制成&#xff0c;AT15透明…
阅读更多...
生成式人工智能新政策发布：AI进入规范时代！

生成式人工智能新政策发布：AI进入规范时代！

最近&#xff0c;国家发布了《生成式人工智能服务管理暂行办法》。该条例于8月15日开始施行&#xff0c;使得AI应用进入规范化管理。该法明确了适用于提供生成文本、图片、音频、视频等内容的服务&#xff0c;鼓励人工智能技术在各行业、各领域的创新应用&#xff0c;生成积极健…
阅读更多...
深度学习：常用优化器Optimizer简介

深度学习：常用优化器Optimizer简介

深度学习&#xff1a;常用优化器Optimizer简介 随机梯度下降SGD带动量的随机梯度下降SGD-MomentumSGDWAdamAdamW 随机梯度下降SGD 梯度下降算法是使权重参数沿着整个训练集的梯度方向下降&#xff0c;但往往深度学习的训练集规模很大&#xff0c;计算整个训练集的梯度需要很大…
阅读更多...
【C++】 函数模板和类模板

【C++】 函数模板和类模板

文章目录 一、模板1.1 函数模板和类模板1.2 函数模板1.2.1 普通函数和函数模板区别1.2.2 普通函数和函数模板调用规则1.2.3 模板局限性 1.3 类模板1.3.1 类模板对象做函数参数1.3.2 类模板的继承1.3.3 类模板成员函数的类外实现1.3.4 类模板分文件编写1.3.5 类模板全局函数类内…
阅读更多...
PaddleOCR C++编译出错解决方案

PaddleOCR C++编译出错解决方案

文章目录 前言一、环境准备1、主要环境2、源码下载3、C推理库下载 二、报错信息1.静态库调用错误2.ld returned 1 exit status 总结 前言 最近&#xff0c;想尝试下PaddleOCR的C推理&#xff0c;但是过程不如人所愿&#xff0c;除了很多问题&#xff0c;这里捡重点的说下吧&…
阅读更多...
【Python 实战】---- 批量识别图片中的文字，存入excel中【使用百度的通用文字识别】

【Python 实战】---- 批量识别图片中的文字，存入excel中【使用百度的通用文字识别】

分析 1. 获取信息图片示例 2. 运行实例 3. 运行结果 4. 各个文件的位置 实现 1. 需求分析 识别图片中的文字【采用百度的通用文字识别】；文字筛选，按照分类获取对应的文本；采用 openpyxl 实现将数据存入 excel 中。2. 获取 access_token 获取本地缓存的
阅读更多...
双虚拟机实现数据库自动备份

双虚拟机实现数据库自动备份

FTP的使用&#xff1a; 1.安装FTP 1、检测系统有没有安装ftp&#xff0c;执行命令&#xff1a; rpm -qa | grep ftp若存在用rpm命令移除后再行安装&#xff0c;执行命令&#xff1a; rpm -e vsftpd-3.0.2-9.e17.x86_642、如果没有安装&#xff0c;则在线安装ftp&#xff0c…
阅读更多...
[深度学习实战]基于PyTorch的深度学习实战(补充篇)[RNN和LSTM基本原理、PyTorch中的LSTM、Embedding层]

[深度学习实战]基于PyTorch的深度学习实战(补充篇)[RNN和LSTM基本原理、PyTorch中的LSTM、Embedding层]

目录 一、前言二、RNN和LSTM基本原理2.1 长期依赖问题2.2 LSTM 网络2.3 LSTM 的核心思想2.4 逐步理解 LSTM2.5 LSTM 的变体2.5.1 coupled 忘记门和输入门2.5.2 GRU 三、PyTorch中的LSTM四、Embedding层五、后记 PyTorch——开源的Python机器学习库 一、前言 写这部分的文章很耗…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023