需要运用到mysql里面的limit实现分页操作
1.封装mysql为db.js文件
var mysql = require('mysql')
exports.base=(sql,data,callback)=>{
var mysql= require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '1234',
database : 'mall',
post:3306
});
connection.connect();
connection.query(sql,data, function (error, results, fields) {
if (error) throw error;
callback(results)
});
connection.end();
}
2.index.js代码
let express=require('express');
let template=require('art-template');
let app=express();
let path=require('path');
// 引入封装好的数据库操作
let db=require('./service/db');
// 静态资源路径
app.use(express.static(path.join(__dirname,'public')));
// 设置模板路径
app.set('views',path.join(__dirname,'views'));
// 设置模版引擎
app.set('view engine','html');
// express-art-template
app.engine('html',require('express-art-template'));
// 路由
app.get('/',(req,res)=>{
// 获取get后面的page参数值； 没有page的参数值的时候，给它默认值0
let page=(req.query.page==undefined)?0:req.query.page;
let startPage=page*5;
// 从数据库获取数据，然后渲染到show页面
let count='select count(*) as count from student';
let sql=`select id,name,if(sex=1,'男','女') as sex,tel,school,major from student limit ${startPage},5`;
db.base(count,null,(result)=>{
let countNum=result[0].count;
db.base(sql,null,(result)=>{
res.render('show',{list:result,count:countNum,page:page});
})
})
})
// 监听端口
app.listen(8080,()=>console.log('runnning'));
3.index.html代码
<body>
<table border='1' cellspacing='0' cellpadding='5'>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
<th>学校</th>
<th>专业</th>
</tr>
{
{each list}}
<tr>
<td>{
{$value.id}}</td>
<td>{
{$value.name}}</td>
<td>{
{$value.sex}}</td>
<td>{
{$value.tel}}</td>
<td>{
{$value.school}}</td>
<td>{
{$value.major}}</td>
</tr>
{
{/each}}
</table>
<span id='prev'>上一页</span>
<span id='pages'></span>
<span id='next'>下一页</span>
</body>
<script>
var count={
{count}};// 总条数
var page={
{page}}; // 当前的页码
// 获取页面的位置
var pages=document.getElementById('pages');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
// 生成页码 22=>5
function createPages() {
pages.innerHTML='';
for(var i=0;i<Math.ceil(count/5);i++){
pages.innerHTML+=`<button class="btn" json-page="${i}">${i+1}</button>`;
}
}
createPages()
// 点击按钮翻页
$('.btn').on('click',function(){
let page=$(this).attr('json-page');
window.location.href='/?page='+page;
})
// 点击上一页
prev.onclick=function(){
if(page>=1){
page--;
window.location.href='/?page='+page;
}
}
// 点击下一页
next.onclick=function(){
if(page<Math.ceil(count/5)-1){
page++;
window.location.href='/?page='+page;
}
}
</script>
实现后结果如下：
