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 有特定的要求,可以通过中文文档进行学习和使用。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringMVC系列之技术点定向爆破二

SpringMVC的运行流程 客户端发送请求 tomcat接收对应的请求 SpringMVC的核心调度器DispatcherServlet接收到所有请求 请求地址与RequestMapping注解进行匹配&#xff0c;定位到具体的类和具体的处理方法&#xff08;封装在Handler中&#xff09; 核心调度器找到Handler后交…

成功案例分享:物业管理小程序如何助力打造智慧社区

随着科技的进步和互联网的普及&#xff0c;数字化转型已经渗透到各个行业&#xff0c;包括物业管理。借助小程序这一轻量级应用&#xff0c;物业管理可以实现线上线下服务的无缝对接&#xff0c;提升服务质量&#xff0c;优化用户体验。本文将详细介绍如何通过乔拓云网设计小程…

LeetCode刷题--- 目标和

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 http://t.csdnimg.cn/6AbpV 数据结构与算法 http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述递归递归、搜…

基于SSM的剧本杀预约系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的剧本杀预约系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring Sp…

easyrecovery数据恢复软件15安装下载免注册版本下载

说起数据恢复软件&#xff0c;相信没有小伙伴不知道easyrecovery这个软件吧&#xff0c;该软件具有快捷、高效、便捷的特点&#xff0c;且提供的功能也非常全面&#xff0c;不仅可以恢复各样被删除的文件、视频、图片等&#xff0c;还可以支持SD卡数据恢复&#xff0c;TF卡等各…

系列一、MQ简介

一、MQ简介 1.1、概述 MQ&#xff08;Message Queue&#xff09;&#xff0c;是一种提供消息队列服务的中间件&#xff0c;也称为消息中间件&#xff0c;是一套提供了消息&#xff08;消息即数据&#xff0c;一般消息的体量不会很大&#xff09;生产、存储、消费全过程的API软…

第11章 GUI Page421~422 步骤六 支持文字

运行效果&#xff1a; 关键代码&#xff1a; 新增头文件&#xff1a; //item_text.hpp #ifndef ITEM_TEXT_HPP_INCLUDED #define ITEM_TEXT_HPP_INCLUDED #include "item_i.hpp"class TextItem : public IItem { public:TextItem(): _startPosition(0, 0), _endPos…

【华为鸿蒙系统学习】- 如何利用鸿蒙系统进行App项目开发|自学篇

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 创建鸿蒙第一个App项目 项目创建 工程目录区 预览区 运行Hello World 基本工程目录 ws:工…

关于“Python”的核心知识点整理大全36

目录 13.4.4 向下移动外星人群并改变移动方向 game_functions.py alien_invasion.py 13.5 射杀外星人 13.5.1 检测子弹与外星人的碰撞 game_functions.py alien_invasion.py 13.5.2 为测试创建大子弹 13.5.3 生成新的外星人群 game_functions.py alien_invasion.py …

Zookeeper-应用实战

Zookeeper Java客户端实战 ZooKeeper应用的开发主要通过Java客户端API去连接和操作ZooKeeper集群。 ZooKeeper官方的Java客户端API。 第三方的Java客户端API&#xff0c;比如Curator。 ZooKeeper官方的客户端API提供了基本的操作:创建会话、创建节点、读取节点、更新数据、…

7ADC模数转换器

一.模数转换原理 ADC模拟-数字转换器可以将引脚上连续变化的模拟电压转换成内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁。另外一种是DAC既是与前面相反&#xff0c;如PWM波&#xff0c;由于PWM电路简单且没有额外的功率损耗&#xff0c;更适用于惯性系统的…

损失函数,代价函数,梯度,优化器,学习率,学习率调度器

这些是机器学习中的概念。把这些概念迁移到CV领域要进行一定的抽象。 首先损失&#xff0c;损失是一组参数拟合出来的样本的预测值和样本的真实值之间的差异&#xff0c;损失是用来度量这种差异的&#xff0c;根据不同的拟合权重参数全局有一个对应的损失值&#xff0c;损失后…

随机问卷调查数据的处理(uniapp)

需求&#xff1a;问卷调查 1.返回的数据中包含单选、多选、多项文本框、单文本框、图片上传 2.需要对必填的选项进行校验 3.非必填的多项文本框内容 如果不填写 不提交 表单数据格式 res{"code": 0,"msg": null,"data": [{"executeDay&…

两个图片完美融合 泊松编辑

一、效果惊人 二、步骤 下载安装 https://github.com/Trinkle23897/Fast-Poisson-Image-Editing.git 执行 test 目录下的 python data.py下载数据 执行测试&#xff0c;可以看到效果了 $ fpie -s test1_src.jpg -m test1_mask.jpg -t test1_tgt.jpg -o result1.jpg -h1 -…

JNI学习(二)

静态注册 接着上篇博客学习 JNI函数 JNIEXPORT void JNICALL Java_com_example_jnidemo_TextDemo_setText(JNIEnv *env, jobject this, jstring string){ __android_log_print(ANDROID_LOG_ERROR, "test", "invoke set from C\n");char* str (char*)(*e…

【Unity】入门

文章目录 概述常用组件各类文件基础知识创建工程工程目录介绍五个窗口面板创建代码和场景 脚本与编程鼠标的输入键盘的输入代码来操作组件获取物体API资源的使用API定时调用与线程向量的基本运算预制体与实例 物理系统与组件案例实操作快捷键来源 Unity已广泛运用到各个领域&am…

如何在Windows上搭建WebDAV服务并通过内网穿透实现公网访问

文章目录 前言1. 安装IIS必要WebDav组件2. 客户端测试3. 使用cpolar内网穿透&#xff0c;将WebDav服务暴露在公网3.1 安装cpolar内网穿透3.2 配置WebDav公网访问地址 4. 映射本地盘符访问 前言 在Windows上如何搭建WebDav&#xff0c;并且结合cpolar的内网穿透工具实现在公网访…

结构型模式 | 适配器模式

一、适配器模式 1、原理 适配器模式&#xff08;Adapter&#xff09;&#xff0c;将一个类的接口转换成客户希望的另外一个接口&#xff0c;使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适配器模式主要分为三类&#xff1a;类适配器模式、对象适配器模式、接口…

【ARM Cortex-M 系列 5 -- RT-Thread renesas/ra4m2-eco 移植编译篇】

文章目录 RT-Thread 移植编译篇编译os.environ 使用示例os.putenv使用示例python from 后指定路径 编译问题_POSIX_C_SOURCE 介绍编译结果 RT-Thread 移植编译篇 本文以瑞萨的ra4m2-eco 为例介绍如何下载rt-thread 及编译的设置。 RT-Thread 代码下载&#xff1a; git clone …

T2I-Adapter: 让马良之神笔(扩散模型)从文本生成图像更加可控

文章信息 单位&#xff1a;北大深张健团队&#xff0c;腾讯ARC lab 源码: https://github.com/TencentARC/T2I-Adapter 图1. 插个DXL的渲染图&#xff0c;这么真实的光感&#xff0c;感觉PS都可以被取代了 目录 文章信息前言一、介绍二、相关工作1.图像合成与转换2 扩散模型3 适…