nodejs+vuejs实现表格分页与CRUD操作
本文实现了最轻量级的Web表格分页和数据库CRUD操作。分页类在nodejs后端定义，然后传到前端vuejs页面，实现了数据和页面显示逻辑分离。
pager类：由pagerF类定义，代码如下（实现思路参考我博客文章https://blog.csdn.net/lillllllll/article/details/102636208）
module.exports =function(totalRows,pageSize,navigatePages, current,rows,column){
this.totalRows=totalRows;
this.pageSize=pageSize;
this. navigatePages=navigatePages;
this.current=current;
this.rows=rows;
this.tableColumns=column;
this.totalPages= Math.ceil(this.totalRows/this.pageSize);
this.isFirstPage = this.current == 1;
this.isLastPage = this.current == this.totalPages || this.totalPages == 0;
//计算滑动窗口中的页号，不止一种生成策略，这里采用
//http://git.oschina.net/free/Mybatis_PageHelper提供的方案来实现
this.navigatepageNumsFF=function(){
var navigatepageNums = [];
//当总页数小于或等于导航页码数时
if (this.totalPages <=this.navigatePages) {
for (var i = 0; i < this.totalPages; i++) {
navigatepageNums[i] = i + 1;
}
} else { //当总页数大于导航页码数时
var startNum = this.current - this.navigatePages / 2;
var endNum = this.current + this.navigatePages / 2;
if (startNum < 1) {
startNum = 1;
//(最前navigatePages页
for (var i = 0; i < this.navigatePages; i++) {
navigatepageNums[i] = startNum++;
}
} else if (endNum > this.totalPages) {
endNum = this.totalPages;
//最后navigatePages页
for (var i = this.navigatePages - 1; i >= 0; i--) {
navigatepageNums[i] = endNum--;
}
} else {
//所有中间页
for (var i = 0; i < this.navigatePages; i++) {
navigatepageNums[i] = startNum++;
}
}
}
return navigatepageNums;
}; //所有导航页号
this.navigatepageNums=this.navigatepageNumsFF()
this.navigateFirstPage=0;
this.navigateLastPage =this.totalPages;
if (this.navigatepageNums != null && this.navigatepageNums.length > 0) {
this.navigateFirstPage = this.navigatepageNums[0];
this.navigateLastPage = this.navigatepageNums[this.navigatepageNums.length - 1];
}
}
listvue.html:基于vuejs的html静态页面，与nodejs交互全部采用ajax
Nodejs部分：服务器端功能实现
DBConfig.js
module.exports =
{
mysql: {
host: 'localhost',
user: 'root',
password: 'root',
database:'test', // 前面建的user表位于这个数据库中
port: 3306 ,
multipleStatements: true
}
};usersql.js
var UserSQL = {
insert:'INSERT INTO user(name,age) VALUES(?,?)',
queryAll:'SELECT * FROM user',
getUserById:'SELECT * FROM user WHERE id = ? ',
updateUserById:'update user set name=? , age=? WHERE id = ? ',
getTotal:'SELECT COUNT(*) FROM user',
getPages:'SELECT * FROM user order by id asc limit ?,?',
getColumn:"select COLUMN_NAME from information_schema.COLUMNS where TABLE_SCHEMA = (select database()) and table_name = 'user'",
deletebyid:'delete from user where id=?',
getPageObj:"SELECT COUNT(*) FROM user;SELECT * FROM user order by id asc limit ?,?;select COLUMN_NAME from information_schema.COLUMNS where TABLE_SCHEMA = (select database()) and table_name = 'user'"
};
module.exports = UserSQL;数据库表是user对应的字段为：id: 自增，关键字, name: varchar, age: int
server.js: nodejs的主程序，包含了接受前端来的请求
var express = require('express');
var app = express();
var url = require("url");
var PageVue=require('./pagerF')
var mysql = require('mysql')
var userSQL = require('./usersql');
var querystring = require("querystring");
var dbConfig = require('./DBConfig');
//import PageVue from './pager'
// 使用DBConfig.js的配置信息创建一个MySQL连接池
var pool = mysql.createPool(dbConfig.mysql);
var router = express.Router();
var bodyParser = require('body-parser');
// 创建 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.use('/public', express.static('public'));
app.get('/column', function (req, res) {
column=['id','name','age'];
res.send(JSON.stringify(column));
})
app.get('/index.html', function (req, res) {
res.sendFile( __dirname + "/" + "index.html" );
})
app.get('/listvue.html', function (req, res) {
res.sendFile( __dirname + "/" + "listvue.html" );
})
app.post('/processpost', urlencodedParser, function (req, res) {
var response = {
"first_name":req.body.first_name,
"last_name":req.body.last_name
};
console.log(response);
res.end(JSON.stringify(response));
})
// 响应JSON数据
var responseJSON = function (res, ret) {
if(typeof ret === 'undefined') {
res.json({ code:'-200', msg: '操作失败'
});
} else {
res.json(ret);
}};
// 添加用户
app.post('/addUser', function(req, res, next){
var formdata=''
req.on('data',function(fdata){
formdata+=fdata;
var data=querystring.parse(formdata)
pool.getConnection(function(err, connection) {
// 建立连接 增加一个用户信息
connection.query(userSQL.insert, [data.name,data.age], function(err, result) {
if(result) {
result = 'OK'
}
// 以json形式，把操作结果返回给前台页面
responseJSON(res, result);
// 释放连接
connection.release();
});
});
});
});
app.post('/update', function(req, res, next){
var formdata=''
req.on('data',function(fdata){
formdata+=fdata;
var data=querystring.parse(formdata)
pool.getConnection(function(err, connection) {
// 建立连接 增加一个用户信息
connection.query(userSQL.updateUserById, [data.name,data.age,data.id], function(err, result) {
if(result) {
result = 'OK'
}
// 以json形式，把操作结果返回给前台页面
responseJSON(res, result);
// 释放连接
connection.release();
});
});
});
});
app.get('/getbyid', function(req, res, next){
pool.getConnection(function(err, connection) {
var param = req.query || req.params;
console.log('id='+ param.id)
connection.query(userSQL.getUserById,[param.id], function(err,result){
// 只有一条记录用result[0]
responseJSON(res, result[0]);
//console.log('dd='+ JSON.stringify(result[0].name))
});
});
});
app.get('/deletebyid', function(req, res, next){
pool.getConnection(function(err, connection) {
var param = req.query || req.params;
console.log('deleteid='+ param.id)
connection.query(userSQL.deletebyid,[param.id], function(err,result){
if(result) {
result = 'OK'
}
responseJSON(res, result);
//console.log('dd='+ JSON.stringify(result[0].name))
});
});
});
app.post('/page', function(req, res, next){
var param = req.query || req.params;
var pageSize=5; //页面显示行数，自行设置
var navigatePages=6;//滑动窗口中格子个数，自行设置
var cpage=1
if(param.cpage!=null){
cpage=param.cpage
}
var columns=[]
total=0
var rows=[];
var startrow=(cpage-1)*pageSize;
pool.getConnection(function(err, connection) {
connection.query(userSQL.getPageObj, [startrow,pageSize], function(err,result){
if(err){
throw err;
}else{
total=result[0][0]['COUNT(*)']
rows=result[1]
columns=result[2]
var page =new PageVue(total, pageSize, navigatePages, cpage, rows,columns);
//responseJSON(res, page);
res.send(page)
connection.release();
}
});
})
});
var server = app.listen(8888, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例，访问地址为 http://%s:%s", host, port)
})在vscode环境中的terminal下输入 node server.js启动服务程序。在浏览器中输入http://localhost:8888/listvue.html，界面显示如下：
源码地址：链接：https://pan.baidu.com/s/1RQ4pFK-PJcOaGXtxFt0Www
提取码：d40e