產品屬性值設置 · 模仿天貓整站_J2EE版

[TOC] # 步驟 1 : 先運行，看到效果，再學習先將完整的項目（向老師要相關資料），配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。 # 步驟 2 : 模仿和排錯在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較**正確答案** ( 可運行項目 ) 和自己的代碼，來定位問題所在。采用這種方式，**學習有效果，排錯有效率**，可以較為明顯地提升學習速度，跨過學習路上的各個檻。 # 步驟 3 : 頁面截圖重啟tomcat,通過訪問地址 `http://127.0.0.1:8080/tmall_j2ee/admin_propertyValue_edit?productId=5` 可以看到產品屬性設置的界面 >注：這productId=4是產品的id，根據你的實際運行情況，采取不同的id值 > ![](https://box.kancloud.cn/a845850326eeef07f8fee70c571420c0_909x160.png) # 步驟 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: 刪除，增加功能不需要屬性的維護是在分類中進行，這里僅僅做值的設置。不提供刪除和增加功能