淘淘商城第24讲——实现商品类目的选择

教员讲过：“会当水击三千里，自信人生两百年”。当我们实现商品列表查询这个功能之后，我相信大家都信心倍增，但这只是走完万里长征的第一步，后面还有嵩山峻岭等着我们去攀登，所以千万不可懈怠人生。本文我就来教大家如何实现商品类目的选择。

首先，当然还是启动我们的Zookeeper注册中心，然后启动taotao-manager工程和taotao-manager-web工程，启动成功后我们点击新增商品超链接，接着再点击选择类目按钮，发现打开的对话框是空白的，没有任何信息，如下图所示，这是因为我们还没有实现该界面的展示。

我们还是从index.jsp页面开始说起，如下图所示，可以看到当我们点击左侧菜单中的新增商品超链接时，是会自动去请求item-add.jsp这个页面的。我们在之前就已经实现了展示后台界面的功能。

接下来，我们来看看item-add.jsp页面的内容，我们从中可以看到，这个页面其实也是个代码片段，选择类目按钮其实是个链接，样式为easyui-linkbutton，我们会发现该链接并没有指定onClick事件，那么该链接是怎样触发鼠标点击事件的呢？其实是依据.selectItemCat样式来处理的，但是我们在item-add.jsp页面当中搜索会发现并没有定义.selectItemCat，那么它到底是在哪儿定义的呢？

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<div style="padding:10px 10px 10px 10px"><form id="itemAddForm" class="itemForm" method="post"><table cellpadding="5"><tr><td>商品类目:</td><td><a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a><input type="hidden" name="cid" style="width: 280px;"></input></td></tr><tr><td>商品标题:</td><td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td></tr><tr><td>商品卖点:</td><td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td></tr><tr><td>商品价格:</td><td><input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" /><input type="hidden" name="price"/></td></tr><tr><td>库存数量:</td><td><input class="easyui-numberbox" type="text" name="num" data-options="min:1,max:99999999,precision:0,required:true" /></td></tr><tr><td>条形码:</td><td><input class="easyui-textbox" type="text" name="barcode" data-options="validType:'length[1,30]'" /></td></tr><tr><td>商品图片:</td><td><a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a><input type="hidden" name="image"/></td></tr><tr><td>商品描述:</td><td><textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea></td></tr><tr class="params hide"><td>商品规格:</td><td></td></tr></table><input type="hidden" name="itemParams"/></form><div style="padding:5px"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a></div>
</div>
<script type="text/javascript">var itemAddEditor ;//页面初始化完毕后执行此方法$(function(){//创建富文本编辑器itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");//初始化类目选择和图片上传器TAOTAO.init({fun:function(node){//根据商品的分类id取商品 的规格模板，生成规格信息。第四天内容。//TAOTAO.changeItemParam(node, "itemAddForm");}});});//提交表单function submitForm(){//有效性验证if(!$('#itemAddForm').form('validate')){$.messager.alert('提示','表单还未填写完成!');return ;}//取商品价格，单位为“分”$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);//同步文本框中的商品描述itemAddEditor.sync();//取商品的规格/*var paramJson = [];$("#itemAddForm .params li").each(function(i,e){var trs = $(e).find("tr");var group = trs.eq(0).text();var ps = [];for(var i = 1;i<trs.length;i++){var tr = trs.eq(i);ps.push({"k" : $.trim(tr.find("td").eq(0).find("span").text()),"v" : $.trim(tr.find("input").val())});}paramJson.push({"group" : group,"params": ps});});//把json对象转换成字符串paramJson = JSON.stringify(paramJson);$("#itemAddForm [name=itemParams]").val(paramJson);*///ajax的post方式提交表单//$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串$.post("/item/save",$("#itemAddForm").serialize(), function(data){if(data.status == 200){$.messager.alert('提示','新增商品成功!');}});}function clearForm(){$('#itemAddForm').form('reset');itemAddEditor.html('');}
</script>

我们可以使用Ctrl+H快捷键来打开全文搜索对话框，在Containing text这一栏的输入框中输入我们想要搜索的内容，接着再指定在哪些类型的文件中搜索，最后点击Search按钮。

搜索完之后，可以看到如下图所示的搜索结果，我们双击进去看看。

可以看到在common.js文件中有关于.selectItemCat的事件定义。大家可能也注意到了，在item-add.jsp页面当中并没有引用common.js这个文件啊，为何能使用这个js文件呢？其实很简单，这是因为在index.jsp页面中引用了该js文件，而item-add.jsp页面只是index.jsp页面中的一个代码片段而已，因此它可以直接使用index.jsp页面中引用的js文件。

那么问题来了，这个选择类目按钮是什么时候被初始化的呢？我们可以从item-add.jsp页面底部的js代码中找到答案，如下图所示，可以看到，$(function){...}是页面加载完之后会执行的脚本，在这里面有TAOTAO.init方法来初始化类目选择，那么问题又来了，这个TAOTAO又是在哪儿定义的呢？

其实TAOTAO也是在common.js这个文件中定义的，如下图所示，可以看到TAOTAO中定义了一个init方法，并且在该方法中调用了this.initItemCat(data);来初始化类目选择组件。

你也可以看到，this.initItemCat(data);所对应的代码是下面这个样子的。

// 初始化选择类目组件
initItemCat : function(data){$(".selectItemCat").each(function(i,e){var _ele = $(e);if(data && data.cid){_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");}else{_ele.after("<span style='margin-left:10px;'></span>");}_ele.unbind('click').click(function(){$("<div>").css({padding:"5px"}).html("<ul>").window({width:'500',height:"450",modal:true,closed:true,iconCls:'icon-save',title:'选择类目',onOpen : function(){var _win = this;$("ul",_win).tree({url:'/item/cat/list',animate:true,onClick : function(node){if($(this).tree("isLeaf",node.target)){// 填写到cid中_ele.parent().find("[name=cid]").val(node.id);_ele.next().text(node.text).attr("cid",node.id);$(_win).window('close');if(data && data.fun){data.fun.call(this,node);}}}});},onClose : function(){$(this).window("destroy");}}).window('open');});});
},

大家对以上代码可能看得云里雾里，于是，我稍微对以上代码作了一点解释，希望能对大家的理解有帮助。

当我们发送url请求后，那么服务器应该返回什么样的数据呢？我们在展示商品分类列表时，需要使用到EasyUI的异步树控件，要是大家对其感到陌生，可以看看EasyUI的API文档。查阅EasyUI的API文档，我们知道了返回的数据是json对象的数组，而且节点必须有的属性是id、text以及state，其中children属性可有可无。

节点中的id、text以及state这些属性所代表的是什么意思呢？id属性代表节点的id，text属性代表节点的名称，state属性代表节点是否展开，如果节点下有子节点，那么state属性的值就为closed，如果没有子节点，那么state属性的值就为open。

下面我们来看看我们的数据库中存储商品分类的表以及存储的数据，如下图所示，可以看到该表有id、parent_id、name、status、sort_order、is_parent等字段，其中parent_id是用来表示树形关系的，is_parent表示是不是父节点，1表示是父节点，0表示是叶子节点。我们在上图中知道了要展示树形结构数据，需要有固定的三个字段，分别是id、text和state，那么对应到数据库中的字段便是id、name、is_parent这三个字段。

下面我们在taotao-common工程中新建一个pojo，即EasyUITreeNode.java，该pojo用来描述tree的节点信息，且包含id、text以及state这三个属性，如下图所示。

温馨提示：由于该类要在服务端和客户端之间传输，因此一定要实现序列化接口。

写完了pojo，我们再看看dao层，由于是单表查询，因此我们使用逆向工程自动生成的代码就可以，这样dao层就不用写了。既然dao层不用写，我们直接来看service层，如下图所示，我们需要新建一个ItemCatService接口并在其中定义一个方法。

接着，我们便来新建以上ItemCatService接口的一个实现类，如下图所示。

由于新增了服务实现类，因此我们需要在applicationContext-service.xml配置文件中发布Dubbo服务，即声明需要暴露的服务接口，如下图所示。

服务端的代码写完之后，接着我们便要来写客户端的代码了。我们新建一个ItemCatController类，如下图所示。由于parentId与所传递过来的参数id的名称不一致，因此需要使用@RequestParam(name = "id")注解来关联起来，由于刚开始的时候是不传id参数的，因此需要给id一个默认值0，也即defaultValue="0"。

温馨提示：ItemCatController类中获取分类节点列表方法的上面有@RequestMapping("/item/cat/list")这样一个注解，这个注解中的请求路径是我们从common.js的窗口打开事件中访问的地址复制而来的，如下图所示。

除此之外，我们还可以通过浏览器控制台提示的信息找到请求的路径，如下图所示。

既然在服务端使用Dubbo发布了ItemCatService服务，那么在客户端我们便需要使用Dubbo引用下该服务，方法是在springmvc.xml文件中进行引用，如下图所示。

最后我们重新打包taotao-common、taotao-manager工程到本地仓库，马上再重启taotao-manager和taotao-manager-web这两个工程，这时再次点击选择类目按钮，便可以看到商品分类列表了，如下图所示。

我们可以通过浏览器的控制台查看具体的请求及返回信息，我们发现第一次访问时并没有带id的信息，如下图所示。

当我们展开手机这个分类时，如下图所示，可以看到，这次访问便带上了参数id=558，这个id是从表单直接传递过去的。

这样我们便实现了商品分类的选择及展示。

淘淘商城第24讲——实现商品类目的选择相关推荐

淘淘商城第106讲——改造商品详情页面中的加入购物车板块
在上一讲中,我就说过,关于购物车模块,之前的京东和淘宝并不一样,之前的京东允许用户在没有登录的情况下就添加商品进购物车,而且加到购物车里面的商品可以一直保存着.其实这是将购物车信息写入到了Cookie ...
淘淘商城第77讲——实现商品详情页面展示
我相信大家通过上文的学习已经搭建好了商品详情页面展示工程,本文我将带领大家一起实现商品详情页面的展示. 首先我们来看一下商品详情页面的内容,可以看到商品一般属性在TbItem实体类中都是存在的,只是图 ...
淘淘商城第86讲——实现商品详情页面静态化方案时，你没遇到过java.lang.IllegalArgumentException或者java.lang.NullPointerException这种异常
问题描述今儿个,我在实现商品详情页面静态化方案时,遇到了一个蛮奇怪的异常,为什么说蛮奇怪呢?因为它只在第一次测试的时候出现过,后面就再也没出现过了. 我先描述一下这个异常是怎么出现的,我在淘淘商城后 ...
淘淘商城第三天—完成商品添加功能商品类目选择图片上传图片服务器搭建 kindEditor富文本编辑器的使用商品添加功能
1.实现商品类目选择功能 1.1需求在商品添加页面,点击"选择类目"显示商品类目列表: 请求初始化树形控件的url:/item/cat/list 1.2 EasyUI tree数 ...
淘淘商城第78讲——查询商品详情添加缓存的分析
通过上文的学习,我相信大家一定实现了商品详情页面的展示,接下来我们将学习如何在商品详情页面展示时添加缓存. 因为查询商品详情涉及到查询数据库,当商品详情页面的访问的并发量比较高时,查询商品详情都去查询 ...
淘淘商城第50讲——导入商品数据到索引库时，报错：org.apache.solr.client.solrj.impl.HttpSolrClient$RemoteSolrException
问题描述昨天碰到了一个问题,真的是把快我搞死了,导致我代码写下去的勇气都没有了,最后大爷我干脆不写了,我躺着睡觉还不行吗
淘宝电商api接口获取商品类目信息
item_cat_get-获得淘宝商品类目注册开通key测试返回值说明 API返回结果完整数据 { "item": { "num_iid&qu ...
一个淘淘商城项目送给你，愿你有一个灿烂的前程！
写在前面今天是2020年6月23日,星期二,天气晴.2020年已过一半,回想一下,这真是一个多灾多难的年份啊!可生活依然要继续,活着的人依然要继续前行.这是没道理的事情. 好了,回到主题,说说写这篇 ...
ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第七天(非原创)
文章大纲一.课程介绍二.Redis基础实战三.Redis之高可用.集群.云平台搭建实战四.淘淘商城Jedis整合spring 五.项目源码与资料下载六.参考文章一.课程介绍一共14天课程 ...

淘淘商城第24讲——实现商品类目的选择

淘淘商城第24讲——实现商品类目的选择相关推荐

最新文章

热门文章