开始前先聊聊五毛钱的:
好久没写了,可能是因为懒(哎),写这个是好事,既帮助了自己,巩固一下知识,也可以让别人给自己纠错纠错,三月份接触到了node,先是跟着一些教程写了一些小实例,感觉自己就喜欢上了node,本人呢对于新的东西比较好奇,但由于实习的原因,并不能专心去学习,也就半了解,五月份回学校做毕设,本来要求的是使用C#,给予.net 的,在接触过后,并且做了一些就开始放弃了,个人看法,着实不喜欢使用vs,对于配置问题更是让我头疼,哪有node这么方便,建个文件夹就开始了,比较有动力!
今天也说一下使用mongodb 数据库分页,本人才疏学浅,菜鸟一枚,对于知识点理解不深(按自己的想法来):
先说起因:做一个商品信息列表,商品很多,我们就需要分页,设计的数据库方法:
find() 查询商品,
limit(), 限制显示文档个数
skip(); 跳过文档个数,
本人实现方法比较笨,具体看代码:
首先,得知道商品的总数,查询数据库:
cart:function cart(userId){
return Cart.find({userId:userId,isBuy:1})
.exec()
}
再者,首次访问时,并没有点击底下的分页按钮,就得来个初始化吧,这样: pageSize :单页显示的文档数
findCart:function findCart(userId,pageSize){
return Cart.find({userId:userId,isBuy:1})
.limit(pageSize)
.exec()
},
下来就是分页的了: Count:需要跳过的文档数,他的构成 点击的页 (num-1)*pageSize
findGoodsOrder:function findGoodsOrder(userId,pageSize,Count){
return Cart.find({userId:userId,isBuy:2})
.limit(pageSize)
.skip(Count)
.exec()
}
好了,数据库这一块就好了,再看路由处理:
当然这就是首次访问了: 将需要分的页数一块传值过去,page变量,需要构造一页面:
router.get('/cart',function(req,res,next){
var pagesSize = 4;
Promise.all([
CartModel.findCart(req.session.user._id),
CartModel.cart(req.session.user._id)
])
.then(function(result){
if(!result){
req.flash('error','出错了!');
}
var goods = result[0];
var page = Math.ceil(result[1].length/4);
req.flash('success','查找成功!');
//req.session.user.credit = parseInt(user.SecPayment);
res.render('per-cart',{
goods:goods,
page:page
});
})
.catch(next);
});
然后就是分页请求处理了:传过来的值为点击的页数码,公式,算出需要跳过几个文档数,调用函数就行了,
*注意,这次往回传的时候是,res.send();说明我们用了ajax,局部刷新页面:
先想一想,怎么处理??再看下面。。。。
router.get('/cart/page',function(req,res,next){
var pageSize=4;
var page = (parseInt(req.query.count)-1)*4;
CartModel.findGoodsOrder(req.session.user._id,pageSize,page)
.then(function(goods){
if(!goods){
req.flash('error','出错了!');
}
req.flash('success','查找成功!');
//req.session.user.credit = parseInt(user.SecPayment);
res.send({
goods:goods
});
})
.catch(next);
});
最后,我们就转到页面层了,:
页面构造就不细说了,直接看ajax部分:
page:function(){
/**数据实现分页
* 可累死了,首先不知道如何获取点击对象的文本节点值,
* 对于ajax get/post 没有理解,
* 返回的数据处理方式,
* @type {any|jQuery|HTMLElement}
*/
var pageNum = $('.page li'); //获取页码对象
pageNum.click(function(){ //单击事件,并将这个点击对象传过去
page(this);
});
function page(obj){ //事件处理函数
for(var i =0;i<pageNum.length;i++){
pageNum[i].style.backgroundColor = '#fff'; //默认页码背景色白色
}
obj.style.backgroundColor = '#f00'; //单击对象背景色为红色
var count = obj.firstChild.nodeValue; //获取单机对象的文本节点值,
//对于DOM操作没有好的理解,费好大劲,哎,技渣
$.ajax({ //ajax请求
type:'GET',
url:'/personal/order/page',
data:{
count:count
},
dataType:'json', //请求的是后台,数据类型必须设置成JSON,
success:function(data){ //不知道还能设置成其他的值不,还不清楚,
//alert('成功:'+data.data);
var goods=data.goods; //获取返回的数据,就是动态添加HTML了,
var cart = $('.cartshow');
//alert(goods[0].nodeName);
//goods[0].innerHTML='hello'
var content='<ul>';
goods.forEach(function(goods){
content+=
' <li><input type="checkbox" value="'+goods.count*goods.onePrice+'"/></li>'+
'<li><a href="/main/'+goods.goodsId+'/single" rel="external nofollow" >'+goods.gName+'</a></li>'+
'<li class="bigshow">'+
'<div>'+
'<img src="/images/45.jpg">'+
'<div>'+
'<label>'+goods.describe+'</label>'+
'<label>尺寸'+goods.size+'</label>'+
'</div></div></li>'+
'<li>'+goods.count+'</li>'+
'<li>'+goods.onePrice+'</li>'+
'<li>'+goods.count*goods.onePrice+'</li>'+
'<li><a href="/singleGoods/'+goods.goodsId+'/2/remove" rel="external nofollow" >删除</a></li>';
});
content+='</ul>'
cart[0].innerHTML = content;
lb.price();
},
error: function(jqXHR, textStatus, errorThrown){
alert('error ' + textStatus + " " + errorThrown);
}
});
}
}
大概的分页就是这样了,为什么要写,因为我遇到这个问题的时候,本来想网上一找,就算了,谁知道呢,哎,难,都是是一个模板,不知道谁拷谁的,对于新手完全看不懂,然后就放弃了,当时对于ajax也不怎么熟悉,查书,找同学讨论,可怜,周围的居然没有一个学习nodeJS的,讨论一些逻辑部分,给自己找找灵感,
大概就是一天的时间,大概是我放了大招(使用代码量能解决的问题,就不是问题),初步实现了功能。
代码还有待扩展,如果数据特别多,底下的分页码就特别多,这需要一个处理,多的省略号,周围的五个存在,如:1 …9 10 11 12 13 .. 20
这又是一个问题,哎!想想头都大,但目前我先不做这个,以后再考虑吧,下来的工作是一个实时交互功能,论坛聊天那种,给自己加油!
有什么问题,欢迎吐糟,共同进步!
<h2>现阶段目标:能用代码量解决的问题,就不是问题!</h2>