node+mysql+hbs 分页的编写

891 阅读4分钟




1、使用hbs做模板引擎,在根目录下新建入口文件app.js

var express = require('express');
var router = express.Router();
var app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var mysql = require('mysql');

// 导入session库
var session = require('express-session');
var mongoStore = require('connect-mongo')(session);

var cookieParser = require('cookie-parser');

var env=process.env.NODE_ENV || 'development';

console.log(env);
// 设置数mongodb据库
var dbUrl = '你的数据地址'
if(env === 'development'){
var dbUrl = 'mongodb://localhost/DF'
}

mongoose.connect(dbUrl,{useMongoClient:true});
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function (callback) {
console.log("mongoodb数据打开")
});
mongoose.set('debug', true);

app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(__dirname + '/static'));

// 加载hbs模块
var hbs = require('hbs');
// 指定模板文件的后缀名为html
app.set('view engine', 'html');
// 运行hbs模块
app.engine('html', hbs.__express);

// 设置子模板
hbs.registerPartials(__dirname + '/views/partials');

// hbs heplp
require('./views_help/index')(hbs)



// 使用mongoDB做session持久化
app.use(session({
secret: 'DF',
resave: true,
saveUninitialized:true,
store: new mongoStore({
url: dbUrl,
collection:'sessions',
ttl:0.5*60*60
})
}))

// router
require('./router/index')(router)
app.use(router);
app.listen(8086);

2、在router/index.js  新增一个需要用到分页的路由。如:我需要在发货历史页面有个分页

var Gods = require('../app/controllers/gods');

module.exports = function(router) {

router.route('/sippingHistory/:page')

.get(User.authentication,Gods.sippingHistoryShow);

}


3、在控制下controllers/gods.js 里添加渲染逻辑

var public = require('../controllers/public');

exports.sippingHistoryShow = function(req, res) {
public.getPagesData(req, res,"sippingHistory","金币发货记录","tables")//使用分页插件
}


4、controllers/public.js 下分页插件的主要逻辑

var Pagination = require('../models/pagination');

var Public = function() {};

/**
* [getPagesData 分页
* @param {[Object]} req [路由返回的请求对象]
* @param {[Object]} res [路由返回的响应对象]
* @param {[String]} adress [路由模板地址]
* @param {[String]} adressName [模板的title]
* @param {[type]} table [数据库表]
* @return {[type]} [返回路由跳转]
*/
Public.prototype.getPagesData = function(req, res, adress, adressName, table) {


var page = req.params.page || 1,
page = parseInt(page)
if (!page) {
res.redirect("/" + adress + "/1");
} else {
Pagination.pageData(table, page, 20).then(function(results) {
// 计算总页数
var allCount = results[0][0]['COUNT(*)'];
var allPage = parseInt(allCount) / 20;
var pageStr = allPage.toString();
// 不能被整除
if (pageStr.indexOf('.') > 0) {
allPage = parseInt(pageStr.split('.')[0]) + 1;
}

if (page > allPage) {
res.redirect("/" + adress + "/" + allPage);
} else if (page < 1 || !page) {
res.redirect("/" + adress + "/1");
}



var datas = results[1];
var pages = [];

if (allPage < 16) {
var startPage = 1;
var endPage = allPage;
} else {

if (page <= 7) {
var startPage = 1;
var endPage = 15

} else if (page > 7 && page <= parseInt(allPage) - 15) {
var startPage = parseInt(page) - 7;
var endPage = parseInt(page) + 7;
} else {
var startPage = parseInt(allPage) - 15;
var endPage = allPage
}
}



for (var i = startPage; i <= endPage; i++) {
pages.push(i);
}


res.render(adress, {
title: adressName,
adress: adress,
totalPages: allPage,
pages: pages,
currentPage: page,
data: datas
});
}).catch(function(data) {
res.render(adress, {
title: adressName,
data:"数据库连接出错:"+data,
});
})
}
}


5、在models/pagination.js  编写Pagination.pageData()方法


var DB = require('../schemas/index');
var Pagination = function() {};


Pagination.prototype.totalPage=function(table) {
return new Promise(function(resolve, reject) {
var db = new DB()
var sql = "SELECT COUNT(*) AS total FROM "+table;
db.query(sql).then(function(data) {
db.end();
resolve(data);
}).catch(function(data) {
db.end();
reject(data);
})

})
}

Pagination.prototype.pageData=function(table,page,rows) {
return new Promise(function(resolve, reject) {
var start = (page - 1) * rows;
var db = new DB()
var sql = 'SELECT COUNT(*) FROM '+table+'; SELECT * FROM '+table+' limit ' + start + ','+rows;
db.query(sql).then(function(data) {
db.end();
resolve(data);
}).catch(function(data) {
db.end();
reject(data);
})

})
}
module.exports = new Pagination();


6、在schemas/index编写查询数据库的公用方法

var mysql = require('mysql');
var DB = function() {
this.connection = mysql.createConnection({
host: '数据库IP地址',
port: '端口',
user: '用户名',
password: '密码',
database: '表'
});
this.start();

};

/*
链接开始
*/

DB.prototype.start = function() {
var _self=this;
this.connection.connect(function(err) {
if (err) {
console.error('链接错误' + err.stack);
}
console.log('sql连接ID ' + _self.connection.threadId);
});

}

/*
执行sql语句
@param string $sql
@return Array 将结果已对象数组返回
*/
DB.prototype.query = function(sql, params) {
var _self = this;
var params=params || [];
return new Promise(function(resolve, reject) {
_self.connection.query(sql,params,function(err, result) {
if (err) {
reject(err.message)
}
resolve(result);
});
})
}

/*
链接结束
*/
DB.prototype.end = function() {
this.connection.end(function(err) {
if (err) {
return;
}
})
console.log('sql连接ID结束');
}

module.exports = DB


7、在views/partials模板编写pagination.html

<div class="am-u-lg-12 am-cf">
<div class="am-fr">
<ul class="am-pagination tpl-pagination">
{{#isFristShow currentPage}}
{{#isFrist currentPage}}
<li></li>
{{else}}
<li class="am-disabled"><a href="/{{adress}}/1">«</a></li>
{{/isFrist}}
{{else}}
<li ><a href="/{{adress}}/{{pre currentPage}}">«</a></li>
{{/isFristShow}}
{{#compare1 currentPage}}
<li></li>
{{else}}
<li ><a href="/{{adress}}/1">首页</a></li>
<li ><a >...</a></li>
{{/compare1}}

{{#each pages}}
{{#current this ../currentPage}}
<li class="am-active"><a href="/{{../../adress}}/{{this}}">
{{this}}</a>
</li>
{{else}}
<li><a href="/{{../../adress}}/{{this}}">
{{this}} </a>
</li>
{{/current}}
{{/each}}


{{#isLastShow currentPage totalPages}}
{{#isLast currentPage totalPages}}
<li></li>
{{else}}
<li class="am-disabled"><a>»</a></li>
{{/isLast}}
{{else}}

<li><a href="/{{adress}}/{{next currentPage}}">»</a></li>
{{/isLastShow}}

{{#isLast currentPage totalPages}}

{{else}}
<li ><a >...</a></li>
<li ><a href="/{{adress}}/{{totalPages}}">尾页</a></li>
{{/isLast}}
</ul>
</div>
</div>


8、在views_help/index.js 新增判断的帮助函数

module.exports = function(hbs){


// 分页辅助函数

hbs.registerHelper("compare1",function(v1,options){
if(v1 <=7){
return options.fn(this);
}else{
return options.inverse(this);
}
})

hbs.registerHelper("current",function(v1,v2,options){
if(v1==v2){
return options.fn(this);
}else{
return options.inverse(this);
}
})
hbs.registerHelper("isFristShow",function(v1,options){
if((v1-1)==0){
return options.fn(this);
}else{
return options.inverse(this);
}
})
hbs.registerHelper("isFrist",function(v1,options){
if(v1==1){
return options.fn(this);
}else{
return options.inverse(this);
}
})
hbs.registerHelper("isLastShow",function(v1,v2,options){
if((v1+1)>v2){
return options.fn(this);
}else{
return options.inverse(this);
}
})

hbs.registerHelper("isLast",function(v1,v2,options){
if(v1==v2){
console.log(v1);
console.log(v2)
return options.fn(this);
}else{
return options.inverse(this);
}
})



hbs.registerHelper("next",function(v1,options){
return (parseInt(v1)+1);
})

hbs.registerHelper("pre",function(v1,options){
return (parseInt(v1)-1);
})


hbs.registerHelper("isString",function(v1,options){
if(Object.prototype.toString.call(v1) === "[object String]"){
return options.fn(this);
}else{
return options.inverse(this);
}
})
}


写在最后,如果关注人多的话,我会上传项目分享给大家,麻烦点赞,没人关注的话,权当笔记。