修改-回显数据

:::info 完成一个根据id进行查询数据的功能
所以直接命名为SelectById :::

流程图

image.png

编写BrandMapper.java

  1. package com.taotao.mapper;
  3. import com.taotao.pojo.Brand;
  4. import org.apache.ibatis.annotations.ResultMap;
  5. import org.apache.ibatis.annotations.Select;
  7. import java.util.List;
  9. /**
  10.  * create by 刘鸿涛
  11.  * 2022/3/29 16:12
  12.  */
  13. public interface BrandMapper {
  15.     //查询所有
  16.     List<Brand> selectAll();
  18.     //添加、新增数据
  19.     void add(Brand brand);
  21.     //修改-回显数据
  22.     Brand selectById(int id);
  23. }

编写BrandMapper.xml

:::info 这里注意应用resultmap :::

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper
  3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  4.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  5. <mapper namespace="com.taotao.mapper.BrandMapper">
  8.     <!--    查询所有功能-->
  9.     <select id="selectAll" resultMap="brandResultMap">
  10.         select *
  11.         from tb_brand
  12.     </select>
  15.     <resultMap id="brandResultMap" type="brand">
  16.         <result column="brandName" property="brand_name"></result>
  17.         <result column="companyName" property="company_name"></result>
  18.     </resultMap>
  20. <!--    添加功能-->
  21.     <insert id="add" >
  22.         insert into tb_brand
  23.         values (#{id},#{brand_name},#{company_name},#{ordered},#{description},#{status});
  24.     </insert>
  26. <!--    修改-回显数据-->
  27.     <select id="selectById" resultMap="brandResultMap">
  28.         select * from tb_brand where id = #{id};
  29.     </select>
  30. </mapper>

编写BrandService.java

  1. package com.taotao.service;
  3. import com.taotao.mapper.BrandMapper;
  4. import com.taotao.pojo.Brand;
  5. import com.taotao.util.SqlSessionfactoryUtils;
  6. import org.apache.ibatis.session.SqlSession;
  7. import org.apache.ibatis.session.SqlSessionFactory;
  9. import java.util.List;
  11. /**
  12.  * create by 刘鸿涛
  13.  * 2022/3/29 16:59
  14.  */
  15. @SuppressWarnings({"all"})
  16. public class BrandService {
  17.     SqlSessionFactory factory = SqlSessionfactoryUtils.getSqlSessionFactory();
  18.     /**
  19.      * 查询所有
  20.      * @return
  21.      */
  22.     public List<Brand> selectAll(){
  23.         //调用BrandMapper.selectAll()
  25.         //2.获取sqlSession
  26.         SqlSession sqlSession = factory.openSession();
  28.         //3.获取BrandMapper
  29.         BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
  31.         //4.调用方法
  32.         List<Brand> brands = mapper.selectAll();
  34.         //5.关闭资源
  35.         sqlSession.close();
  37.         return brands;
  38.     }
  40.     /**
  41.      * 添加数据
  42.      */
  43.     public void add(Brand brand){
  44.         //调用BrandMapper.add(Brand brand);
  46.         //2.获取sqlSession
  47.         SqlSession sqlSession = factory.openSession();
  49.         //3.获取BrandMapper
  50.         BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
  52.         //4.调用方法
  53.         mapper.add(brand);
  55.         //5.提交事务
  56.         sqlSession.commit();
  58.         //6.释放资源
  59.         sqlSession.close();
  60.     }
  62.     /**
  63.      * 通过id修改数据
  64.      * @param id
  65.      * @return
  66.      */
  67.     public Brand selectById(int id){
  68.         //调用BrandMapper.selectById(Integer id)
  70.         //获取sqlSession
  71.         SqlSession sqlSession = factory.openSession();
  73.         //获取BrandMapper
  74.         BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
  76.         //调用方法
  77.         Brand brand = mapper.selectById(id);
  79.         //提交事务
  80.         sqlSession.commit();
  82.         //6.释放资源
  83.         sqlSession.close();
  85.         return brand;
  86.     }
  87. }

编写表单

编写brand.jsp

:::info 连接selectByIdServlet.java获取id :::

  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: guigui
  4.   Date: 2022/3/29
  5.   Time: 10:32
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  10. <%@ page isELIgnored="false" %>
  12. <html>
  13. <head>
  14.     <title>Title</title>
  15. </head>
  16. <body>
  18. <input type="button" value="新增" id="add"><br>
  20. <hr>
  21. <table border="1" cellspacing="0" width="%80">
  22.     <tr>
  23.         <th>序号</th>
  24.         <th>品牌名称</th>
  25.         <th>公司名称</th>
  26.         <th>价格</th>
  27.         <th>描述</th>
  28.         <th>状态</th>
  29.     </tr>
  31. <c:forEach items="${brands}" var="brand" varStatus="status">
  32.     <tr align="center">
  33.         <td>${brand.id}</td>
  34.         <td>${brand.brand_name}</td>
  35.         <td>${brand.company_name}</td>
  36.         <td>${brand.ordered}</td>
  37.         <td>${brand.description}</td>
  38.         <c:if test="${brand.status == 1}">
  39.             <td>启用</td>
  40.         </c:if>
  42.         <c:if test="${brand.status != 1}">
  43.             <td>禁用</td>
  44.         </c:if>
  46.         <td><a href="/brand_demo/selectByIdServlet?id=${brand.id}">Update</a> <a href="">Delete</a></td>
  47.     </tr>
  48. </c:forEach>
  50.     <script>
  51.         document.getElementById("add").onclick = function (){
  52.             location.href = "/brand_demo/addBrand.jsp";
  53.         }
  54.     </script>
  56. </table>
  57. </body>
  58. </html>

编写Servlet

编写SelectByIdServlet.java

  1. package com.taotao.web;
  3. import com.taotao.pojo.Brand;
  4. import com.taotao.service.BrandService;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11. import java.io.IOException;
  13. /**
  14.  * create by 刘鸿涛
  15.  * 2022/3/31 21:25
  16.  */
  17. @WebServlet("/selectByIdServlet")
  19. public class SelectByIdServlet extends HttpServlet {
  20.     private BrandService service = new BrandService();
  21.     @Override
  22.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  23.         //接收id
  24.         String id = req.getParameter("id");
  26.         //调用service查询
  27.         Brand brand = service.selectById(Integer.parseInt(id));
  29.         //存储到request中
  30.         req.setAttribute("brand",brand);
  32.         //转发到update.jsp
  33.         req.getRequestDispatcher("/update.jsp").forward(req,resp);
  34.     }
  36.     @Override
  37.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  38.         this.doGet(req,resp);
  39.     }
  40. }

编写update.jsp

  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: guigui
  4.   Date: 2022/3/31
  5.   Time: 12:43
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <%--引用c标签--%>
  10. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  11. <%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%>
  12. <%--<%@ page isELIgnored="false" %>--%>
  13. <html>
  14. <head>
  15.     <meta charset="UTF-8">
  16.     <title>Title</title>
  17. </head>
  18. <style>
  19.     * {
  20.         margin: 0;        /*外边距*/
  21.         padding: 0;        /*内边距 */
  22.         font-family: "微软雅黑 Light";
  23.     }                                        /*清除所有默认样式*/
  25.     :root,form {                             /*选择最外层标签HTML*/
  26.         height: 70%;
  27.         display: flex;            /*改变元素*/
  28.         align-items: center;    /*垂直方向对齐方式*/
  29.         justify-content: center;    /*水平方向子项的对齐和分布方式*/
  30.     }
  32.     form {
  33.         flex-direction: column;        /*控制子项整体布局方向（从上到下）*/
  34.         padding: 40px;        /*上内边距*/
  35.         width: 300px;        /*盒子模型宽*/
  36.         box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);        /*应用阴影    a是alpha “透明 ”的意思*/
  37.     }
  39.     .form-title {
  40.         margin-bottom: 20px;    /*下外边距*/
  41.     }
  43.     .form-input,
  44.     .form-radio,
  45.     .form-button {
  46.         width: 100%;
  47.         margin-bottom: 20px;    /*下外边距*/
  48.     }
  50.     .form-input input {                            /*两个选择器具有包含关系*/
  51.         padding-left: 10px;
  52.         height: 40px;
  53.         width: 100%;
  54.         box-sizing: border-box;        /*盒子边框*/
  55.         border: 2px solid rgba(0, 0, 0, 0.82);        /*边框线宽度，样式（实线），颜色*/
  56.     }
  58.     .form-radio,
  59.     .form-button {
  60.         height: 40px;
  61.         display: flex;            /*控制元素类型*/
  62.         align-items: center;
  63.         justify-content: space-between;
  64.     }
  66.     .form-radio-choose {
  67.         display: flex;
  68.         align-items: center;
  69.     }
  71.     .form-radio-choose input {
  72.         margin-right: 20px;        /*右外边距*/
  73.         height: 30px;
  74.         width: 30px;
  75.     }
  77.     .form-button {
  78.         justify-content: center;
  79.         background-color: black;
  80.         color: white;
  81.     }
  82. </style>
  84.     <body>
  85.     <form action="/brand_demo/AddServlet" method="post">
  86.         <div class="form-title">
  87.             <h2>
  88.                 Update Data
  89.             </h2>
  90.         </div>                <!--块容器标记实现网页的规划和布局-->
  92.         <div class="form-input">
  93.             <input type="text" placeholder="Brand Name：" name="brand_name" value="${brand.brand_name}">
  94.         </div>
  96.         <div class="form-input">
  97.             <input type="text" placeholder="Company Name：" name="company_name" value="${brand.company_name}">
  98.         </div>
  100.         <div class="form-input">
  101.             <input type="text" placeholder="Price：" name="ordered" value="${brand.ordered}">
  102.         </div>
  104.         <div class="form-input">
  105.             <input type="text" placeholder="Remarks：" name="description" value="${brand.description}">
  106.         </div>
  108.         <c:if test="${brand.status == 0}">
  109.             <div class="form-radio">
  110.                 <div class="form-radio-title">Status:</div>
  112.                 <div class="form-radio-choose">
  113.                     <input type="radio" checked  value="1" name="status" />On
  114.                 </div>
  115.                 <div class="form-radio-choose">
  116.                     <input type="radio" value="0" name="status"/>Off
  117.                 </div>
  118.             </div>
  119.         </c:if>
  121.         <c:if test="${brand.status == 1}">
  122.             <div class="form-radio">
  123.                 <div class="form-radio-title">Status:</div>
  125.                 <div class="form-radio-choose">
  126.                     <input type="radio"   value="1" name="status" />On
  127.                 </div>
  128.                 <div class="form-radio-choose">
  129.                     <input type="radio"  checked value="0" name="status"/>Off
  130.                 </div>
  131.             </div>
  132.         </c:if>
  135.         <div class="form-button">
  136. <%--               <input type="radio" name="status" value="0">禁用--%>
  137. <%--                <input type="radio" name="status" value="1" >启用--%>
  138.     <input class="form-button" type="submit" value="Submit">
  139.         </div>
  140. <%--        <div class="form-button">--%>
  141. <%--&lt;%&ndash;            <p>重置</p>&ndash;%&gt;--%>
  142. <%--        </div>--%>
  143.     </form>
  144.     </body>
  145.     </html>

运行测试

:::info 回显数据完成，鼠标指针放在update选项时左下角网页可以得到id ::: image.png

回显功能

:::info 只有回显功能，不能通过此页面更改相应id数据 ::: image.png

修改-修改数据

流程图


image.png

编写BrandMapper.java

  1. package com.taotao.mapper;
  3. import com.taotao.pojo.Brand;
  4. import org.apache.ibatis.annotations.ResultMap;
  5. import org.apache.ibatis.annotations.Select;
  7. import java.util.List;
  9. /**
  10.  * create by 刘鸿涛
  11.  * 2022/3/29 16:12
  12.  */
  13. public interface BrandMapper {
  15.     //查询所有
  16.     List<Brand> selectAll();
  18.     //添加、新增数据
  19.     void add(Brand brand);
  21.     //修改-回显数据
  22.     Brand selectById(int id);
  24.     //修改-修改数据
  25.     void update(Brand brand);
  26. }

编写BrandMapper.xml

  1. <!--    修改-修改数据-->
  2.     <update id="update">
  3.         update tb_brand set brandName = #{brand_name},
  4.                             companyName = #{company_name},
  5.                             ordered = #{ordered},
  6.                             description = #{description},
  7.                             status = #{status} where id = #{id};
  8.     </update>

编写Service

:::info 编写BrandService :::

  1.     /**
  2.      * 修改
  3.      * @param brand
  4.      */
  5.     public void update(Brand brand){
  6.         //调用BrandMapper.add(Brand brand);
  8.         //2.获取sqlSession
  9.         SqlSession sqlSession = factory.openSession();
  11.         //3.获取BrandMapper
  12.         BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
  14.         //4.调用方法
  15.         mapper.update(brand);
  17.         //5.提交事务
  18.         sqlSession.commit();
  20.         //6.释放资源
  21.         sqlSession.close();
  22.     }

修改update.jsp

:::info 修改update.jsp数据传输到servlet
注意要传入id到servlet
注意id不要显示在update.jsp页面中(隐藏域),type = hidden :::

  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: guigui
  4.   Date: 2022/3/31
  5.   Time: 12:43
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <%--引用c标签--%>
  10. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  11. <%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%>
  12. <%--<%@ page isELIgnored="false" %>--%>
  13. <html>
  14. <head>
  15.     <meta charset="UTF-8">
  16.     <title>Title</title>
  17. </head>
  18. <style>
  19.     * {
  20.         margin: 0;        /*外边距*/
  21.         padding: 0;        /*内边距 */
  22.         font-family: "微软雅黑 Light";
  23.     }                                        /*清除所有默认样式*/
  25.     :root,form {                             /*选择最外层标签HTML*/
  26.         height: 70%;
  27.         display: flex;            /*改变元素*/
  28.         align-items: center;    /*垂直方向对齐方式*/
  29.         justify-content: center;    /*水平方向子项的对齐和分布方式*/
  30.     }
  32.     form {
  33.         flex-direction: column;        /*控制子项整体布局方向（从上到下）*/
  34.         padding: 40px;        /*上内边距*/
  35.         width: 300px;        /*盒子模型宽*/
  36.         box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);        /*应用阴影    a是alpha “透明 ”的意思*/
  37.     }
  39.     .form-title {
  40.         margin-bottom: 20px;    /*下外边距*/
  41.     }
  43.     .form-input,
  44.     .form-radio,
  45.     .form-button {
  46.         width: 100%;
  47.         margin-bottom: 20px;    /*下外边距*/
  48.     }
  50.     .form-input input {                            /*两个选择器具有包含关系*/
  51.         padding-left: 10px;
  52.         height: 40px;
  53.         width: 100%;
  54.         box-sizing: border-box;        /*盒子边框*/
  55.         border: 2px solid rgba(0, 0, 0, 0.82);        /*边框线宽度，样式（实线），颜色*/
  56.     }
  58.     .form-radio,
  59.     .form-button {
  60.         height: 40px;
  61.         display: flex;            /*控制元素类型*/
  62.         align-items: center;
  63.         justify-content: space-between;
  64.     }
  66.     .form-radio-choose {
  67.         display: flex;
  68.         align-items: center;
  69.     }
  71.     .form-radio-choose input {
  72.         margin-right: 20px;        /*右外边距*/
  73.         height: 30px;
  74.         width: 30px;
  75.     }
  77.     .form-button {
  78.         justify-content: center;
  79.         background-color: black;
  80.         color: white;
  81.     }
  82. </style>
  84.     <body>
  85.     <form action="/brand_demo/UpdateServlet" method="post">
  86.         <div class="form-title">
  87.             <h2>
  88.                 Update Data
  89.             </h2>
  90.         </div>                <!--块容器标记实现网页的规划和布局-->
  92. <%--     隐藏域，提交id--%>
  93.         <input type="hidden" name="id" value="${brand.id}">
  95.         <div class="form-input">
  96.             <input type="text" placeholder="Brand Name：" name="brand_name" value="${brand.brand_name}">
  97.         </div>
  99.         <div class="form-input">
  100.             <input type="text" placeholder="Company Name：" name="company_name" value="${brand.company_name}">
  101.         </div>
  103.         <div class="form-input">
  104.             <input type="text" placeholder="Price：" name="ordered" value="${brand.ordered}">
  105.         </div>
  107.         <div class="form-input">
  108.             <input type="text" placeholder="Remarks：" name="description" value="${brand.description}">
  109.         </div>
  111.         <c:if test="${brand.status == 0}">
  112.             <div class="form-radio">
  113.                 <div class="form-radio-title">Status:</div>
  115.                 <div class="form-radio-choose">
  116.                     <input type="radio" checked  value="1" name="status" />On
  117.                 </div>
  118.                 <div class="form-radio-choose">
  119.                     <input type="radio" value="0" name="status"/>Off
  120.                 </div>
  121.             </div>
  122.         </c:if>
  124.         <c:if test="${brand.status == 1}">
  125.             <div class="form-radio">
  126.                 <div class="form-radio-title">Status:</div>
  128.                 <div class="form-radio-choose">
  129.                     <input type="radio"   value="1" name="status" />On
  130.                 </div>
  131.                 <div class="form-radio-choose">
  132.                     <input type="radio"  checked value="0" name="status"/>Off
  133.                 </div>
  134.             </div>
  135.         </c:if>
  138.         <div class="form-button">
  139. <%--               <input type="radio" name="status" value="0">禁用--%>
  140. <%--                <input type="radio" name="status" value="1" >启用--%>
  141.     <input class="form-button" type="submit" value="Submit">
  142.         </div>
  143. <%--        <div class="form-button">--%>
  144. <%--&lt;%&ndash;            <p>重置</p>&ndash;%&gt;--%>
  145. <%--        </div>--%>
  146.     </form>
  147.     </body>
  148.     </html>

编写updateServlet.java

  1. package com.taotao.web;
  3. import com.taotao.pojo.Brand;
  4. import com.taotao.service.BrandService;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11. import java.io.IOException;
  13. /**
  14.  * create by 刘鸿涛
  15.  * 2022/3/31 12:02
  16.  */
  17. @WebServlet("/UpdateServlet")
  18. public class UpdateServlet extends HttpServlet {
  19.     private BrandService service = new BrandService();
  20.     @Override
  21.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  22.         //1.调用BrandService完成添加
  23.         String id = req.getParameter("id");
  24.         String brandName = req.getParameter("brand_name");
  25.         String companyName = req.getParameter("company_name");
  26.         String ordered = req.getParameter("ordered");
  27.         String description = req.getParameter("description");
  28.         String status = req.getParameter("status");
  30.         //封装为一个Brand对象
  31.         Brand brand = new Brand();
  32.         brand.setId(Integer.parseInt(id));
  33.         brand.setBrand_name(brandName);
  34.         brand.setCompany_name(companyName);
  35.         brand.setOrdered(Integer.parseInt(ordered));
  36.         brand.setDescription(description);
  37.         brand.setStatus(Integer.parseInt(status));
  39.         //2.调用add方法，传入brand对象
  40.         service.update(brand);
  42.         //3.存入到requset域中
  43. //        req.setAttribute("brands",brand);
  45.         //4.转发到查询所有servlet中
  46.         req.getRequestDispatcher("/selectAllServlet").forward(req,resp);
  47.     }
  49.     @Override
  50.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  51.         //处理Post请求的乱码问题
  52.         req.setCharacterEncoding("utf-8");
  53.         this.doGet(req, resp);
  54.     }
  55. }

测试运行image.pngimage.pngimage.png