添加数据

流程图

image.png

编写BrandMapper接口

  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);
  20. }

编写BrandMapper.xml

:::info 可以再BrandMapper.java中生成statement，alt + enter自动识别 :::

  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>
  14.     <resultMap id="brandResultMap" type="brand">
  15.         <result column="brandName" property="brand_name"></result>
  16.         <result column="companyName" property="company_name"></result>
  17.     </resultMap>
  19. <!--    添加功能-->
  20.     <insert id="add" >
  21.         insert into tb_brand
  22. #             (brandName,companyName,ordered,description,status)
  23.         values (#{id},#{brand_name},#{company_name},#{ordered},#{description},#{status});
  24.     </insert>
  25. </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.     }
  61. }

点击“新增”跳转到JSP表单

编写index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <a href="/brand_demo/selectAllServlet">查询所有</a>
  11. </body>
  12. </html>

编写brand.jsp

:::info 点击“新增”，转到addBrand.jsp :::

  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="800">
  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>
  45.     </tr>
  46. </c:forEach>
  48.     <script>
  49.         document.getElementById("add").onclick = function (){
  50.             location.href = "/brand_demo/addBrand.jsp";
  51.         }
  52.     </script>
  54. </table>
  55. </body>
  56. </html>

编写addBrand.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. <%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%>
  10. <%--<%@ page isELIgnored="false" %>--%>
  11. <html>
  12. <head>
  13.     <meta charset="UTF-8">
  14.     <title>Title</title>
  15. </head>
  16. <body>
  17.     <h3>添加品牌</h3>
  18.     <form action="/brand_demo/AddServlet" method="post" id="aa">
  19. <%--        序号：<input type="text" name="id"><br>--%>
  20.         品牌名称：<input type="text" name="brand_name"><br>
  21.         企业名称：<input type="text" name="company_name"><br>
  22.         排序：<input type="text" name="ordered"><br>
  23.         描述信息：<input type="text" name="description">
  24.         状态：<input type="radio" name="status" value="0">禁用
  25.         <input type="radio" name="status" value="1" >启用
  26.         <input type="submit" >
  27.     </form>
  28. </body>
  29. </html>

升级addBrand.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. <%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%>
  10. <%--<%@ page isELIgnored="false" %>--%>
  11. <html>
  12. <head>
  13.     <meta charset="UTF-8">
  14.     <title>Title</title>
  15. </head>
  16. <style>
  17.     * {
  18.         margin: 0;        /*外边距*/
  19.         padding: 0;        /*内边距 */
  20.         font-family: "微软雅黑 Light";
  21.     }                                        /*清除所有默认样式*/
  23.     :root,form {                             /*选择最外层标签HTML*/
  24.         height: 70%;
  25.         display: flex;            /*改变元素*/
  26.         align-items: center;    /*垂直方向对齐方式*/
  27.         justify-content: center;    /*水平方向子项的对齐和分布方式*/
  28.     }
  30.     form {
  31.         flex-direction: column;        /*控制子项整体布局方向（从上到下）*/
  32.         padding: 40px;        /*上内边距*/
  33.         width: 300px;        /*盒子模型宽*/
  34.         box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);        /*应用阴影    a是alpha “透明 ”的意思*/
  35.     }
  37.     .form-title {
  38.         margin-bottom: 20px;    /*下外边距*/
  39.     }
  41.     .form-input,
  42.     .form-radio,
  43.     .form-button {
  44.         width: 100%;
  45.         margin-bottom: 20px;    /*下外边距*/
  46.     }
  48.     .form-input input {                            /*两个选择器具有包含关系*/
  49.         padding-left: 10px;
  50.         height: 40px;
  51.         width: 100%;
  52.         box-sizing: border-box;        /*盒子边框*/
  53.         border: 2px solid rgba(0, 0, 0, 0.82);        /*边框线宽度，样式（实线），颜色*/
  54.     }
  56.     .form-radio,
  57.     .form-button {
  58.         height: 40px;
  59.         display: flex;            /*控制元素类型*/
  60.         align-items: center;
  61.         justify-content: space-between;
  62.     }
  64.     .form-radio-choose {
  65.         display: flex;
  66.         align-items: center;
  67.     }
  69.     .form-radio-choose input {
  70.         margin-right: 20px;        /*右外边距*/
  71.         height: 30px;
  72.         width: 30px;
  73.     }
  75.     .form-button {
  76.         justify-content: center;
  77.         background-color: black;
  78.         color: white;
  79.     }
  80. </style>
  81. <%--<body>--%>
  82. <%--    <h3>添加品牌</h3>--%>
  84. <%--    <form action="/brand_demo/AddServlet" method="post" id="aa">--%>
  85. <%--&lt;%&ndash;        序号：<input type="text" name="id"><br>&ndash;%&gt;--%>
  86. <%--        品牌名称：<input type="text" name="brand_name"><br>--%>
  87. <%--        企业名称：<input type="text" name="company_name"><br>--%>
  88. <%--        排序：<input type="text" name="ordered"><br>--%>
  89. <%--        描述信息：<input type="text" name="description">--%>
  90. <%--        状态：<input type="radio" name="status" value="0">禁用--%>
  91. <%--        <input type="radio" name="status" value="1" >启用--%>
  92. <%--        <input type="submit" >--%>
  93. <%--    </form>--%>
  94. <%-- </body>--%>
  96.     <body>
  97.     <form action="/brand_demo/AddServlet" method="post">
  98.         <div class="form-title">
  99.             <h2>
  100.                 Add Data
  101.             </h2>
  102.         </div>                <!--块容器标记实现网页的规划和布局-->
  104.         <div class="form-input">
  105.             <input type="text" placeholder="Brand Name：" name="brand_name">
  106.         </div>
  107.         <div class="form-input">
  108.             <input type="text" placeholder="Company Name：" name="company_name">
  109.         </div>
  110.         <div class="form-input">
  111.             <input type="text" placeholder="Price：" name="ordered">
  112.         </div>
  113.         <div class="form-input">
  114.             <input type="text" placeholder="Remarks：" name="description">
  115.         </div>
  117.         <div class="form-radio">
  118.             <div class="form-radio-title">Status:</div>
  120.             <div class="form-radio-choose">
  121.                 <input type="radio" checked="checked"  value="1" name="status" />On
  122.             </div>
  123.             <div class="form-radio-choose">
  124.                 <input type="radio" value="0" name="status"/>Off
  125.             </div>
  126.         </div>
  127.         <div class="form-button">
  130. <%--               <input type="radio" name="status" value="0">禁用--%>
  131. <%--                <input type="radio" name="status" value="1" >启用--%>
  132.     <input class="form-button" type="submit" value="Submit">
  133.         </div>
  134. <%--        <div class="form-button">--%>
  135. <%--&lt;%&ndash;            <p>重置</p>&ndash;%&gt;--%>
  136. <%--        </div>--%>
  137.     </form>
  138.     </body>
  139.     </html>

编写AddServlet

:::info com.taotao.web.AddServlet.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("/AddServlet")
  18. public class AddServlet 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 brandName = req.getParameter("brand_name");
  24.         String companyName = req.getParameter("company_name");
  25.         String ordered = req.getParameter("ordered");
  26.         String description = req.getParameter("description");
  27.         String status = req.getParameter("status");
  29.         //封装为一个Brand对象
  30.         Brand brand = new Brand();
  31.         brand.setBrand_name(brandName);
  32.         brand.setCompany_name(companyName);
  33.         brand.setOrdered(Integer.parseInt(ordered));
  34.         brand.setDescription(description);
  35.         brand.setStatus(Integer.parseInt(status));
  37.         //2.调用add方法，传入brand对象
  38.         service.add(brand);
  40.         //3.存入到requset域中
  41. //        req.setAttribute("brands",brand);
  43.         //4.转发到查询所有servlet中
  44.         req.getRequestDispatcher("/selectAllServlet").forward(req,resp);
  45.     }
  47.     @Override
  48.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  49.         //处理Post请求的乱码问题
  50.         req.setCharacterEncoding("utf-8");
  51.         this.doGet(req, resp);
  52.     }
  53. }

测试运行

:::info 虽然中途遇到无数个bug，但是依然完美运行
解决的bug有form写成from的，导致提交表单无响应
网页提交404，路径指引错误
post请求中文乱码，在servlet，post请求里设置去utf-8字符编码即可 ::: image.png
image.png