#头条创作挑战赛#8.4 修改
点击每条数据后面的 编辑 按钮会跳转到修改页面,如下图:
在该修改页面我们可以看到将 编辑 按钮所在行的数据 回显 到表单,然后需要修改那个数据在表单中进行修改,然后点击 提交 的按钮将数据提交到后端,后端再将数据存储到数据库中从上面的例子我们知道 修改 功能需要从两方面进行实现,数据回显和修改操作。
8.4.1 回显数据
上图就是回显数据的效果要实现这个效果,那当点击 修改 按钮时不能直接跳转到 update.jsp 页面,而是需要先带着当前行数据的 id 请求后端程序,后端程序根据 id 查询数据,将数据存储到域对象中跳转到 。
update.jsp 页面进行数据展示。整体流程如下
8.4.1.1 编写BrandMapper方法在 BrandMapper 接口,在接口中定义 selectById(int id) 方法/** * 根据id查询 * @param id * @return */
@Select("select * from tb_brand where id = #{id}") @ResultMap("brandResultMap") Brand selectById(int id);
8.4.1.2 编写BrandService方法在 BrandService 类中定义根据id查询数据方法 selectById(int id)/** * 根据id查询 * @return
*/public Brand selectById(int id){ //调用BrandMapper.selectAll()//2. 获取SqlSession SqlSession sqlSession = factory.openSession();
//3. 获取BrandMapper BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); //4. 调用方法
Brand brand = mapper.selectById(id); sqlSession.close(); return brand; }
8.4.1.3 编写servlet在 web 包下创建 SelectByIdServlet 的 servlet,该 servlet 的逻辑如下:获取请求数据 id调用 BrandService 的 selectById()
方法进行数据查询的业务逻辑将查询到的数据存储到 request 域对象中跳转到 update.jsp 页面进行数据真实具体代码如下:@WebServlet("/selectByIdServlet")
publicclassSelectByIdServletextendsHttpServlet{ private BrandService service = new BrandService();
@OverrideprotectedvoiddoGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException
{ //1. 接收id String id = request.getParameter("id"); //2. 调用service查询 Brand brand = service.selectById(Integer.parseInt(id));
//3. 存储到request中 request.setAttribute("brand",brand); //4. 转发到update.jsp request.getRequestDispatcher(
"/update.jsp").forward(request,response); } @OverrideprotectedvoiddoPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { this.doGet(request, response); } }8.4.1.4 编写update.jsp页面
拷贝 addBrand.jsp 页面,改名为 update.jsp 并做出以下修改:title 标签内容改为 修改品牌form 标签的 action 属性值改为 /brand-demo/updateServlet
input 标签要进行数据回显,需要设置 value 属性品牌名称:
企业名称:="companyName"value="${brand.companyName}">
排序:
textarea标签要进行数据回显,需要在标签体中使用 EL表达式描述信息:${brand.description}
单选框使用 if 标签需要判断 brand.status 的值是 1 还是 0 在指定的单选框上使用 checked 属性,表示被选中状态状态:
>禁用启用
禁用
value="1"checked>启用
综上,update.jsp 代码如下:<%@pagecontentType="text/html;charset=UTF-8"language="java" %>
修改品牌
修改品牌
method="post"> 品牌名称:
企业名称:="companyName"value="${brand.companyName}">
排序:描述信息:${brand.description}
状态:禁用
="radio"name="status"value="1">启用
value="0" >禁用 启用
value="提交">8.4.2 修改数据做完回显数据后,接下来我们要做修改数据了,而下图是修改数据的效果:
在修改页面进行数据修改,点击 提交 按钮,会将数据提交到后端程序,后端程序会对表中的数据进行修改操作,然后重新进行数据的查询操作。整体流程如下:
8.4.2.1 编写BrandMapper方法在 BrandMapper 接口,在接口中定义 update(Brand brand) 方法/** * 修改 * @param brand */
@Update("update tb_brand set brand_name = #{brandName},company_name = #{companyName},ordered = #{ordered},description = #{description},status = #{status} where id = #{id}"
) voidupdate(Brand brand);8.4.2.2 编写BrandService方法在 BrandService 类中定义根据id查询数据方法 update(Brand brand)/** * 修改 *
@param brand */publicvoidupdate(Brand brand){ //2. 获取SqlSession SqlSession sqlSession = factory.openSession();
//3. 获取BrandMapper BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); //4. 调用方法
mapper.update(brand); //提交事务 sqlSession.commit(); //释放资源 sqlSession.close(); }
8.4.2.3 编写servlet在 web 包下创建 AddServlet 的 servlet,该 servlet 的逻辑如下:设置处理post请求乱码的字符集接收客户端提交的数据将接收到的数据封装到
Brand 对象中调用 BrandService 的update() 方法进行添加的业务逻辑处理跳转到 selectAllServlet 资源重新查询数据具体的代码如下:@WebServlet("/updateServlet"
) publicclassUpdateServletextendsHttpServlet{ private BrandService service = new BrandService();
@OverrideprotectedvoiddoGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException
{ //处理POST请求的乱码问题 request.setCharacterEncoding("utf-8"); //1. 接收表单提交的数据,封装为一个Brand对象
String id = request.getParameter("id"); String brandName = request.getParameter("brandName"
); String companyName = request.getParameter("companyName"); String ordered = request.getParameter(
"ordered"); String description = request.getParameter("description"); String status = request.getParameter(
"status"); //封装为一个Brand对象 Brand brand = new Brand(); brand.setId(Integer.parseInt(id)); brand.setBrandName(brandName); brand.setCompanyName(companyName); brand.setOrdered(Integer.parseInt(ordered)); brand.setDescription(description); brand.setStatus(Integer.parseInt(status));
//2. 调用service 完成修改 service.update(brand); //3. 转发到查询所有Servlet request.getRequestDispatcher(
"/selectAllServlet").forward(request,response); } @OverrideprotectedvoiddoPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { this.doGet(request, response); } }存在问题:update.jsp 页面提交数据时是没有携带主键数据的,而后台修改数据需要根据主键进行修改。
针对这个问题,我们不希望页面将主键id展示给用户看,但是又希望在提交数据时能将主键id提交到后端此时我们就想到了在学习 HTML 时学习的隐藏域,在 update.jsp 页面的表单中添加如下代码: <%
--隐藏域,提交id--%> update.jsp 页面的最终代码如下:<%@pagecontentType
="text/html;charset=UTF-8"language="java" %><%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"
%>修改品牌
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。