管理界面基本都一个样式，没什么花哨的东西！！～～
一、获取商品列表
1、导入后台静态资源可以下载
https://download.csdn.net/download/cowboyclimber/10379798
2、在SpringMVC中配置静态资源（如果不配置会出现静态资源不加载的情况）
<!-- 配置静态资源映射 -->
<mvc:resources location="/css/" mapping="/css/**"/>
<mvc:resources location="/js/" mapping="/js/**"/>3、实现查询商品列表的功能
展示主要使用的easyui的数据网格来实现的，数据网格可以自带分页功能，会自动的将当前页page和rows发送给后台，后台只要按照一定的格式将数据返回给easyui就行。
创建easyui分页的通用类-common工程下面。
public class EasyUIDataGridResult implements Serializable{
/**
*
*/
private static final long serialVersionUID = -4991941446091207726L;
private Long total;
private List rows;
public Long getTotal() {
return total;
}
public void setTotal(Long total) {
this.total = total;
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
}在interface层：
public EasyUIDataGridResult getItemDataGrid(Integer page,Integer rows);@Override
public EasyUIDataGridResult getItemDataGrid(Integer page,Integer rows) {
/*
* 1、mybatis文件配置分页插件
* 2、在执行查询前设置分页条件
* 3、执行查询
*/
PageHelper.startPage(page, rows);
// 创建Example对象
TbItemExample example = new TbItemExample();
List<TbItem> list = itemMapper.selectByExample(example);
Page<TbItem> info = (Page<TbItem>) list;
EasyUIDataGridResult result = new EasyUIDataGridResult();
result.setRows(info.getResult());
result.setTotal(info.getTotal());
return result;
}
web层：
@RequestMapping("/item/list")
@ResponseBody
public EasyUIDataGridResult getItemDataGrid(Integer page,Integer rows) {
EasyUIDataGridResult result = itemService.getItemDataGrid(page,rows);
return result;
} 3、easyui的数据网格响应信息
easyui的数据网格会自动向后台发送page和rows，然后响应信息必须是一个json串，其格式必须为：
{"total":3096,"rows":[{"id":536563,"title":"new2 - 阿尔卡特 (OT-927) 炭黑 联通3G手机 双卡双待","sellPoint":"清仓！仅北京，武汉仓有货！","price":29900000,"num":99999,"barcode":"","image":"http://image.taotao.com/jd/4ef8861cf6854de9889f3db9b24dc371.jpg","cid":560,"status":1,"created":1425821598000,"updated":1428755918000},{"id":562379,"title":"new8- 三星 W999 黑色 电信3G手机 双卡双待双通","sellPoint":"下单送12000毫安移动电源！双3.5英寸魔焕炫屏，以非凡视野纵观天下时局，尊崇翻盖设计，张弛中，尽显从容气度！","price":1100,"num":99999,"barcode":"","image":"http://image.taotao.com/jd/d2ac340e728d4c6181e763e772a9944a.jpg","cid":560,"status":1,"created":1425821274000,"updated":1428829843000}]}4、pageHelper的使用：
maven：
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>${pagehelper.version}</version>
</dependency>/*
* 1、mybatis文件配置分页插件
* 2、在执行查询前设置分页条件
* 3、执行查询
*/
PageHelper.startPage(1, 10);//这两个参数一个是page一个是pageSize
ApplicationContext ctx =new ClassPathXmlApplicationContext("classpath:Spring/ApplicationConfig.xml");
TbItemMapper itMapper = ctx.getBean(TbItemMapper.class);
// 创建Example对象
TbItemExample example = new TbItemExample();
List<TbItem> list = itMapper.selectByExample(example);
Page<TbItem> info = (Page<TbItem>) list;
System.out.println(info.getTotal()+"======================");
System.out.println(info.getTotal()+"======================"+list.size());
}二、获取商品栏目信息
数据库中的数据结构：
CREATE TABLE `tb_content_category` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '类目ID',
`parent_id` bigint(20) DEFAULT NULL COMMENT '父类目ID=0时，代表的是一级的类目',
`name` varchar(50) DEFAULT NULL COMMENT '分类名称',
`status` int(1) DEFAULT '1' COMMENT '状态。可选值:1(正常),2(删除)',
`sort_order` int(4) DEFAULT NULL COMMENT '排列序号，表示同级类目的展现次序，如数值相等则按名称次序排列。取值范围:大于零的整数',
`is_parent` tinyint(1) DEFAULT '1' COMMENT '该类目是否为父类目，1为true，0为false',
`created` datetime DEFAULT NULL COMMENT '创建时间',
`updated` datetime DEFAULT NULL COMMENT '创建时间',
PRIMARY KEY (`id`),
KEY `parent_id` (`parent_id`,`status`) USING BTREE,
KEY `sort_order` (`sort_order`)
) ENGINE=InnoDB AUTO_INCREMENT=98 DEFAULT CHARSET=utf8 COMMENT='内容分类';前端分析：
<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>a、这里主要是通过类选择器selectItemCat的加载相关的类目信息，然后点击事件将相关的值赋值给Input域。
b、通过文件搜索进入common.js中找到如下的内容：
// 初始化选择类目组件
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');
});
});
}这里说明下：
$(".selectItemCat").each（）通过类选择器，每个有商品分类功能的都执行该功能，each就是对对选择中的jq元素所执行的方法。
function(i,e)中i指的是jq元素下标，e指的是当前的元素。
if(data && data.cid){
_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
}else{
_ele.after("<span style='margin-left:10px;'></span>");
}
如果传入的data中有cid信息，将在该元素的后面显示出来
_ele.unbind('click').click(function(){。。。}
unbind：解除绑定事件，上面整句话的意思就是，解除绑定并重新绑定click事件：
$("<div>").css({padding:"5px"}).html("<ul>")
.window（）
设置div的css样式，并将html的内容变为列表
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');
open函数，当窗口打开的时候触发，而又所有的父节点默认打开，所以又会重新请求后面的tree相关的函数，这样把分类信息都给带过来了。
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);
}
}
}
});
onclick函数，当点击的是叶子节点的时候触发，将id放置到Input域中，并将node.text内容放到<span style='margin-left:10px;'></span>这里面来。
实现：
创建用于转换成json的对象：
public class EasyUITreeNode implements Serializable {
private Long id;//数据库中bigint
private String state;
private String text;
….
}
在这里犯了一个错误：将state变成了status了，最后出现的结果中只有一级的父目录。同时该类必须是要序列化的。
创建相关的接口和相关的实现类：
@Service
public class ItemCatServiceImpl implements ItemCatService {
@Autowired
private TbItemCatMapper itemcatMapper;
@Override
public List<EasyUITreeNode> getItemCatNodes(long parentId) {
// 根据父节点查找子节点
TbItemCatExample example = new TbItemCatExample();
// 设置查询条件
Criteria criteria = example.createCriteria();
criteria.andParentIdEqualTo(parentId);
// 执行查询
List<TbItemCat> itemCatList =itemcatMapper.selectByExample(example);
List<EasyUITreeNode> resultList = new ArrayList<EasyUITreeNode>();
for(TbItemCat cat:itemCatList) {
EasyUITreeNode node = new EasyUITreeNode();
node.setId(cat.getId());
node.setText(cat.getName());
// 如果有子节点则是“closed”，如果没有子节点则是open
node.setState(cat.getIsParent()?"closed":"open");
resultList.add(node);
}
return resultList;
}
}
这里犯了一个错误：没有将结果添加到resultList中导致返回的json是空的，改正。 注册服务：
<dubbo:service interface="com.taotao.service.ItemCatService" ref="itemCatServiceImpl" timeout="3000"></dubbo:service>web层引用服务：
<dubbo:reference interface="com.taotao.service.ItemCatService" id="itemCatServiceImpl" timeout="3000"></dubbo:reference>1、因为动了common所以需要先maven install
2、启动zookeeper
3、启动mannger
4、启动web
5、访问
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
