how2j.cn

下载区
文件名 文件大小
请先登录 3m
增值内容 3m
3m
步骤 1 : 先运行,看到效果,再学习   
步骤 2 : 模仿和排错   
步骤 3 : 页面截图   
步骤 4 : ProductImageServlet类   
步骤 5 : web.xml   
步骤 6 : listProductImage.jsp   
步骤 7 : 查询功能讲解   
步骤 8 : 增加功能讲解   
步骤 9 : 删除功能讲解   
步骤 10 : 编辑和修改   

步骤 1 :

先运行,看到效果,再学习

edit
增值内容,请先登录
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
增值内容,请先登录
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
增值内容,请先登录
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
页面截图
步骤 4 :

ProductImageServlet类

edit
增值内容,请先登录
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
package tmall.servlet; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.imageio.ImageIO; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import tmall.bean.Product; import tmall.bean.ProductImage; import tmall.dao.ProductImageDAO; import tmall.util.ImageUtil; import tmall.util.Page; public class ProductImageServlet extends BaseBackServlet { public String add(HttpServletRequest request, HttpServletResponse response, Page page) { //上传文件的输入流 InputStream is = null; //提交上传文件时的其他参数 Map<String,String> params = new HashMap<>(); //解析上传 is = parseUpload(request, params); //根据上传的参数生成productImage对象 String type= params.get("type"); int pid = Integer.parseInt(params.get("pid")); Product p =productDAO.get(pid); ProductImage pi = new ProductImage(); pi.setType(type); pi.setProduct(p); productImageDAO.add(pi); //生成文件 String fileName = pi.getId()+ ".jpg"; String imageFolder; String imageFolder_small=null; String imageFolder_middle=null; if(ProductImageDAO.type_single.equals(pi.getType())){ imageFolder= request.getSession().getServletContext().getRealPath("img/productSingle"); imageFolder_small= request.getSession().getServletContext().getRealPath("img/productSingle_small"); imageFolder_middle= request.getSession().getServletContext().getRealPath("img/productSingle_middle"); } else imageFolder= request.getSession().getServletContext().getRealPath("img/productDetail"); File f = new File(imageFolder, fileName); f.getParentFile().mkdirs(); // 复制文件 try { if(null!=is && 0!=is.available()){ try(FileOutputStream fos = new FileOutputStream(f)){ byte b[] = new byte[1024 * 1024]; int length = 0; while (-1 != (length = is.read(b))) { fos.write(b, 0, length); } fos.flush(); //通过如下代码,把文件保存为jpg格式 BufferedImage img = ImageUtil.change2jpg(f); ImageIO.write(img, "jpg", f); if(ProductImageDAO.type_single.equals(pi.getType())){ File f_small = new File(imageFolder_small, fileName); File f_middle = new File(imageFolder_middle, fileName); ImageUtil.resizeImage(f, 56, 56, f_small); ImageUtil.resizeImage(f, 217, 190, f_middle); } } catch(Exception e){ e.printStackTrace(); } } } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return "@admin_productImage_list?pid="+p.getId(); } public String delete(HttpServletRequest request, HttpServletResponse response, Page page) { int id = Integer.parseInt(request.getParameter("id")); ProductImage pi = productImageDAO.get(id); productImageDAO.delete(id); if(ProductImageDAO.type_single.equals(pi.getType())){ String imageFolder_single= request.getSession().getServletContext().getRealPath("img/productSingle"); String imageFolder_small= request.getSession().getServletContext().getRealPath("img/productSingle_small"); String imageFolder_middle= request.getSession().getServletContext().getRealPath("img/productSingle_middle"); File f_single =new File(imageFolder_single,pi.getId()+".jpg"); f_single.delete(); File f_small =new File(imageFolder_small,pi.getId()+".jpg"); f_small.delete(); File f_middle =new File(imageFolder_middle,pi.getId()+".jpg"); f_middle.delete(); } else{ String imageFolder_detail= request.getSession().getServletContext().getRealPath("img/productDetail"); File f_detail =new File(imageFolder_detail,pi.getId()+".jpg"); f_detail.delete(); } return "@admin_productImage_list?pid="+pi.getProduct().getId(); } public String edit(HttpServletRequest request, HttpServletResponse response, Page page) { return null; } public String update(HttpServletRequest request, HttpServletResponse response, Page page) { return null; } public String list(HttpServletRequest request, HttpServletResponse response, Page page) { int pid = Integer.parseInt(request.getParameter("pid")); Product p =productDAO.get(pid); List<ProductImage> pisSingle = productImageDAO.list(p, ProductImageDAO.type_single); List<ProductImage> pisDetail = productImageDAO.list(p, ProductImageDAO.type_detail); request.setAttribute("p", p); request.setAttribute("pisSingle", pisSingle); request.setAttribute("pisDetail", pisDetail); return "admin/listProductImage.jsp"; } }
增值内容,请先登录
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
<?xml version="1.0" encoding="UTF-8"?> <web-app> <servlet> <servlet-name>ProductImageServlet</servlet-name> <servlet-class>tmall.servlet.ProductImageServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ProductImageServlet</servlet-name> <url-pattern>/productImageServlet</url-pattern> </servlet-mapping> <servlet> <servlet-name>CategoryServlet</servlet-name> <servlet-class>tmall.servlet.CategoryServlet</servlet-class> </servlet> <servlet> <servlet-name>ProductServlet</servlet-name> <servlet-class>tmall.servlet.ProductServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ProductServlet</servlet-name> <url-pattern>/productServlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>CategoryServlet</servlet-name> <url-pattern>/categoryServlet</url-pattern> </servlet-mapping> <servlet> <servlet-name>PropertyServlet</servlet-name> <servlet-class>tmall.servlet.PropertyServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>PropertyServlet</servlet-name> <url-pattern>/propertyServlet</url-pattern> </servlet-mapping> <filter> <filter-name>EncodingFilter</filter-name> <filter-class>tmall.filter.EncodingFilter</filter-class> </filter> <filter-mapping> <filter-name>EncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <filter> <filter-name>BackServletFilter</filter-name> <filter-class>tmall.filter.BackServletFilter</filter-class> </filter> <filter-mapping> <filter-name>BackServletFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>
步骤 6 :

listProductImage.jsp

edit
增值内容,请先登录
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@include file="../include/admin/adminHeader.jsp"%> <%@include file="../include/admin/adminNavigator.jsp"%> <script> $(function(){ $(".addFormSingle").submit(function(){ if(checkEmpty("filepathSingle","图片文件")){ $("#filepathSingle").value(""); return true; } return false; }); $(".addFormDetail").submit(function(){ if(checkEmpty("filepathDetail","图片文件")) return true; return false; }); }); </script> <title>产品图片管理</title> <div class="workingArea"> <ol class="breadcrumb"> <li><a href="admin_category_list">所有分类</a></li> <li><a href="admin_product_list?cid=${p.category.id}">${p.category.name}</a></li> <li class="active">${p.name}</li> <li class="active">产品图片管理</li> </ol> <table class="addPictureTable" align="center"> <tr> <td class="addPictureTableTD"> <div> <div class="panel panel-warning addPictureDiv"> <div class="panel-heading">新增产品<b class="text-primary"> 单个 </b>图片</div> <div class="panel-body"> <form method="post" class="addFormSingle" action="admin_productImage_add" enctype="multipart/form-data"> <table class="addTable"> <tr> <td>请选择本地图片 尺寸400X400 为佳</td> </tr> <tr> <td> <input id="filepathSingle" type="file" name="filepath" /> </td> </tr> <tr class="submitTR"> <td align="center"> <input type="hidden" name="type" value="type_single" /> <input type="hidden" name="pid" value="${p.id}" /> <button type="submit" class="btn btn-success">提 交</button> </td> </tr> </table> </form> </div> </div> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>ID</th> <th>产品单个图片缩略图</th> <th>删除</th> </tr> </thead> <tbody> <c:forEach items="${pisSingle}" var="pi"> <tr> <td>${pi.id}</td> <td> <a title="点击查看原图" href="img/productSingle/${pi.id}.jpg"><img height="50px" src="img/productSingle/${pi.id}.jpg"></a> </td> <td><a deleteLink="true" href="admin_productImage_delete?id=${pi.id}"><span class=" glyphicon glyphicon-trash"></span></a></td> </tr> </c:forEach> </tbody> </table> </div> </td> <td class="addPictureTableTD"> <div> <div class="panel panel-warning addPictureDiv"> <div class="panel-heading">新增产品<b class="text-primary"> 详情 </b>图片</div> <div class="panel-body"> <form method="post" class="addFormDetail" action="admin_productImage_add" enctype="multipart/form-data"> <table class="addTable"> <tr> <td>请选择本地图片 宽度790 为佳</td> </tr> <tr> <td> <input id="filepathDetail" type="file" name="filepath" /> </td> </tr> <tr class="submitTR"> <td align="center"> <input type="hidden" name="type" value="type_detail" /> <input type="hidden" name="pid" value="${p.id}" /> <button type="submit" class="btn btn-success">提 交</button> </td> </tr> </table> </form> </div> </div> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>ID</th> <th>产品详情图片缩略图</th> <th>删除</th> </tr> </thead> <tbody> <c:forEach items="${pisDetail}" var="pi"> <tr> <td>${pi.id}</td> <td> <a title="点击查看原图" href="img/productDetail/${pi.id}.jpg"><img height="50px" src="img/productDetail/${pi.id}.jpg"></a> </td> <td><a deleteLink="true" href="admin_productImage_delete?id=${pi.id}"><span class=" glyphicon glyphicon-trash"></span></a></td> </tr> </c:forEach> </tbody> </table> </div> </td> </tr> </table> </div> <%@include file="../include/admin/adminFooter.jsp"%>
步骤 7 :

查询功能讲解

edit
增值内容,请先登录
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
查询功能讲解
public String list(HttpServletRequest request, HttpServletResponse response, Page page) { int pid = Integer.parseInt(request.getParameter("pid")); Product p =productDAO.get(pid); List<ProductImage> pisSingle = productImageDAO.list(p, ProductImageDAO.type_single); List<ProductImage> pisDetail = productImageDAO.list(p, ProductImageDAO.type_detail); request.setAttribute("p", p); request.setAttribute("pisSingle", pisSingle); request.setAttribute("pisDetail", pisDetail); return "admin/listProductImage.jsp"; }
<c:forEach items="${pisSingle}" var="pi"> <tr> <td>${pi.id}</td> <td> <a title="点击查看原图" href="img/productSingle/${pi.id}.jpg"><img height="50px" src="img/productSingle/${pi.id}.jpg"></a> </td> <td><a deleteLink="true" href="admin_productImage_delete?id=${pi.id}"><span class=" glyphicon glyphicon-trash"></span></a></td> </tr> </c:forEach>
<c:forEach items="${pisDetail}" var="pi"> <tr> <td>${pi.id}</td> <td> <a title="点击查看原图" href="img/productDetail/${pi.id}.jpg"><img height="50px" src="img/productDetail/${pi.id}.jpg"></a> </td> <td><a deleteLink="true" href="admin_productImage_delete?id=${pi.id}"><span class=" glyphicon glyphicon-trash"></span></a></td> </tr> </c:forEach>
步骤 8 :

增加功能讲解

edit
增值内容,请先登录
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
增加功能讲解
<form method="post" class="addFormSingle" action="admin_productImage_add" enctype="multipart/form-data"> <table class="addTable"> <tr> <td>请选择本地图片 尺寸400X400 为佳</td> </tr> <tr> <td> <input id="filepathSingle" type="file" name="filepath" /> </td> </tr> <tr class="submitTR"> <td align="center"> <input type="hidden" name="type" value="type_single" /> <input type="hidden" name="pid" value="${p.id}" /> <button type="submit" class="btn btn-success">提 交</button> </td> </tr> </table> </form>
public String add(HttpServletRequest request, HttpServletResponse response, Page page) { //上传文件的输入流 InputStream is = null; //提交上传文件时的其他参数 Map<String,String> params = new HashMap<>(); //解析上传 is = parseUpload(request, params); //根据上传的参数生成productImage对象 String type= params.get("type"); int pid = Integer.parseInt(params.get("pid")); Product p =productDAO.get(pid); ProductImage pi = new ProductImage(); pi.setType(type); pi.setProduct(p); productImageDAO.add(pi); //生成文件 String fileName = pi.getId()+ ".jpg"; String imageFolder; String imageFolder_small=null; String imageFolder_middle=null; if(ProductImageDAO.type_single.equals(pi.getType())){ imageFolder= request.getSession().getServletContext().getRealPath("img/productSingle"); imageFolder_small= request.getSession().getServletContext().getRealPath("img/productSingle_small"); imageFolder_middle= request.getSession().getServletContext().getRealPath("img/productSingle_middle"); } else imageFolder= request.getSession().getServletContext().getRealPath("img/productDetail"); File f = new File(imageFolder, fileName); f.getParentFile().mkdirs(); // 复制文件 try { if(null!=is && 0!=is.available()){ try(FileOutputStream fos = new FileOutputStream(f)){ byte b[] = new byte[1024 * 1024]; int length = 0; while (-1 != (length = is.read(b))) { fos.write(b, 0, length); } fos.flush(); //通过如下代码,把文件保存为jpg格式 BufferedImage img = ImageUtil.change2jpg(f); ImageIO.write(img, "jpg", f); if(ProductImageDAO.type_single.equals(pi.getType())){ File f_small = new File(imageFolder_small, fileName); File f_middle = new File(imageFolder_middle, fileName); ImageUtil.resizeImage(f, 56, 56, f_small); ImageUtil.resizeImage(f, 217, 190, f_middle); } } catch(Exception e){ e.printStackTrace(); } } } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return "@admin_productImage_list?pid="+p.getId(); }
步骤 9 :

删除功能讲解

edit
增值内容,请先登录
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
删除功能讲解
public String delete(HttpServletRequest request, HttpServletResponse response, Page page) { int id = Integer.parseInt(request.getParameter("id")); ProductImage pi = productImageDAO.get(id); productImageDAO.delete(id); if(ProductImageDAO.type_single.equals(pi.getType())){ String imageFolder_single= request.getSession().getServletContext().getRealPath("img/productSingle"); String imageFolder_small= request.getSession().getServletContext().getRealPath("img/productSingle_small"); String imageFolder_middle= request.getSession().getServletContext().getRealPath("img/productSingle_middle"); File f_single =new File(imageFolder_single,pi.getId()+".jpg"); f_single.delete(); File f_small =new File(imageFolder_small,pi.getId()+".jpg"); f_small.delete(); File f_middle =new File(imageFolder_middle,pi.getId()+".jpg"); f_middle.delete(); } else{ String imageFolder_detail= request.getSession().getServletContext().getRealPath("img/productDetail"); File f_detail =new File(imageFolder_detail,pi.getId()+".jpg"); f_detail.delete(); } return "@admin_productImage_list?pid="+pi.getProduct().getId(); }
增值内容,请先登录
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-12-19 关于在产品bean中定义的图片类型,我有些疑惑
那年的雪

如 : private ProductImage firstProductImage; 为什么要定义成ProductImage对象类型呢,而不是String呢? 因为在用POJO做的时候,不进行自包含处理,就抛异常; 感觉这个属性还是用String比较好吧. 在setFirstProductImage(Product p)方法里,直接set一个string; 地址可以直接从ProductImageServlet类属性获取;




4 个答案

那年的雪
答案时间:2020-12-20
自问自答下: 1. ProductImage对象类型的存在,更适合删改(比如主图的选择实现); 2. 如果以String对象类型,会将代码写的比较死(增添地址转换的麻烦); 3. 因此,前端可以根据PIID,更好的决定调用哪张图,如三种规格主图;

那年的雪
答案时间:2020-12-20
// 我是这样解决的 : public String list(HttpServletRequest request, HttpServletResponse response, Page page) { Integer pid = Integer.parseInt(request.getParameter("pid")); Product bean = productDAO.get(pid); bean.setProductSingleImages(productImageDAO.list(bean, ProductImageDAO.type_single)); bean.setProductSingleImages(productImageDAO.list(bean, ProductImageDAO.type_detail)); JsonConfig config = new JsonConfig(); config.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT); String json = JSONObject.fromObject(bean, config).toString(); return "%" + json; }

那年的雪
答案时间:2020-12-19
是JSON,不是POJO;打错字; 直接用JSON会抛:Caused by: net.sf.json.JSONException: There is a cycle in the hierarchy! 感觉是自包含的问题;晚一会试下用JSON_VO和JsonConfig来过滤试试. 还不能100%确定问题所在. 因为我一添加主图,ProductList也同样就读取不到数据了,之前的练习,没有做过滤;然而添加详情图是不存在冲突的.

那年的雪
答案时间:2020-12-19
是JSON,不是POJO;打错字; 直接用JSON会抛:Caused by: net.sf.json.JSONException: There is a cycle in the hierarchy! 感觉是自包含的问题;晚一会试下用JSON_VO和JsonConfig来过滤试试. 还不能100%确定问题所在.



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2020-07-27 产品图片管理界面排版问题
arsoooo




为啥我的排版很奇怪,没有像站长截图的那样表格对其,直接是歪的,而且中间空隙也很小,.jsp代码没有改动 我前端知识了解一点,没有看,所以稍微过了一下代码,发现可读性好差,而且不知道咋改 所以还想问一下前端html、jsp只能每个标签都自己敲,维护也不太好维护吗?
加载中

							

							


1 个答案

how2j
答案时间:2020-07-28
那就是改动导致的嘛。 前端html 所有代码都应该自己敲,尤其是在学习期间,都应该掌握消化理解,毕竟以后工作了,没人会帮忙工作,都要靠自己呀



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-06-29 站长,productSingle_middle和productSingle_small对应图片目录是不是忘记创建了呢?
2020-06-26 站长真帅!!!
2020-04-16 single图片


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 20 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 实践项目-天猫整站J2EE-产品图片管理 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图