当前位置: 首页 > news >正文

SpringMVC:整合 SSM 下篇

文章目录

  • SpringMVC - 05
  • 整合 SSM 下篇
  • 一、设计页面
    • 1. 首页:index.jsp
    • 2. 展示书页面:showBooks.jsp
    • 3. 增加书页面:addBook.jsp
    • 4. 修改书页面:updateBook.jsp
    • 5. 总结
  • 二、控制层
    • 1. 查询全部书
    • 2. 增加书
    • 3. 修改书
    • 4. 删除书
    • 5. 搜索书
  • 三、总结
  • 四、说明
  • 注意:

SpringMVC - 05

整合 SSM 下篇

在上篇的基础上,对界面进行优化,并添加新的功能,如:增加书、修改书、删除书、以及搜索书。

前端页面的设计由前端开源工具库 Bootstrap 完成:官网点此进入。

一、设计页面

1. 首页:index.jsp

功能:提供一个链接,进入展示书的页面。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>首页</title><style>a {text-decoration: none;color: green;font-size: 18px;}h1 {width: 180px;height: 38px;margin: 100px auto;text-align: center;line-height: 38px;background: lightgoldenrodyellow;border-radius: 5px;}</style>
</head>
<body><h1><a href="${pageContext.request.contextPath}/wed/select">进入书籍页面</a></h1>
</body>
</html>

效果

2. 展示书页面:showBooks.jsp

功能:展示所有书,并且提供增加书、修改书以及搜索书的链接。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %><!doctype html>
<html lang="zh-CN">
<head><!-- 必须的 meta 标签 --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap 的 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><title>主页面</title>
</head>
<body>
<div class="container"><div class="row"><div class="col-md-12 column"><br><div class="alert alert-success" role="alert"><h3>书的清单 -- 显示所有书的信息</h3></div><br><nav class="navbar navbar-light bg-light"><div class="container-fluid"><form class="form-inline"><a class="btn btn-primary" href="${pageContext.request.contextPath}/wed/toAdd">增加书</a>&nbsp;&nbsp;<a class="btn btn-primary" href="${pageContext.request.contextPath}/wed/select">查看全部书</a></form><form action="${pageContext.request.contextPath}/wed/search" method="get" class="form-inline my-2 my-lg-0"><span style="color: red;font-weight: bold">${error}</span>&nbsp;&nbsp;<input class="form-control mr-sm-2" type="search" placeholder="填入要查找的书" name="searchBookName" aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">查找</button></form></div></nav><table class="table table-hover table-striped"><thead><tr><th>书的编号</th><th>书的名称</th><th>书的数量</th><th>详情(放置位置)</th><th>操作</th></tr></thead><tbody><c:forEach var="book" items="${booksList}"><tr><td>${book.bookID}</td><td>${book.bookName}</td><td>${book.bookCounts}</td><td>${book.detail}</td><td><a href="${pageContext.request.contextPath}/wed/toUpdate/${book.bookID}">修改</a>&nbsp; | &nbsp;<a href="${pageContext.request.contextPath}/wed/delete/${book.bookID}">删除</a></td></tr></c:forEach></tbody></table></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script></body>
</html>

效果

3. 增加书页面:addBook.jsp

功能:增加书。

<%@ page contentType="text/html;charset=UTF-8" language="java" %><!doctype html>
<html lang="zh-CN">
<head><!-- 必须的 meta 标签 --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap 的 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><title>增加书</title>
</head>
<body>
<div class="container"><div class="row clearfix"><div class="col-md-12 column"><br><div class="alert alert-primary" role="alert"><h3>增加书</h3></div><br><form action="${pageContext.request.contextPath}/wed/add" method="get"><div class="form-group"><label for="bookName">书的名称</label><input type="text" class="form-control" name="bookName" id="bookName" required></div><div class="form-group"><label for="bookCounts">书的数量</label><input type="text" class="form-control" name="bookCounts" id="bookCounts" required></div><div class="form-group"><label for="detail">详情(放置位置)</label><input type="text" class="form-control" name="detail" id="detail" required></div><div class="form-group form-check"><input type="checkbox" class="form-check-input" id="check" required><label class="form-check-label" for="check">核对信息</label></div><input type="submit" class="btn btn-primary" value="提交"></form></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script></body>
</html>

效果

4. 修改书页面:updateBook.jsp

功能:修改书。

<%@ page contentType="text/html;charset=UTF-8" language="java" %><!doctype html>
<html lang="zh-CN">
<head><!-- 必须的 meta 标签 --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap 的 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><title>修改信息</title>
</head>
<body>
<div class="container"><div class="row clearfix"><div class="col-md-12 column"><br><div class="alert alert-primary" role="alert"><h3>修改信息</h3></div><br><form action="${pageContext.request.contextPath}/wed/update" method="get"><!-- 隐藏域 --><input type="hidden" name="bookID" value="${Ubook.bookID}"><div class="form-group"><label for="bookName">书的名称</label><input type="text" class="form-control" name="bookName" value="${Ubook.bookName}" id="bookName" required></div><div class="form-group"><label for="bookCounts">书的数量</label><input type="text" class="form-control" name="bookCounts" value="${Ubook.bookCounts}" id="bookCounts" required></div><div class="form-group"><label for="detail">详情(放置位置)</label><input type="text" class="form-control" name="detail" value="${Ubook.detail}" id="detail" required></div><input type="submit" class="btn btn-primary" value="修改提交"></form></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script></body>
</html>

效果

5. 总结

  • 超链接<a href="${pageContext.request.contextPath}/请求路径">xxx内容</a>

  • 以按钮的样式实现超链接<a class="btn btn-primary" href="${pageContext.request.contextPath}/请求路径">xxx内容</a> ,其中 btn-primary 指定按钮的颜色;

  • 行内元素<span style="color: green;font-weight: bold">${键}</span> ,可以指定值显示的样式,如颜色、粗细等,如果没有取到值,则不显示;

  • 将表单、表格等都放在容器的栅格中:<div class="container-fluid"> ,在容器中可以进行 Bootstrap 的栅格系统设置,学习链接:点此进入;

  • 设置导航栏 navbar 时,可以在导航栏中放置容器 container,再在容器中放置表单 form;

  • 通过 <form class="form-inline"> 可以使得表单下的内容是在一行的,如果表单要提交,则 form 中一定要有 actionmethod 属性,用来指定表单提交的路径以及提交方式,并且还要有提交的按钮:<input type="submit" class="btn btn-primary" value="提交"><button type="submit" class="btn btn-outline-success">提交</button>

  • 隐藏域:前端不显示数据,但是也会将数据提交给后台;

  • 空格&nbsp;

  • 换行<br>

  • 在前端页面取值用 EL 表达式:{键}

  • 所需要的组件可以随时去前端开源工具库 Bootstrap 查找。


二、控制层

控制层作用调用业务层执行业务,跳转页面。

用户进行的每一个操作都有控制类中的一个方法相对应。

1. 查询全部书

// 查询全部的书籍,并且返回到页面
@RequestMapping("/select")
public String select(Model model) {List<Books> booksList = booksService.selectAllBooks();model.addAttribute("booksList", booksList);return "showBooks";
}

说明

  • 对象调用业务层 selectAllBooks 方法,查询到全部书,存放在集合中;
  • 用 Model 对象封装要传递给前端的数据,这样前端页面中就可以通过 EL 表达式 {booksList} 来取到集合对象。

2. 增加书

// 跳转到增加书籍页面
@RequestMapping("/toAdd")
public String toAdd() {return "addBook";
}// 添加书籍,并且跳转到主页面
@RequestMapping("/add")
public String add(Books books) {booksService.addBook(books);return "redirect:/wed/select";
}

说明

  • 当用户在页面点击【增加书】时,执行第一个请求,跳转到增加书的页面;
  • 用户填写完书的信息后,点【提交】,执行第二个请求,先执行增加业务后,重定向到查询全部书的请求(增加完书后再查询一次全部书)。

3. 修改书

// 跳转到修改信息页面
@RequestMapping("/toUpdate/{bookID}")public String toUpdate(@PathVariable int bookID, Model model) {Books books = booksService.selectBook(bookID);model.addAttribute("Ubook", books);return "updateBook";
}// 修改书籍,并且跳转到主页面
@RequestMapping("/update")
public String update(Books books) {booksService.updateBook(books);return "redirect:/wed/select";
}

说明

  • 当用户在页面点击【修改】时,执行第一个请求,跳转到修改的页面;
    • 这里需要知道要修改哪一本书,因此前端要把书的编号信息作为参数传递给后端,这里使用 RestFul 风格传参
    • 跳转页面时,将要修改的书的全部信息封装后,传递给要跳转的页面,这样在修改书的页面中就可以取到并显示原有的信息。
  • 用户修改完书的信息后,点【修改提交】,执行第二个请求,先执行修改业务后,重定向到查询全部书的请求(修改完书后再查询一次全部书)。

4. 删除书

// 删除书籍
@RequestMapping("/delete/{bookID}")
public String delete(@PathVariable int bookID) {booksService.deleteBook(bookID);return "redirect:/wed/select";
}

说明

  • 当用户在页面点击【删除】时,执行该请求,先执行删除业务后,重定向到查询全部书的请求(删除完书后再查询一次全部书);
  • 这里需要知道要删除哪一本书,因此前端要把书的编号信息作为参数传递给后端,这里使用 RestFul 风格传参

5. 搜索书

添加新功能时,要从底层开始依次增加:dao 接口 --> 实现类:编写 sql 语句 --> 业务接口 --> 业务实现类 --> 控制类。

dao 接口,定义方法:

// 搜索
List<Books> searchBooksByName(@Param("bookName") String bookName);

dao 接口实现类,sql 语句使用模糊查询

<select id="searchBooksByName" parameterType="java.lang.String" resultType="Books">select * from ssmbuild.books where bookName like #{bookName}
</select>

业务接口:

// 搜索
List<Books> searchBooksByName(String bookName);

业务实现类,实现业务方法:

public List<Books> searchBooksByName(String bookName) {return mapper.searchBooksByName("%" + bookName + "%");
}

控制类:

// 搜索书籍
@RequestMapping("/search")
public String search(@RequestParam("searchBookName") String bookName, Model model) {List<Books> booksList = booksService.searchBooksByName(bookName);if (booksList.isEmpty()) {model.addAttribute("error", "未查到");}model.addAttribute("booksList", booksList);return "showBooks";
}

说明

  • 当用户在页面搜索框内搜索时,执行该请求,执行搜索业务后,将搜索到的书存放在集合中;
  • 用 Model 对象封装要传递给前端的数据,这样前端页面中就可以通过 EL 表达式 {booksList} 来取到集合对象;
  • 在没有搜索到数据时,用 Model 对象封装 error 数据,这样在前端页面中就可以通过 EL 表达式 ${error} 来显示“未查到”。

查到书的实现效果

未查到书的实现效果


三、总结

  1. 前端页面给后端传递数据

    • 如果是页面中已经存在的数据,可以用 RestFul 风格传参:

      • 前端:请求地址为:/路径/参数的值
      • 后端:请求地址为:/路径/{方法中的参数名} ,并且方法的参数前需要加注解 @PathVariable 声明。
    • 如果是需要用户输入后,通过表单提交的数据:

      • 前端:请求地址为:/路径 不需要加参数,但是输入的数据必须要有 name 属性;
      • 后端:请求地址为:/路径 不需要加参数,但是方法的参数前需要加注解 @RequestParam(“name的值”) 声明,如果参数是一个对象,则可以直接在方法的参数中定义一个对象即可。

  1. 后端给前端页面传递数据:用 Model 对象封装要传递给前端的数据,这样前端页面中就可以通过 EL 表达式 ${键} 来取到数据。
  2. 添加新功能时,要从底层开始依次增加:dao 接口 --> 实现类:编写 sql 语句 --> 业务接口 --> 业务实现类 --> 控制类。
  3. 控制类的方法中,重定向不用写项目名。
  4. 重定向不能直接访问 WEB-INF 下的资源,但可以通过重定向到请求地址,来间接访问,如:return "redirect:/wed/select"
  5. 在 SSM 的项目中,在服务器开启时,如果手动更改了数据库的数据,前端显示数据不能同步更新,使用 SpringBoot 可以解决。
  6. 可以看懂前端的代码。
  7. 上篇中主要是搭框架,中篇是对上篇的优化总结,下篇中是进行了具体的开发,开发时要逐步完善功能,不断进行改进

四、说明

整合 SSM 上篇:点此进入
整合 SSM 中篇:点此进入


注意:

前端开源工具库 Bootstrap 官网:https://v4.bootcss.com/,注意使用 Bootstrap 有特定的要求,可以通过中文文档进行学习和使用。

相关文章:

SpringMVC:整合 SSM 下篇

文章目录 SpringMVC - 05整合 SSM 下篇一、设计页面1. 首页&#xff1a;index.jsp2. 展示书页面&#xff1a;showBooks.jsp3. 增加书页面&#xff1a;addBook.jsp4. 修改书页面&#xff1a;updateBook.jsp5. 总结 二、控制层1. 查询全部书2. 增加书3. 修改书4. 删除书5. 搜索书…...

[2023-年度总结]凡是过往,皆为序章

原创/朱季谦 2023年12月初&#xff0c;傍晚&#xff0c;在深圳的小南山看了一场落日。 那晚我们坐在山顶的草地上&#xff0c;拍下了这张照片——仿佛在秋天的枝头上&#xff0c;结出一颗红透的夕阳。 这一天很快就会随着夜幕的降临&#xff0c;化作记忆的碎片&#xff0c;然…...

OpenCV之像素操作

我们首先了解一下什么是像素&#xff0c;计算机中是如何存储图像&#xff0c;以及opencv是如何表示图像的。 像素&#xff1a; 像素是指由图像的小方格即所谓的像素(pixel)组成的&#xff0c;这些小方块都有一个明确的位置和被分配的色彩数值&#xff0c;而这些一小方格的颜色…...

Transfer Learning(迁移学习)

1. 什么是迁移学习 迁移学习(Transfer Learning)是一种机器学习方法&#xff0c;就是把为任务 A 开发的模型作为初始点&#xff0c;重新使用在为任务 B 开发模型的过程中。迁移学习是通过从已学习的相关任务中转移知识来改进学习的新任务&#xff0c;虽然大多数机器学习算法都…...

NPM 的使用技巧:简化 JavaScript 开发和依赖管理

前言 NPM&#xff08;Node Package Manager&#xff09;是 JavaScript 生态系统中最流行的包管理工具之一。本文将介绍一些有用的 NPM 使用技巧&#xff0c;帮助开发者更好地利用 NPM 管理项目依赖、执行脚本、发布自己的包以及解决常见问题。 1. 初始化项目 使用 NPM 初始化…...

统计和绘图软件GraphPad Prism mac功能特点

GraphPad Prism mac是一款专业的统计和绘图软件&#xff0c;主要用于生物医学研究、实验设计和数据分析。 GraphPad Prism mac功能和特点 数据导入和整理&#xff1a;GraphPad Prism 可以导入各种数据格式&#xff0c;并提供直观的界面用于整理、编辑和管理数据。用户可以轻松…...

WWW 指南-万维网联盟(World Wide Web)

WWW - 万维网联盟 WWW通常称为网络。 web是一个世界各地的计算机网络。 电脑在Web上使用标准语言沟通。 万维网联盟&#xff08;W3C&#xff09;制定了Web标准 什么是WWW&#xff1f; WWW 代表 World Wide Web(万维网)万维网常常被称为 网络网络是世界各地的计算机网络网络中…...

Linux网络编程之TCP/IP实现高并发网络服务器设计指南

目录 引言&#xff1a; 多进程服务器 例程分享&#xff1a; 多线程服务器 例程分享&#xff1a; I/O多路复用服务器 select 例程分享&#xff1a; poll 例程分享&#xff1a; epoll 例程分享&#xff1a; 总结建议 引言&#xff1a; 随着互联网的迅猛发展&#xff…...

【SpringBoot实战】基于阿里云实现文件上传

【SpringBoot实战】基于阿里云实现文件上传 在实际项目开发中&#xff0c;不可避免地会使用到阿里云OSS进行文件存储。尽管阿里云有详细的开发文档&#xff0c;但本篇博客的目的是让我们能够用简明的代码快速实现这个功能。 引入依赖 <dependencies><!-- 阿里云oss…...

大数据技术学习笔记(十一)—— Flume

目录 1 Flume 概述1.1 Flume 定义1.2 Flume 基础架构 2 Flume 安装3 Flume 入门案例3.1 监控端口数据3.2 实时监控单个追加文件3.3 实时监控目录下多个新文件3.4 实时监控目录下的多个追加文件 4 Flume 进阶4.1 Flume 事务4.2 Flume Agent 内部原理4.3 Flume 拓扑结构4.3.1 简单…...

电路设计时,继电器线圈、风扇电机绕组等感性负载必须有续流二极管。

续流二极管(也常被称为“自由轮流二极管”或“反向并联二极管”)在感性负载电路中的应用非常重要,尤其是在继电器线圈、风扇电机绕组等设备中。感性负载是指那些在其线圈中会产生感应电动势的负载,例如电动机、变压器和继电器等。当这些设备的电源被切断时,它们的线圈会因…...

Mongodb基础介绍与应用场景

NoSql 解决方案第二种 Mongodb MongoDB 是一款开源 高性能 无模式的文档型数据库 当然 它是NoSql数据库中的一种 是最像关系型数据库的 非关系型数据库 首先 最需要注意的是 无模式的文档型数据库 这个需要后面我们看到它的数据才能明白 其次是 最像关系型数据库的非关系型数据…...

mysql参数配置binlog

官网地址&#xff1a; MySQL :: MySQL Replication :: 2.6.4 Binary Logging Options and Variables 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. MySQL 复制 / ... / 二进制日志记录选项和变量 2.6.4 二进…...

pytorch常用的几个函数详解

文章目录 view基本用法自动计算维度保持原始数据不变 t函数功能语法返回值示例注意事项 permute() 函数基本概念permute() 函数的使用 unsqueeze() 函数基本概念unsqueeze() 函数的使用 squeeze() 函数基本概念squeeze() 函数的使用 transpose() 函数基本概念transpose() 函数的…...

Linux下安装Flume

1 下载Flume Welcome to Apache Flume — Apache Flume 下载1.9.0版本 2 上传服务器并解压安装 3 删除lib目录下的guava-11.0.2.jar &#xff08;如同服务器安装了hadoop&#xff0c;则删除&#xff0c;如没有安装hadoop则保留这个文件&#xff0c;否则无法启动flume&#…...

20231225使用BLE-AnalyzerPro WCH升级版BLE-PRO蓝牙分析仪抓取BLE广播数据

20231225使用BLE-AnalyzerPro WCH升级版BLE-PRO蓝牙分析仪抓取BLE广播数据 2023/12/25 20:05 结论&#xff1a;硬件蓝牙分析仪 不一定比 手机端的APK的效果好&#xff01; 亿佰特E104-2G4U04A需要3片【单通道】&#xff0c;电脑端的UI为全英文的。 BLE-AnalyzerPro WCH升级版B…...

.net6使用Sejil可视化日志

&#xff08;关注博主后&#xff0c;在“粉丝专栏”&#xff0c;可免费阅读此文&#xff09; 之前介绍了这篇.net 5使用LogDashboard_.net 5logdashboard rootpath-CSDN博客 这篇文章将会更加的简单&#xff0c;最终的效果都是可视化日志。 在程序非常庞大的时候&…...

mysql(51) : 大数据导出为insert

代码 import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; import java.math.BigDecimal; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.Objects;public class 大数据导出为insert {public …...

MFC查找错误的方法

在visual studio2005上Debug总是会出现各种问题&#xff0c;比如指针错误&#xff0c;乱码等&#xff0c;无法正确查看变量的值&#xff0c;这时候可以使用AfxMessageBox()方法对数据进行弹窗输出&#xff0c;但AfxMessageBox()函数只支持CString数据输出&#xff0c;我们就需要…...

Jave EE 网络原理之网络层与数据链路层

文章目录 1. 网络层1.1 IP 协议1.1.1 协议头格式1.1.2 地址管理1.1.2.1 认识 IP 地址 1.1.3 路由选择 2. 数据链路层2.1 认识以太网2.1.1 以太网帧格式2.1.2 DNS 应用层协议 1. 网络层 网络层要做的事情&#xff0c;主要是两个方面 地址管理 &#xff08;制定一系列的规则&am…...

ElasticSearch 使用映射定义索引结构

动态映射 dynamic 可选值解释true默认值&#xff0c;启用动态映射&#xff0c;新增的字段会添加到映射中runtime查询时动态添加到映射中false禁用动态映射&#xff0c;忽略未知字段strict发现未知字段&#xff0c;抛出异常 显示映射 创建映射 PUT user {"mappings&qu…...

HTML---网页布局

目录 文章目录 一.常见的网页布局 二.标准文档流 标准文档流常见标签 三.display属性 四.float属性 总结 一.常见网页布局 二.标准文档流 标准文档流常见标签 标准文档流的组成 块级元素<div>、<p>、<h1>-<h6>、<ul>、<ol>等内联元素<…...

python 普通存款(单利)计算公式:

python 普通存款&#xff08;单利&#xff09;计算公式&#xff1a; 代码如下&#xff1a; #普通存款 单利计算公式&#xff1a;a:原值&#xff0c;n:计算年限&#xff0c;li&#xff1a;利率&#xff08;小数&#xff09;, def danli(a,n,li):print("普通存款(单利)计…...

什么是 PHP 内存溢出 ?遇到了要如何解决呢 ?

PHP内存溢出指的是在PHP应用程序中&#xff0c;分配给脚本执行的内存超出了PHP配置文件中设置的限制。当脚本尝试使用比可用内存更多的内存时&#xff0c;就会发生内存溢出错误。 一、内存溢出可能由以下几个原因引起&#xff1a; 循环引用&#xff1a;如果存在循环引用&#…...

本地使用 docker 运行OpenSearch + Dashboard + IK 分词插件

准备基础镜像 注意一定要拉取和当前 IK 分词插件版本一致的 OpenSearch 镜像: https://github.com/aparo/opensearch-analysis-ik/releases 写这篇文章的时候 IK 最新版本 2.11.0, 而 dockerhub 上 OpenSearch 最新版是 2.11.1 如果版本不匹配的话是不能用的, 小版本号对不上…...

【JavaEE初阶一】线程的概念与简单创建

1. 认识线程&#xff08;Thread&#xff09; 1.1 关于线程 1.1.1 线程是什么 由前一节的内容可知&#xff0c;进程在进行频繁的创建和销毁的时候&#xff0c;开销比较大&#xff08;主要体现在资源的申请和释放上&#xff09;&#xff0c;线程就是为了解决上述产生的问题而提…...

三叠云工程劳务管理,优化建筑施工管理,提升效率与质量

随着建筑行业的蓬勃发展&#xff0c;工程施工现场管理变得愈发复杂。传统的人员管理方式已经无法满足企业快速发展的需求。如何提高施工效率、优化人力资源管理成为了建筑企业亟待解决的问题。逐渐走向数字化的工程建设行业&#xff0c;急需一种足以匹配这一时代变革、高效管理…...

RocketMQ连接报错RemotingConnectException: connect to <192.168.57.129:9876>解决

文章目录 前言一、RocketMQ 连接报错处理1.1 报错信息1.2 修改 broker.conf 文件1.3 Linux 开放端口1.4 项目启动成功 前言 上一篇文章&#xff1a;基于SpringBoot整合RocketMQ异步发送短信功能在项目启动的过程中报了 RocketMQ 连接错误。针对这个问题&#xff0c;本文给予记…...

设计模式--桥接模式

实验9&#xff1a;桥接模式 本次实验属于模仿型实验&#xff0c;通过本次实验学生将掌握以下内容&#xff1a; 1、理解桥接模式的动机&#xff0c;掌握该模式的结构&#xff1b; 2、能够利用桥接模式解决实际问题。 [实验任务]&#xff1a;两个维度的桥接模式 用桥接模式…...

redis基本用法学习(C#调用StackExchange.Redis操作redis)

StackExchange.Redis是基于C#的高性能通用redis操作客户端&#xff0c;也属于常用的redis客户端之一&#xff0c;本文学习其基本用法。   新建Winform项目&#xff0c;在Nuget包管理器中搜索并安装StackExchange.Redis&#xff0c;如下图所示&#xff1a;   StackExchange.…...

单挑力扣(LeetCode)SQL题:1308. 不同性别每日分数总计

相信很多学习SQL的小伙伴都面临这样的困境&#xff0c;学习完书本上的SQL基础知识后&#xff0c;一方面想测试下自己的水平&#xff1b;另一方面想进一步提升&#xff0c;却不知道方法。 其实&#xff0c;对于技能型知识&#xff0c;我的观点一贯都是&#xff1a;多练习、多实…...

Vue3组合式-依赖注入provideinject

一、注意点 专门强调了是3.0且是组合式&#xff0c;不是2.0不支持也不是选项式不支持provide&&inject&#xff0c;是支持但是有很明显的弊端&#xff0c;不建议使用 二、场景 官方的解释: 通常情况下&#xff0c;当我们需要从父组件向子组件传递数据时&#xff0c;会…...

SRE 与 DevOps 的不同之处

尽管网站可靠性工程 (SRE) 理念早在 2003 年就由 Google 的 Ben Treynor Sloss 提出&#xff0c;但其近年来却一直受到追捧。随着 DevOps 实践已经在许多组织中牢固确立&#xff0c;两者之间的冲突是否已经显现&#xff1f;SRE 只不过是一种过时的趋势吗&#xff1f;是 SRE 补充…...

【湖仓一体尝试】MYSQL和HIVE数据联合查询

爬了两天大大小小的一堆坑&#xff0c;今天把一个简单的单机环境的流程走通了&#xff0c;记录一笔。 先来个完工环境照&#xff1a; mysqlhadoophiveflinkicebergtrino 得益于IBM OPENJ9的优化&#xff0c;完全启动后的内存占用&#xff1a; 1&#xff09;执行联合查询后的…...

SpringCloud跨服务调用失败Seata无法回滚解决办法

遇到的问题 在微服务项目中 有A、B、C三个服务 其中 A调用B服务 &#xff0c;B调用C&#xff0c; 这些就是跨服务调用了&#xff0c;在A服务中 还调用了一个当前模块执行插入数据的方法(在这里我就叫它为AA 也就是mybatis/spring管理的本地事务) A服务开启全局事务注解 Globa…...

OSG三维渲染引擎编程学习之一百零一:“第十一章:OSG粒子” 之 “11.2 粒子模拟过程”

目录 第十一章 OSG粒子 11.2 粒子模拟过程 第十一章 OSG粒子 虚拟现实中有很多效果,如雨效、雪效、雾效等,这些都可以通过粒子条统来实现。一个真实的粒子系统的模式能使三维场景达到更好的效果。 粒子系统是一个非常复杂的粒子模拟过程。在OSG中,专门定义了新的名字空间o…...

Autosar CAN开发03(从实际应用认识CAN总线的物理层)

建议同时阅读本专栏的&#xff1a; Autosar CAN开发03&#xff08;从实际应用认识CAN总线的物理层&#xff09; Autosar CAN开发04&#xff08;从实际应用认识CAN报文&#xff09; Autosar CAN开发05&#xff08;从实际应用认识CAN波特率&#xff09; 前言 在上一章的《AU…...

vue中父子组件传值

父传子 传: 在"标签"上传属性 <Card :name"name"></Card> 接: 在props中 export default {props: {name: String},setup(props) {console.log(props.name);} } 子传父 传: 触发,给一个事件传值 setup(props,{emit}) {emit("get…...

【网络编程】基于UDP数据报实现回显服务器/客户端程序

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】【Java系列】 本专栏旨在分享学习网络编程的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 前言 我们如果…...

sqlilabs第三十二三十三关

Less-32&#xff08;GET - Bypass custom filter adding slashes to dangerous chars) 手工注入 由 宽字符注入可知payload 成功触发报错 http://192.168.21.149/Less-32/ ?id1%df 要写字符串的话直接吧字符串变成ascii码 注意16进制的表示方式 自动注入 sqlmap -u http:…...

第二十一章博客

计算机应用实现了多台计算机间的互联&#xff0c;使得它们彼此之间能够进行数据交流。网络应用程序就是在已连接的不同计算机上运行的程序&#xff0c;这些程序借助于网络协议&#xff0c;相互之间可以交换数据。编写网络应用程序前&#xff0c;首先必须明确所要使用的网络协议…...

PSoc62™开发板之按键控制LED

实验目的 使用板子上的用户自定义按键控制LED亮灭&#xff0c;当按键按下时LED亮起来&#xff0c;不按下则不亮 电路图 按键电路 板子有两组按键&#xff0c;分别是系统复位按键和用户自定义按键&#xff0c;这里我们选择控制用户自定义按键&#xff0c;可以看到MCU_USER_B…...

Vue-Pinina基本教程

前言 官网地址&#xff1a;Pinia | The intuitive store for Vue.js (vuejs.org) 看以下内容&#xff0c;需要有vuex的基础&#xff0c;下面很多概念会直接省略&#xff0c;比如state、actions、getters用处含义等 1、什么是Pinina Pinia 是 Vue 的存储库&#xff0c;它允许您跨…...

大批量数据导出csv,平替导出excel性能优化解决方案封装工具类

阿丹&#xff1a; 有些业务逻辑需要在导出非常大量的数据&#xff0c;几百甚至几千万的数据这个时候再导出excel来对于性能都不是很友好&#xff0c;这个时候就需要替换实现思路来解决这个问题。 本文章提供了两种解决的方案&#xff0c;也是两种从数据库中拿取数据的方式一种是…...

C++ Qt开发:Charts绘制各类图表详解

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍TreeWidget与QCharts的常用方法及灵活运用。 …...

【SassVue】仿网易云播放器动画

简介 仿网易云播放动画 效果图&#xff08;效果图&#xff09; 最终成品效果 动画组件 src/components/music/MusicPlayAnimate.vue <template><div class"music-play"><div></div><div></div><div></div></di…...

CentOS进入单用户模式

一、重启 二、出现内核选项 按“e” 三、编辑这一行 输入 rw init/sysroot/bin/sh 四、进入单用户模式 ctrlx 进入 五、切换目录 chroot /sysroot 六、然后你就操作你的系统了。 修改密码等等...

微信小程序~如何设置页面的背景色

微信小程序~如何设置页面的背景色 众所周知&#xff0c;微信小程序每个页面由.json&#xff0c;.scss&#xff0c;.ts&#xff0c;.wxml这四个文件组成。 有的小伙伴会发现&#xff0c;需要给页面加背景色的时候&#xff0c;只需在此页面的.scss文件中写个page{background-colo…...

图灵日记之java奇妙历险记--输入输出方法数组

目录 输入输出输出到控制台从键盘输入使用 Scanner 读取字符串/整数/浮点数使用 Scanner 循环读取 猜数字方法方法定义方法调用的执行过程实参和形参的关系(重要)方法重载 数组数组的创建数组的初始化动态初始化静态初始化 数组的使用元素访问遍历数组 数组是引用类型null数组应…...

CSS新手入门笔记整理:CSS3弹性盒模型

特点 子元素宽度之和小于父元素宽度&#xff0c;所有子元素最终的宽度就是原来定义的宽度。子元素宽度之和大于父元素宽度&#xff0c;子元素会按比例来划分宽度。在使用弹性盒子模型之前&#xff0c;必须为父元素定义“display:flex;”或“display:inline-flex;”。 弹性盒子…...