淘淘第二天后台管理

最新推荐文章于 2018-08-28 11:16:33 发布

李二的Blog

最新推荐文章于 2018-08-28 11:16:33 发布

阅读量293

点赞数

分类专栏：项目学习项目学习

本文链接：https://blog.csdn.net/CowBoyClimber/article/details/80113413

版权

项目学习同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

项目学习

8 篇文章 0 订阅

订阅专栏

管理界面基本都一个样式，没什么花哨的东西！！～～

一、获取商品列表

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);

在service层：这里面使用了pagehelper进行分页，使用的Mybatis的拦截器实现的。具体的源码没有细究。

@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、访问

李二的Blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淘淘第二天后台管理

管理界面基本都一个样式，没什么花哨的东西！！～～一、获取商品列表1、导入后台静态资源可以下载 https://download.csdn.net/download/cowboyclimber/103797982、在SpringMVC中配置静态资源（如果不配置会出现静态资源不加载的情况） &lt;!-- 配置静态资源映射 --&gt; &l...
复制链接

扫一扫