當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Javaweb - JSP章节 - MVC和三层架构案例总练习（下） - “回显数据”-“修改数据”功能实现

發布時間：2023/12/20 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 Javaweb - JSP章节 - MVC和三层架构案例总练习（下） - “回显数据”-“修改数据”功能实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

修改-回顯數據
- 流程圖
- - 編寫BrandMapper.java
  - 編寫BrandMapper.xml
  - 編寫BrandService.java
- 編寫表單
- - 編寫brand.jsp
- 編寫Servlet
- - 編寫SelectByIdServlet.java
  - 編寫update.jsp
- 運行測試
- - 回顯功能
修改-修改數據
- 流程圖
- - 編寫BrandMapper.java
  - 編寫BrandMapper.xml
  - 編寫Service
  - 修改update.jsp
  - 編寫updateServlet.java
- 測試運行

修改-回顯數據

完成一個根據id進行查詢數據的功能

所以直接命名為SelectById

流程圖

編寫BrandMapper.java

package com.taotao.mapper;import com.taotao.pojo.Brand; import org.apache.ibatis.annotations.ResultMap; import org.apache.ibatis.annotations.Select;import java.util.List;/*** create by 劉鴻濤* 2022/3/29 16:12*/ public interface BrandMapper {//查詢所有List<Brand> selectAll();//添加、新增數據void add(Brand brand);//修改-回顯數據Brand selectById(int id); }

編寫BrandMapper.xml

這里注意應用resultmap

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.taotao.mapper.BrandMapper"><select id="selectAll" resultMap="brandResultMap">select *from tb_brand</select><resultMap id="brandResultMap" type="brand"><result column="brandName" property="brand_name"></result><result column="companyName" property="company_name"></result></resultMap><insert id="add" >insert into tb_brandvalues (#{id},#{brand_name},#{company_name},#{ordered},#{description},#{status});</insert><select id="selectById" resultMap="brandResultMap">select * from tb_brand where id = #{id};</select> </mapper>

編寫BrandService.java

package com.taotao.service;import com.taotao.mapper.BrandMapper; import com.taotao.pojo.Brand; import com.taotao.util.SqlSessionfactoryUtils; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory;import java.util.List;/*** create by 劉鴻濤* 2022/3/29 16:59*/ @SuppressWarnings({"all"}) public class BrandService {SqlSessionFactory factory = SqlSessionfactoryUtils.getSqlSessionFactory();/*** 查詢所有* @return*/public List<Brand> selectAll(){//調用BrandMapper.selectAll()//2.獲取sqlSessionSqlSession sqlSession = factory.openSession();//3.獲取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4.調用方法List<Brand> brands = mapper.selectAll();//5.關閉資源sqlSession.close();return brands;}/*** 添加數據*/public void add(Brand brand){//調用BrandMapper.add(Brand brand);//2.獲取sqlSessionSqlSession sqlSession = factory.openSession();//3.獲取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4.調用方法mapper.add(brand);//5.提交事務sqlSession.commit();//6.釋放資源sqlSession.close();}/*** 通過id修改數據* @param id* @return*/public Brand selectById(int id){//調用BrandMapper.selectById(Integer id)//獲取sqlSessionSqlSession sqlSession = factory.openSession();//獲取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//調用方法Brand brand = mapper.selectById(id);//提交事務sqlSession.commit();//6.釋放資源sqlSession.close();return brand;} }

編寫表單

編寫brand.jsp

連接selectByIdServlet.java獲取id

<%--Created by IntelliJ IDEA.User: guiguiDate: 2022/3/29Time: 10:32To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ page isELIgnored="false" %><html> <head><title>Title</title> </head> <body><input type="button" value="新增" id="add"><br><hr> <table border="1" cellspacing="0" width="%80"><tr><th>序號</th><th>品牌名稱</th><th>公司名稱</th><th>價格</th><th>描述</th><th>狀態</th></tr><c:forEach items="${brands}" var="brand" varStatus="status"><tr align="center"><td>${brand.id}</td><td>${brand.brand_name}</td><td>${brand.company_name}</td><td>${brand.ordered}</td><td>${brand.description}</td><c:if test="${brand.status == 1}"><td>啟用</td></c:if><c:if test="${brand.status != 1}"><td>禁用</td></c:if><td><a href="/brand_demo/selectByIdServlet?id=${brand.id}">Update</a> <a href="">Delete</a></td></tr> </c:forEach><script>document.getElementById("add").onclick = function (){location.href = "/brand_demo/addBrand.jsp";}</script></table> </body> </html>

編寫Servlet

編寫SelectByIdServlet.java

編寫update.jsp

<%--Created by IntelliJ IDEA.User: guiguiDate: 2022/3/31Time: 12:43To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%--引用c標簽--%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%> <%--<%@ page isELIgnored="false" %>--%> <html> <head><meta charset="UTF-8"><title>Title</title> </head> <style>* {margin: 0; /*外邊距*/padding: 0; /*內邊距 */font-family: "微軟雅黑 Light";} /*清除所有默認樣式*/:root,form { /*選擇最外層標簽HTML*/height: 70%;display: flex; /*改變元素*/align-items: center; /*垂直方向對齊方式*/justify-content: center; /*水平方向子項的對齊和分布方式*/}form {flex-direction: column; /*控制子項整體布局方向（從上到下）*/padding: 40px; /*上內邊距*/width: 300px; /*盒子模型寬*/box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5); /*應用陰影 a是alpha “透明 ”的意思*/}.form-title {margin-bottom: 20px; /*下外邊距*/}.form-input,.form-radio,.form-button {width: 100%;margin-bottom: 20px; /*下外邊距*/}.form-input input { /*兩個選擇器具有包含關系*/padding-left: 10px;height: 40px;width: 100%;box-sizing: border-box; /*盒子邊框*/border: 2px solid rgba(0, 0, 0, 0.82); /*邊框線寬度，樣式（實線），顏色*/}.form-radio,.form-button {height: 40px;display: flex; /*控制元素類型*/align-items: center;justify-content: space-between;}.form-radio-choose {display: flex;align-items: center;}.form-radio-choose input {margin-right: 20px; /*右外邊距*/height: 30px;width: 30px;}.form-button {justify-content: center;background-color: black;color: white;} </style><body><form action="/brand_demo/AddServlet" method="post"><div class="form-title"><h2>Update Data</h2></div> <div class="form-input"><input type="text" placeholder="Brand Name：" name="brand_name" value="${brand.brand_name}"></div><div class="form-input"><input type="text" placeholder="Company Name：" name="company_name" value="${brand.company_name}"></div><div class="form-input"><input type="text" placeholder="Price：" name="ordered" value="${brand.ordered}"></div><div class="form-input"><input type="text" placeholder="Remarks：" name="description" value="${brand.description}"></div><c:if test="${brand.status == 0}"><div class="form-radio"><div class="form-radio-title">Status:</div><div class="form-radio-choose"><input type="radio" checked value="1" name="status" />On</div><div class="form-radio-choose"><input type="radio" value="0" name="status"/>Off</div></div></c:if><c:if test="${brand.status == 1}"><div class="form-radio"><div class="form-radio-title">Status:</div><div class="form-radio-choose"><input type="radio" value="1" name="status" />On</div><div class="form-radio-choose"><input type="radio" checked value="0" name="status"/>Off</div></div></c:if><div class="form-button"> <%-- <input type="radio" name="status" value="0">禁用--%> <%-- <input type="radio" name="status" value="1" >啟用--%><input class="form-button" type="submit" value="Submit"></div> <%-- <div class="form-button">--%> <%--<%– <p>重置</p>–%>--%> <%-- </div>--%></form></body></html>

運行測試

回顯數據完成，鼠標指針放在update選項時左下角網頁可以得到id

回顯功能

只有回顯功能，不能通過此頁面更改相應id數據

修改-修改數據

流程圖

編寫BrandMapper.java

編寫BrandMapper.xml

<update id="update">update tb_brand set brandName = #{brand_name},companyName = #{company_name},ordered = #{ordered},description = #{description},status = #{status} where id = #{id};</update>

編寫Service

編寫BrandService

/*** 修改* @param brand*/public void update(Brand brand){//調用BrandMapper.add(Brand brand);//2.獲取sqlSessionSqlSession sqlSession = factory.openSession();//3.獲取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4.調用方法mapper.update(brand);//5.提交事務sqlSession.commit();//6.釋放資源sqlSession.close();}

修改update.jsp

修改update.jsp數據傳輸到servlet

注意要傳入id到servlet

注意id不要顯示在update.jsp頁面中(隱藏域),type = hidden

<%--Created by IntelliJ IDEA.User: guiguiDate: 2022/3/31Time: 12:43To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%--引用c標簽--%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%> <%--<%@ page isELIgnored="false" %>--%> <html> <head><meta charset="UTF-8"><title>Title</title> </head> <style>* {margin: 0; /*外邊距*/padding: 0; /*內邊距 */font-family: "微軟雅黑 Light";} /*清除所有默認樣式*/:root,form { /*選擇最外層標簽HTML*/height: 70%;display: flex; /*改變元素*/align-items: center; /*垂直方向對齊方式*/justify-content: center; /*水平方向子項的對齊和分布方式*/}form {flex-direction: column; /*控制子項整體布局方向（從上到下）*/padding: 40px; /*上內邊距*/width: 300px; /*盒子模型寬*/box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5); /*應用陰影 a是alpha “透明 ”的意思*/}.form-title {margin-bottom: 20px; /*下外邊距*/}.form-input,.form-radio,.form-button {width: 100%;margin-bottom: 20px; /*下外邊距*/}.form-input input { /*兩個選擇器具有包含關系*/padding-left: 10px;height: 40px;width: 100%;box-sizing: border-box; /*盒子邊框*/border: 2px solid rgba(0, 0, 0, 0.82); /*邊框線寬度，樣式（實線），顏色*/}.form-radio,.form-button {height: 40px;display: flex; /*控制元素類型*/align-items: center;justify-content: space-between;}.form-radio-choose {display: flex;align-items: center;}.form-radio-choose input {margin-right: 20px; /*右外邊距*/height: 30px;width: 30px;}.form-button {justify-content: center;background-color: black;color: white;} </style><body><form action="/brand_demo/UpdateServlet" method="post"><div class="form-title"><h2>Update Data</h2></div> <%-- 隱藏域，提交id--%><input type="hidden" name="id" value="${brand.id}"><div class="form-input"><input type="text" placeholder="Brand Name：" name="brand_name" value="${brand.brand_name}"></div><div class="form-input"><input type="text" placeholder="Company Name：" name="company_name" value="${brand.company_name}"></div><div class="form-input"><input type="text" placeholder="Price：" name="ordered" value="${brand.ordered}"></div><div class="form-input"><input type="text" placeholder="Remarks：" name="description" value="${brand.description}"></div><c:if test="${brand.status == 0}"><div class="form-radio"><div class="form-radio-title">Status:</div><div class="form-radio-choose"><input type="radio" checked value="1" name="status" />On</div><div class="form-radio-choose"><input type="radio" value="0" name="status"/>Off</div></div></c:if><c:if test="${brand.status == 1}"><div class="form-radio"><div class="form-radio-title">Status:</div><div class="form-radio-choose"><input type="radio" value="1" name="status" />On</div><div class="form-radio-choose"><input type="radio" checked value="0" name="status"/>Off</div></div></c:if><div class="form-button"> <%-- <input type="radio" name="status" value="0">禁用--%> <%-- <input type="radio" name="status" value="1" >啟用--%><input class="form-button" type="submit" value="Submit"></div> <%-- <div class="form-button">--%> <%--<%– <p>重置</p>–%>--%> <%-- </div>--%></form></body></html>

編寫updateServlet.java

package com.taotao.web;import com.taotao.pojo.Brand; import com.taotao.service.BrandService;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException;/*** create by 劉鴻濤* 2022/3/31 12:02*/ @WebServlet("/UpdateServlet") public class UpdateServlet extends HttpServlet {private BrandService service = new BrandService();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//1.調用BrandService完成添加String id = req.getParameter("id");String brandName = req.getParameter("brand_name");String companyName = req.getParameter("company_name");String ordered = req.getParameter("ordered");String description = req.getParameter("description");String status = req.getParameter("status");//封裝為一個Brand對象Brand brand = new Brand();brand.setId(Integer.parseInt(id));brand.setBrand_name(brandName);brand.setCompany_name(companyName);brand.setOrdered(Integer.parseInt(ordered));brand.setDescription(description);brand.setStatus(Integer.parseInt(status));//2.調用add方法，傳入brand對象service.update(brand);//3.存入到requset域中 // req.setAttribute("brands",brand);//4.轉發到查詢所有servlet中req.getRequestDispatcher("/selectAllServlet").forward(req,resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//處理Post請求的亂碼問題req.setCharacterEncoding("utf-8");this.doGet(req, resp);} }

測試運行

完美

總結

以上是生活随笔為你收集整理的Javaweb - JSP章节 - MVC和三层架构案例总练习（下） - “回显数据”-“修改数据”功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：决策树php,决策树模型组合之随机森林与
下一篇：大规模天线阵列（massive-mimo