[TOC] # 步骤 1 : 先运行，看到效果，再学习 先将完整的项目（向老师要相关资料），配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。 # 步骤 2 : 模仿和排错 在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。 模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较**正确答案** ( 可运行项目 ) 和自己的代码，来定位问题所在。 采用这种方式，**学习有效果，排错有效率**，可以较为明显地提升学习速度，跨过学习路上的各个槛。 # 步骤 3 : 页面截图 重启tomcat,通过访问地址 `http://127.0.0.1:8080/tmall_j2ee/admin_propertyValue_edit?productId=5` 可以看到产品属性设置的界面 >注： 这productId=4是产品的id，根据你的实际运行情况，采取不同的id值 >  # 步骤 4 : PropertyValue ``` package com.dodoke.bean; /******************************************************************************* * javaBeans t_property_value --> TPropertyValue <table explanation> * * @author 2019-01-17 08:35:28 * */ public class PropertyValue { // field /** ID **/ private int id; /** 属性值 **/ private String value; /** 所属产品 **/ private Product product; /** 所属属性 **/ private Property property; // method public int getId() { return id; } public void setId(int id) { this.id = id; } public String getValue() { return value; } public void setValue(String value) { this.value = value; } public Product getProduct() { return product; } public void setProduct(Product product) { this.product = product; } public Property getProperty() { return property; } public void setProperty(Property property) { this.property = property; } @Override public String toString() { return "PropertyValue [id=" + id + ", value=" + value + ", product=" + product + ", property=" + property + "]"; } } ``` # 步骤5：PropertyValueDao 根据属性id和产品id，获取一个PropertyValue对象 ``` public PropertyValue get(int ptid, int pid ) ``` 初始化某个产品对应的属性值，初始化逻辑： 1\. 根据分类获取所有的属性 2\. 遍历每一个属性 2.1 根据属性和产品，获取属性值 2.2 如果属性值不存在，就创建一个属性值对象 ``` public void init(Product p) ``` 查询某个产品下所有的属性值 ``` public List list(int pid) ``` ``` package com.dodoke.dao.inter; import java.util.List; import com.dodoke.bean.Product; import com.dodoke.bean.PropertyValue; public interface PropertyValueDao { /** * 增加 * * @param product */ public void add(PropertyValue product); /** * 修改 * * @param product */ public void update(PropertyValue product); /** * 根据属性值id查询对应属性值 * * @param id * @return */ public PropertyValue get(int id); /** * 某个产品下对应属性的属性值分页查询 * * @param ptid * 属性id * @param pid * 产品id * @return */ public PropertyValue get(int ptid, int pid); /** * 初始化某个产品对应的属性值 * * @param p */ public void init(Product p); /** * 根据产品查询所有属性值 * * @param pid * @return */ public List<PropertyValue> list(int pid); } ``` # 步骤6：PropertyValueDaoImpl ``` package com.dodoke.dao.impl; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import com.dodoke.bean.Product; import com.dodoke.bean.Property; import com.dodoke.bean.PropertyValue; import com.dodoke.dao.inter.PropertyValueDao; import com.dodoke.util.DBUtil; public class PropertyValueDaoImpl implements PropertyValueDao { @Override public void add(PropertyValue bean) { String sql = "insert into t_property_value(value,product_id,property_id) values(?,?,?)"; try (Connection c = DBUtil.getConnection(); PreparedStatement ps = c.prepareStatement(sql, Statement.RETURN_GENERATED_KEYS);) { ps.setString(1, bean.getValue()); ps.setInt(2, bean.getProduct().getId()); ps.setInt(3, bean.getProperty().getId()); ps.executeUpdate(); ResultSet rs = ps.getGeneratedKeys(); if (rs.next()) { int id = rs.getInt(1); bean.setId(id); } } catch (SQLException e) { e.printStackTrace(); } } @Override public void update(PropertyValue bean) { String sql = "update t_property_value set product_id= ?, property_id=?, value=? where id = ?"; try (Connection c = DBUtil.getConnection(); PreparedStatement ps = c.prepareStatement(sql);) { ps.setInt(1, bean.getProduct().getId()); ps.setInt(2, bean.getProperty().getId()); ps.setString(3, bean.getValue()); ps.setInt(4, bean.getId()); ps.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); } } @Override public PropertyValue get(int id) { PropertyValue bean = new PropertyValue(); String sql = "select * from t_property_value where id = ?"; try (Connection c = DBUtil.getConnection(); PreparedStatement ps = c.prepareStatement(sql);) { ps.setInt(1, id); ResultSet rs = ps.executeQuery(); if (rs.next()) { int pid = rs.getInt("product_id"); int ptid = rs.getInt("property_id"); String value = rs.getString("value"); Product product = new ProductDaoImpl().get(pid); Property property = new PropertyDaoImpl().get(ptid); bean.setProduct(product); bean.setProperty(property); bean.setValue(value); bean.setId(id); } } catch (SQLException e) { e.printStackTrace(); } return bean; } @Override public PropertyValue get(int ptid, int pid) { PropertyValue bean = null; String sql = "select * from t_property_value where property_id = ? and product_id = ?"; try (Connection c = DBUtil.getConnection(); PreparedStatement ps = c.prepareStatement(sql);) { ps.setInt(1, ptid); ps.setInt(2, pid); ResultSet rs = ps.executeQuery(); if (rs.next()) { bean = new PropertyValue(); int id = rs.getInt("id"); String value = rs.getString("value"); Product product = new ProductDaoImpl().get(pid); Property property = new PropertyDaoImpl().get(ptid); bean.setProduct(product); bean.setProperty(property); bean.setValue(value); bean.setId(id); } } catch (SQLException e) { e.printStackTrace(); } return bean; } @Override public void init(Product p) { List<Property> pts = new PropertyDaoImpl().list(p.getCategory().getId()); for (Property pt : pts) { PropertyValue pv = get(pt.getId(), p.getId()); if (null == pv) { pv = new PropertyValue(); pv.setProduct(p); pv.setProperty(pt); this.add(pv); } } } @Override public List<PropertyValue> list(int pid) { List<PropertyValue> beans = new ArrayList<PropertyValue>(); String sql = "select * from t_property_value where product_id = ? order by property_id desc"; try (Connection c = DBUtil.getConnection(); PreparedStatement ps = c.prepareStatement(sql);) { ps.setInt(1, pid); ResultSet rs = ps.executeQuery(); while (rs.next()) { PropertyValue bean = new PropertyValue(); int id = rs.getInt("id"); int ptid = rs.getInt("property_id"); String value = rs.getString("value"); Product product = new ProductDaoImpl().get(pid); Property property = new PropertyDaoImpl().get(ptid); bean.setProduct(product); bean.setProperty(property); bean.setValue(value); bean.setId(id); beans.add(bean); } } catch (SQLException e) { e.printStackTrace(); } return beans; } } ``` # 步骤7：PropertyValueServlet ``` package com.dodoke.controller; import java.util.List; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.dodoke.bean.Product; import com.dodoke.bean.PropertyValue; import com.dodoke.util.Page; /** * Servlet implementation class PropertyServlet */ @WebServlet("/PropertyValueServlet") public class PropertyValueServlet extends BaseBackServlet { private static final long serialVersionUID = 1L; public String editPropertyValue(HttpServletRequest request, HttpServletResponse response) { String idTmp = request.getParameter("id"); int id = 0; if (null != idTmp) { id = Integer.parseInt(idTmp); } Product p = productDao.get(id); propertyValueDao.init(p); List<PropertyValue> pvs = propertyValueDao.list(p.getId()); request.setAttribute("p", p); request.setAttribute("pvs", pvs); return "admin/editProductValue.jsp"; } public String updatePropertyValue(HttpServletRequest request, HttpServletResponse response) { int pvid = Integer.parseInt(request.getParameter("pvid")); String value = request.getParameter("value"); PropertyValue pv = propertyValueDao.get(pvid); pv.setValue(value); propertyValueDao.update(pv); return "%success"; } @Override public String add(HttpServletRequest request, HttpServletResponse response) { // TODO Auto-generated method stub return null; } @Override public String delete(HttpServletRequest request, HttpServletResponse response) { // TODO Auto-generated method stub return null; } @Override public String edit(HttpServletRequest request, HttpServletResponse response) { // TODO Auto-generated method stub return null; } @Override public String update(HttpServletRequest request, HttpServletResponse response) { // TODO Auto-generated method stub return null; } @Override public String list(HttpServletRequest request, HttpServletResponse response, Page page) { // TODO Auto-generated method stub return null; } } ``` # 步骤 8: editProductValue.jsp ``` <%@ 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"%> <title>编辑产品属性值</title> <script> $(function() { $("input.pvValue").keyup(function(){ var value = $(this).val(); var page = "admin_propertyValue_updatePropertyValue"; var pvid = $(this).attr("pvid"); var parentSpan = $(this).parent("span"); parentSpan.css("border","1px solid yellow"); $.post( page, {"value":value,"pvid":pvid}, function(result){ if("success"==result) parentSpan.css("border","1px solid green"); else parentSpan.css("border","1px solid red"); } ); }); }); </script> <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> <div class="editPVDiv"> <c:forEach items="${pvs}" var="pv"> <div class="eachPV"> <span class="pvName" >${pv.property.name}</span> <span class="pvValue"><input class="pvValue" pvid="${pv.id}" type="text" value="${pv.value}"></span> </div> </c:forEach> <div style="clear:both"></div> </div> </div> ``` # 步骤 9 : 编辑功能讲解 通过产品管理界面的设置属性，跳到编辑页面 调用PropertyValueServlet的editPropertyValue方法： 1\. 获取参数id 2\. 根据id获取Product对象p 3\. 初始化属性值： propertyValueDAO.init(p)。 因为如果是第一次访问，这些属性值是不存在的。 4\. 根据Product的id，获取产品对应的属性值集合 5\. 属性值集合放在request的 "pvs" 属性上 6\. 服务端跳转到admin/editProductValue.jsp 上 7\. 在editProductValue.jsp上，用c:forEach遍历出这些属性值 PropertyValueServlet ``` public String editPropertyValue(HttpServletRequest request, HttpServletResponse response) { String idTmp = request.getParameter("id"); int id = 0; if (null != idTmp) { id = Integer.parseInt(idTmp); } Product p = productDao.get(id); propertyValueDao.init(p); List<PropertyValue> pvs = propertyValueDao.list(p.getId()); request.setAttribute("p", p); request.setAttribute("pvs", pvs); return "admin/editProductValue.jsp"; } ``` editProductValue ``` <c:forEach items="${pvs}" var="pv"> <div class="eachPV"> <span class="pvName" >${pv.property.name}</span> <span class="pvValue"><input class="pvValue" pvid="${pv.id}" type="text" value="${pv.value}"></span> </div> </c:forEach> ``` # 步骤10: 修改功能讲解 修改功能采用的是使用**post方式提交ajax**的异步调用方式 1\. 是监听输入框上的keyup事件 2\. 获取输入框里的值 3\. 获取输入框上的自定义属性pvid，这就是当前PropertyValue对应的id 4\. 把边框的颜色修改为黄色，表示正在修改的意思 5\. 借助JQuery的ajax函数 $.post，把id和值，提交到admin\_productValue\_updatePropertyValue 6\. admin\_productValue\_updatePropertyValue导致PropertyValueServlet的updatePropertyValue方法被调用 6.1 获取pvid 6.2 获取value 6.3 基于pvid和value,更新PropertyValue对象 6.4 返回"%success" 7\. BaseBackServlet根据返回值"%success"，直接输出字符串"success" 到浏览器 8\. 浏览器判断如果返回值是"success",那么就把边框设置为绿色，表示修改成功，否则设置为红色，表示修改失败 PropertyValueServlet ``` public String updatePropertyValue(HttpServletRequest request, HttpServletResponse response) { int pvid = Integer.parseInt(request.getParameter("pvid")); String value = request.getParameter("value"); PropertyValue pv = propertyValueDao.get(pvid); pv.setValue(value); propertyValueDao.update(pv); return "%success"; } ``` editProductValue ``` $(function() { $("input.pvValue").keyup(function(){ var value = $(this).val(); var page = "admin_propertyValue_updatePropertyValue"; var pvid = $(this).attr("pvid"); var parentSpan = $(this).parent("span"); parentSpan.css("border","1px solid yellow"); $.post( page, {"value":value,"pvid":pvid}, function(result){ if("success"==result) parentSpan.css("border","1px solid green"); else parentSpan.css("border","1px solid red"); } ); }); }); ``` # 步骤11: 删除，增加功能不需要 属性的维护是在分类中进行，这里仅仅做值的设置。 不提供删除和增加功能