|
|
步骤 2 : 模仿和排错 步骤 3 : 页面截图 步骤 4 : ProductImageServlet类 步骤 5 : web.xml 步骤 6 : listProductImage.jsp 步骤 7 : 查询功能讲解 步骤 8 : 增加功能讲解 步骤 9 : 删除功能讲解 步骤 10 : 编辑和修改
增值内容，请先登录
完整的J2EE模仿天猫项目，使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈， 从无到有涵盖全部147个知识点，475个开发步骤, 充实J2EE项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
增值内容，请先登录
完整的J2EE模仿天猫项目，使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈， 从无到有涵盖全部147个知识点，475个开发步骤, 充实J2EE项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
增值内容，请先登录
完整的J2EE模仿天猫项目，使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈， 从无到有涵盖全部147个知识点，475个开发步骤, 充实J2EE项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
增值内容，请先登录
完整的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>
增值内容，请先登录
完整的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"%>
增值内容，请先登录
完整的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>
增值内容，请先登录
完整的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();
}
增值内容，请先登录
完整的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中定义的图片类型,我有些疑惑
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
产品图片管理界面排版问题
1 个答案
how2j 跳转到问题位置 答案时间：2020-07-28 那就是改动导致的嘛。
前端html 所有代码都应该自己敲，尤其是在学习期间，都应该掌握消化理解，毕竟以后工作了，没人会帮忙工作，都要靠自己呀
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-06-29
站长，productSingle_middle和productSingle_small对应图片目录是不是忘记创建了呢？
2020-06-26
站长真帅！！！
2020-04-16
single图片
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 20 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||||||
