Java大型互联网项目-移动电子商城-商品添加模块开发节选
四大TAB
基本信息填写页面
对应的表是EB_ITEM, tab_1是一个静态的表单
商品描述填写页面-利用FCK富文本编辑器
商品参数填写页面
查询出基本的属性在tab3中以不同的方式展示
展示的时候，要展示的是属性的选项，属性的选项是用逗号分隔的字符串
<c:forEach>可以默认的把以逗号分隔的字符串作为一个集合来遍历
如Windows8,Android2.3,Android4.0,Android4.1,Android2.3.5,Android,IOS,Windows Mobile,Symbian,其他
扫描二维码关注公众号，回复：
8928430 查看本文章
规格信息填写页面
TAG前端JSP代码
TAB1_基本信息
<div id="tab_1" class="edit set">
<p><label><samp>*</samp>商品名称：</label>
<input type="text" reg1="^(.{1,100})$" desc="100以内任意字符" id="itemName" name="itemName" class="text state" value="${ebItem.itemName}" maxlength="100"/></p>
<input type="hidden" id="catId" name="catId" value="1" />
<p><label>商品品牌：</label>
<select id="brandId" name="brandId">
<option value="">请选择</option>
<c:forEach items="${bList }" var="brand">
<option value="${brand.brandId }">${brand.brandName }</option>
</c:forEach>
</select></p>
<div id="tagId" class="up_box" style="display:none">
</div>
<p><label>促销语：</label>
<input type="text" id="promotion" name="promotion" reg1="^(.{0,100})$" desc="100以内任意字符" class="text state" value="${ebItem.promotion}" maxlength="100"/>
<span class="pos"></span>
</p>
<p><label>是否是新品：</label>
<input name="isNew" type="radio" value="1" checked="checked"/>是
<input name="isNew" type="radio" value="0" />否
</p>
<p><label>是否是推荐：</label>
<input name="isGood" type="radio" value="1" />是
<input name="isGood" type="radio" value="0" checked="checked"/>否
</p>
<p><label>是否是热卖：</label>
<input name="isHot" type="radio" value="1" />是
<input name="isHot" type="radio" value="0" checked="checked"/>否
</p>
<a name="uploadImgs" id="uploadImgs"></a>
<p><label><samp>*</samp>上传商品图片(90x150尺寸)：</label><span id="uploadImgTip1" class="orange">注:该尺寸图片必须为90x150。</span></p>
<p><label></label>
<img id='imgsImgSrc' src='${path}/ecps/console/images/logo266x64.png' height="100" width="100" />
<input type='file' id='imgsFile' name='imgsFile' class="file" onchange='submitImgSize1Upload()' /><span class="pos" id="imgSize1FileSpan">请上传图片的大小不超过3MB</span>
<input type='hidden' id='imgs' name='imgs' value='' reg="^.+$" tip="亲！您忘记上传图片了。" />
</p>
<p>
<label>页面关键词：</label><input type="text" reg1="^.{0,50}$" desc="50个字符以内" id="keywords" name="keywords" class="text state" value="${ebItem.keywords}"/>
</p>
<p><label class="alg_t">页面描述：</label><textarea id="pageDesc" reg1="^(.|\n){0,130}$" desc="130个以内的任意字符" name="pageDesc" class="are" rows="6" cols="45">${ebItem.pageDesc}</textarea>
</p>
</div>
TAB_2_商品描述
<div id="tab_2" class="edit" style="display: none">
<textarea name="itemDesc" id="itemDesc" ></textarea>
</div>
TAB_3_商品属性
<div id="tab_3" class="edit set" style="display: none">
<c:if test="${fn:length(commList) == 0 }">
<p><label>无属性</label></p>
</c:if>
<c:forEach items="${commList }" var="feature">
<p>
<label>${feature.featureName }:</label>
<c:if test="${feature.inputType == 1 }">
<select name="${feature.featureId }">
<option value="">请选择</option>
<c:forEach items="${feature.selectValues }" var="val">
<option value="${val }">${val }</option>
</c:forEach>
</select>
</c:if>
<c:if test="${feature.inputType == 2 }">
<c:forEach items="${feature.selectValues }" var="val">
<input type="radio" name="${feature.featureId }" value="${val }">${val }
</c:forEach>
</c:if>
<c:if test="${feature.inputType == 3 }">
<c:forEach items="${feature.selectValues }" var="val">
<input type="checkbox" name="${feature.featureId }" value="${val }">${val }
</c:forEach>
</c:if>
</p>
</c:forEach>
</div>
TAB4_规格与最小单元
<div id="tab_4" style="display:none">
<div id="sp_0" class="sp_0">
<table cellspacing="0" summary="" class="tab3">
<c:if test="${fn:length(specList) == 0}">
<tr><th colspan="2" class="gray b"> <b>默认</b></th></tr>
</c:if>
<c:forEach items="${specList }" var="feature">
<tr>
<td>${feature.featureName }</td>
<td>
<c:forEach items="${feature.selectValues }" var="val">
<input type="radio" name="${feature.featureId }specradio1" value="${val }">${val }
</c:forEach>
</td>
</tr>
</c:forEach>
<tr><td colspan="2">
<table cellspacing="0">
<tr>
<th>排序</th>
<th>商城价</th>
<th>市场价</th>
<th>库存</th>
<th>购买上限</th>
<th>货号</th>
<th style='display:none;' >货位</th>
<th>上架</th>
<th>类型</th>
<th>操作</th>
</tr>
<tr>
<td width="10%" class="nwp"><input type="text" reg1="^[0-9]{0,2}$" desc="2个字符以内" id="sort" class="text20" name="sort1" maxlength="2" size="5" /></td>
<td width="12%" class="nwp"><samp class="red">*</samp> <input reg1="^[0-9]{1,7}\.{0,1}[0-9]{0,2}$" desc="保留2位小数，最多允许9位有效数字" type="text" id="skuPrice" name="skuPrice1"class="text20" size="5" οnblur="changePri(this)"/></td>
<td width="12%" class="nwp"><input type="text" id="marketPrice" name="marketPrice1" class="text20" reg1="^[0-9]{0,7}\.{0,1}[0-9]{0,2}$" desc="保留2位小数，最多允许9位有效数字" size="5" onblur="changePri(this)"/></td>
<td width="12%" class="nwp"><samp class="red">*</samp><input reg1="^(0|[1-9][0-9]{0,4})$" desc="5个字符以内非负整数" type="text" id="stockInventory" name="stockInventory1" class="text20" size="5" /></td>
<td width="12%" class="nwp"><input reg1="^(.{0,0}|0|[1-9][0-9]{0,4})$" desc="请输入5个字符以内非负整数或为空 " type="text" id="skuUpperLimit" name="skuUpperLimit1" class="text20" size="5"/></td>
<td width="12%" class="nwp"><input type="text" id="sku" name="sku1" class="text20" reg1="^[a-zA-Z0-9_\u4e00-\u9fa5]{0,20}$" desc="20个字符以内" size="5"/></td>
<td width="12%" class="nwp" style='display:none;' ><input reg1="^[a-zA-Z0-9_\u4e00-\u9fa5]{0,20}$" desc="20个字符以内" type="text" id="location" name="location1" class="text20" size="5" /></td>
<td>
<select id="showStatus1" name="showStatus1">
<option value="0" selected>上架 </option>
<option value="1" >下架</option>
</select>
</td>
<td>
<select id="skuType" name="skuType1">
<!-- option value="0">赠品</option-->
<option value="1" selected>普通</option>
</select>
</td>
<td><input type="button" value="删除" class="hand btn60x20" onclick="clickRemove('#sp_0')"/></td>
</tr>
</table>
</td></tr>
</table>
</div>
<c:if test="${fn:length(specList) != 0}">
<div class="page_c">
<span class="r"><input type="button" value="增加规格" id="button2" name="button2" class="hand btn80x20" />
</span>
</div>
</c:if>
</div>
相关的JS代码
规格div的增加与删除
查询出来的特殊的属性在页面上展示
点击添加按钮：实现添加多个最小销售单元
分析：复制已有的最小销售单元的代码，粘贴在下面
每一个div的编号是不一样的，用到的属性或者是值都需要加上div的编号
//实现页面规格的自动增加和删除
$("#button2").click(function(){
//累加div的编号
divNum++;
//获得sp_0这个div内部的html代码，不包括自己
var divHtml = $("#sp_0").html();
//把sp_0内部的代码加上div，修改div的id，用div的编号来标识
divHtml = "<div id='sp_"+divNum+"' class='sp_0'>"+divHtml+"</div>";
//把每一个div中的特殊属性的name加上div的编号
divHtml = divHtml.replace(/specradio1/g, "specradio"+divNum);
//替换每一个最小销售单元中的name
// skuType1 showStatus1 sort1 skuPrice1 marketPrice1 stockInventory1 skuUpperLimit1 sku1 location1
divHtml = divHtml.replace(/skuType1/g, "skuType"+divNum);
divHtml = divHtml.replace(/showStatus1/g, "showStatus"+divNum);
divHtml = divHtml.replace(/sort1/g, "sort"+divNum);
divHtml = divHtml.replace(/skuPrice1/g, "skuPrice"+divNum);
divHtml = divHtml.replace(/marketPrice1/g, "marketPrice"+divNum);
divHtml = divHtml.replace(/stockInventory1/g, "stockInventory"+divNum);
divHtml = divHtml.replace(/skuUpperLimit1/g, "skuUpperLimit"+divNum);
divHtml = divHtml.replace(/sku1/g, "sku"+divNum);
divHtml = divHtml.replace(/location1/g, "location"+divNum);
divHtml = divHtml.replace(/#sp_0/g, "#sp_"+divNum);
//把复制的div追加在最后
$(".page_c").before(divHtml);
$("#divNum").val(divNum);
//alert(divHtml)
});
删除
第一个不能允许用户删除
function clickRemove(id){
if(id == "#sp_0"){
alert("默认的最小销售单元不能删除");
return;
}
if(confirm("确认要删除当前最小销售单元吗?")){
$(id).remove();
}
}
参数接收
tab_1和tab_2使用springmvc的实体对象接收方式即可。
tab_3是动态的表单，需要使用request来接收，要想使用request就必须得到页面上每一个文本域的name，name的规则是Feature的id作为name，意味着我们只要获得Feature的id就能获得到页面选择的值
表单提交需要经过控制模块的逻辑
@RequestMapping("/addItem.do")
public String addItem(EbItem item, EbItemClob itemClob, Integer divNum,
HttpServletRequest request ){
List<EbParaValue> paraList = new ArrayList<EbParaValue>();
//生成商品的编号,->时间戳
item.setItemNo(new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()));
//从后台来查询普通属性的集合，这个集合正是tab_3中所展示属性
List<EbFeature> commList = featureService.selectCommFeature();
for(EbFeature feature: commList){
//获得属性id（tab3文本域的name）
Long featureId = feature.getFeatureId();
if(feature.getInputType() == 3){
/*前台的featureID是字符串，所以需要加空串让它自动转换*/
String [] paraVals = request.getParameterValues(featureId+"");
if(paraVals != null && paraVals.length > 0){
String paraValues = "";
for(String paraVal : paraVals){
paraValues = paraValues + paraVal + ",";
}
paraValues = paraValues.substring(0, paraValues.length() -1);
EbParaValue pv = new EbParaValue();
pv.setParaValue(paraValues);
pv.setFeatureId(featureId);
paraList.add(pv);
}
}else{
//获得单选和下拉的值
String paraVal = request.getParameter(featureId+"");
if(StringUtils.isNotBlank(paraVal)){
//创建商品参数值的表的对象
EbParaValue pv = new EbParaValue();
pv.setParaValue(paraVal);
pv.setFeatureId(featureId);
paraList.add(pv);
}
}
}
List<EbSku> skuList = new ArrayList<EbSku>();
List<EbFeature> specList = featureService.selectSpecFeature();
for(int i = 1; i <=divNum; i++){
//skuType1 showStatus1 sort1 skuPrice1 marketPrice1 stockInventory1 skuUpperLimit1 sku1 location1
String skuPrice = request.getParameter("skuPrice"+i);
String stockInventory = request.getParameter("stockInventory"+i);
//判断div没有断档的情况
if(StringUtils.isNotBlank(skuPrice) && StringUtils.isNotBlank(stockInventory)){
String skuType = request.getParameter("skuType"+i);
String showStatus = request.getParameter("showStatus"+i);
String sort = request.getParameter("sort"+i);
String marketPrice = request.getParameter("marketPrice"+i);
String skuUpperLimit = request.getParameter("skuUpperLimit"+i);
String location = request.getParameter("location"+i);
String sku = request.getParameter("sku"+i);
//创建sku对象
EbSku skuObj = new EbSku();
//设置对象的值的时候一定要判断
skuObj.setSkuPrice(new BigDecimal(skuPrice));
skuObj.setStockInventory(new Integer(stockInventory));
if(StringUtils.isNotBlank(skuType)){
skuObj.setSkuType(new Short(skuType));
}
if(StringUtils.isNotBlank(showStatus)){
skuObj.setShowStatus(new Short(showStatus));
}
if(StringUtils.isNotBlank(sort)){
skuObj.setSkuSort(new Integer(sort));
}
if(StringUtils.isNotBlank(marketPrice)){
skuObj.setMarketPrice(new BigDecimal(marketPrice));
}
if(StringUtils.isNotBlank(skuUpperLimit)){
skuObj.setSkuUpperLimit(new Integer(skuUpperLimit));
}
skuObj.setLocation(location);
skuObj.setSku(sku);
List<EbSpecValue> evList = new ArrayList<EbSpecValue>();
//遍历特殊属性
for(EbFeature feature : specList){
//获得到特殊属性的Id"
Long featureId = feature.getFeatureId();
String specVal = request.getParameter(featureId+"specradio"+i);
EbSpecValue ev = new EbSpecValue();
ev.setFeatureId(featureId);
ev.setSpecValue(specVal);
evList.add(ev);
}
skuObj.setSpecList(evList);
skuList.add(skuObj);
}
}
itemService.saveItem(item, itemClob, paraList, skuList);
return "redirect:listItem.do?showStatus=1&auditStatus=1";
}
测试成功
