node.js+express+mysql+js分页+bootstrap+文件上传+基本新闻管理模块

建数据库：

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for info
-- ----------------------------
DROP TABLE IF EXISTS `info`;
CREATE TABLE `info`  (
`id` int(100) NOT NULL AUTO_INCREMENT,
`title` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
`info` text CHARACTER SET utf8 COLLATE utf8_general_ci,
`information` text CHARACTER SET utf8 COLLATE utf8_general_ci,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 9 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

-- ----------------------------
-- Table structure for person
-- ----------------------------
DROP TABLE IF EXISTS `person`;
CREATE TABLE `person`  (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
`age` int(11) DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 39 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

SET FOREIGN_KEY_CHECKS = 1;

*我使用的是idea编辑器，可以下载插件然后配置自己的电脑环境就可以了，

首先看清楚 我的目录，我直接上代码，照抄就可以了*



file.js

var express = require('express');
var router = express.Router();
var formidable = require('formidable');
var fs = require('fs');

var TITLE='formidable上传';
var AVATAR_UPLOAD_FOLDER = '/images/'

/* GET home page. */
router.get('/', function(req, res, next) {
res.render('file',{title:TITLE});
});
router.post('/',function(req,res){
var form=new formidable.IncomingForm();//创建上传表单
form.encoding='utf-8';
form.uploadDir = './public/images/'      //设置上传目录
form.keepExtensions = true;  //保留后缀
form.maxFieldsSize = 1024 * 1024 * 1024;   //文件大小

form.parse(req,function(err,fields,files){
if(err){
res.locals.error=err;
res.render('index',{title:TITLE});
return;
}
var extName='';
switch (files.fulAvatar.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
if(extName.length == 0){
res.locals.error = '只支持png和jpg格式图片';
res.render('index', { title: TITLE });
return;
}
var avatarName = Math.random()*100 + '.' + extName;
var newPath = form.uploadDir + avatarName;

console.log(newPath);
fs.renameSync(files.fulAvatar.path, newPath);  //重命名
})
res.locals.success = '上传成功';
res.render('file', { title: TITLE });
})
module.exports = router;

index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'DemoExpress' });
});
module.exports = router;

info.js

var express = require('express');
var router = express.Router();
//引入数据库包
var db = require("./db.js");

/**
* 查询列表页
*/
router.get('/', function (req, res, next) {
db.query('select * from info', function (err, rows) {
console.log(rows);
if (err) {
res.render('info/info', {title: 'nodeJsDemo', datas: []});
} else {
res.render('info/info', {title: 'nodeJsDemo', datas: rows});
}
})
});
router.get('/view/:id', function (req, res) {
var id = req.params.id;
console.log(id);
db.query("select * from info where id=" + id, function (err, rows) {
if (err) {
res.send("修改跳转失败"+err)
} else {
res.render("info/view", {datas: rows});       //直接跳转
}
});
});
module.exports = router;

infoAdmin.js

var express = require('express');
var router = express.Router();
//引入数据库包
var db = require("./db.js");

/*查看详情*/
router.get('/view/:id', function (req, res) {
var id = req.params.id;
console.log(id);
db.query("select * from info where id=" + id, function (err, rows) {
if (err) {
res.send("修改跳转失败"+err)
} else {
res.render("infoAdmin/view", {datas: rows});       //直接跳转
}
});
});

/**
* 查询列表页
*/
router.get('/', function (req, res, next) {
db.query('select * from info', function (err, rows) {
console.log(rows);
if (err) {
res.render('infoAdmin/infoAdmin', {title: 'nodeJsDemo', datas: []});
} else {
res.render('infoAdmin/infoAdmin', {title: 'nodeJsDemo', datas: rows});
}
})
});
/**
* 新增页面跳转
*/

router.get('/add', function (req, res) {
res.render('infoAdmin/add');
});
router.post('/add', function (req, res) {
var title = req.body.title;
var info = req.body.info;
var information = req.body.information;
/*这里的双引号内嵌套单引号的原因是为了字符串存储*/
db.query("insert into info(title,info,information) values('" + title + "','" + info + "','"+information+"')", function (err, rows) {
if (err) {
res.send("错了傻吊:"+err)
} else {
res.redirect('/infoAdmin');
}
})
});

/**
* 删
*/
router.get('/del/:id', function (req, res) {
var id = req.params.id;
db.query("delete from info where id=" + id, function (err, rows) {
if (err) {
res.send("没删除掉："+err)
} else {
res.redirect('/infoAdmin')
}
});
});
/**
* 修改
*/
router.get('/toUpdate/:id', function (req, res) {
var id = req.params.id;
console.log(id);
db.query("select * from info where id=" + id, function (err, rows) {
if (err) {
res.send("修改跳转失败"+err)
} else {
res.render("infoAdmin/update", {datas: rows});       //直接跳转
}
});
});
router.post('/update', function (req, res) {
var id = req.body.id;
var name = req.body.name;
var age = req.body.age;
var professional = req.body.professional;
db.query("update info set title='" + title + "',info='" + info + "',information='" + information + "' where id=" + id, function (err, rows) {
if (err) {
res.send("修改失败了哈哈哈："+err)
} else {
res.redirect('/infoAdmin');
}
});
});
module.exports = router;

person.js

var express = require('express');
var router = express.Router();
//引入数据库包
var db = require("./db.js");

/**
* 查询列表页
*/
router.get('/', function (req, res, next) {
db.query('select * from person', function (err, rows) {
console.log(rows);
if (err) {
res.render('persons', {title: 'nodeJsDemo', datas: []});
} else {
res.render('persons', {title: 'nodeJsDemo', datas: rows});
}
})
});
/**
* 新增页面跳转
*/

router.get('/add', function (req, res) {
res.render('add');
});
router.post('/add', function (req, res) {
var name = req.body.name;
var age = req.body.age;

db.query("insert into person(name,age) values('" + name + "'," + age + ")", function (err, rows) {
if (err) {
/* res.send和res.end的区别  http://blog.csdn.net/genziisme/article/details/70144334*/ res.send("错了傻吊:"+err)
} else {
res.redirect('/persons');
}
})
});

/**
* 删
*/
router.get('/del/:id', function (req, res) {
var id = req.params.id;
db.query("delete from person where id=" + id, function (err, rows) {
if (err) {
res.send("没删除掉："+err)
} else {
res.redirect('/persons')
}
});
});
/**
* 修改
*/
router.get('/toUpdate/:id', function (req, res) {
var id = req.params.id;
console.log(id);
db.query("select * from person where id=" + id, function (err, rows) {
if (err) {
res.send("修改跳转失败"+err)
} else {
res.render("update", {datas: rows});       //直接跳转
}
});
});
router.post('/update', function (req, res) {
var id = req.body.id;
var name = req.body.name;
var age = req.body.age;
var professional = req.body.professional;
db.query("update person set name='" + name + "',age='" + age + "' where id=" + id, function (err, rows) {
if (err) {
res.send("修改失败了哈哈哈："+err)
} else {
res.redirect('/persons');
}
});
});
/**
* 查询
*/
router.post('/search', function (req, res) {
var name = req.body.s_name;
var age = req.body.s_age;
var sql = "select * from person";
if (name) {
sql += " and name like '%" + name + "%' ";
}
if (age) {

sql += " and age=" + age + " ";
}

sql = sql.replace("and","where");
db.query(sql, function (err, rows) {
if (err) {
res.end("查询失败：", err)
} else {
res.render("persons", {title: 'nodeJsDemo', datas: rows, s_name: name, s_age: age});
}
});
});

module.exports = router;

users.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
// router.get('/', function(req, res, next) {
//   res.send('respond with a resource');
// });
router.get('/', function(req, res, next) {
res.render('user', { title: 'DemoExpress' });
});
module.exports = router;

关于js文件就那么多，接下来就是.html文件

首先是在views/info目录下的

info.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div style="width:800px;margin:0 auto">

<div style="float: left;width:10%;">
</div>
</div>
</div>
<ul class="news">
<% if (datas.length) { %>
<% datas.forEach(function(infos){ %>
<li>
<b><a href="/info/view/<%= infos.id %>"><%= infos.title %></a></b> |
<a href="/info/view/<%= infos.id %>"><%= infos.info %></a>
</li>
<% }) %>
<% } %>
</ul>
</body>
</html>

view.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="width: 800px;margin: auto;">
<div class="post_text" id="endText" style="border-top:1px solid #ddd;" >
<p class="otitle">
<%= datas[0].title %>
</p>
<p> <%= datas[0].info %></p>
<p> <%= datas[0].information %></p>
</div>
</div>
</body>
</html>

接着是在views/infoAdmin目录下的

add.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增页面</title>
</head>
<body>
<div style="width: 800px;margin: auto;">
<form action="/infoAdmin/add" method="post">
标题：<input type="text" required="required"  name="title" require="true">
副标题：<input type="text" required="required" name="info" require="true">
内容：<input type="text" required="required"  name="information" require="true">

<input type="submit" value="提交">
</form>
</div>
</body>
</html>

infoAdmin.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div>
<div style="width:800px;margin:0 auto">

<div style="float: left;width:10%;">

</div>

</div>
<br/>
<div style="width:800px;margin:0 auto" align="center">
<ul class="pagination pagination-sm" >
<li><a href="/" class="glyphicon glyphicon-home" title="返回主页"></a></li>
<li><a href="/infoAdmin/add" class="glyphicon glyphicon-plus" title="新增"></a></li>
</ul>
</div>
<table  style="width:800px;margin:0 auto" width="400"  class="table table-hover">
<thead>
<tr class="active">
<th >编号</th>
<th >操作</th>
<th >标题</th>
<th >副标题</th>
</tr>
</thead>
<!-- 此方法引用博客 http://www.jb51.net/article/57864.htm 这篇 博客中的index.ejs中出现这个遍历数据的方法-->
<tbody id="ec_table" >
<% if (datas.length) { %>
<% datas.forEach(function(infos){ %>
<tr >
<td ><%= infos.id %></td>
<td >
<a href="/infoAdmin/view/<%= infos.id %>" class="glyphicon glyphicon-zoom-in" title="查看详情"></a>  
<a href="/infoAdmin/del/<%= infos.id %>" class="glyphicon glyphicon-remove" title="删除"></a>  
<a href="/infoAdmin/toUpdate/<%= infos.id %>" class="glyphicon glyphicon-edit" title="修改"></a>
</td>
<td ><%= infos.title %></td>
<td ><%= infos.info %></td>
</tr>
<% }) %>
<% } %>
</tbody>
</table>
<div style="width:800px;margin:0 auto" width="400" border="1" cellspacing="0" align="center">
<span id="spanFirst" >第一页</span>
<span id="spanPre">上一页</span>
<span id="spanNext">下一页</span>
<span id="spanLast">最后一页</span> 第
<span id="spanPageNum"></span>页/共
<span id="spanTotalPage"></span>页

</div>

<script>
var theTable = document.getElementById("ec_table");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");
var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");
var numberRowsInTable = theTable.rows.length;
var pageSize = 5;
var page = 1;
//下一页
function next() {
hideTable();
currentRow = pageSize * page;
maxRow = currentRow + pageSize;
if (maxRow > numberRowsInTable)
maxRow = numberRowsInTable;
for ( var i = currentRow; i < maxRow; i++) {
theTable.rows[i].style.display = '';//currentRow ~ maxRow 内显示出来
}
page++;
if (maxRow == numberRowsInTable) {
nextText();
lastText();
}
showPage();
preLink();
firstLink();
}
//上一页
function pre() {
hideTable();
page--;
currentRow = pageSize * page;
maxRow = currentRow - pageSize;
if (currentRow > numberRowsInTable)
currentRow = numberRowsInTable;
for ( var i = maxRow; i < currentRow; i++) {
theTable.rows[i].style.display = '';
}
if (maxRow == 0) {
preText();
firstText();
}
showPage();
nextLink();
lastLink();
}
//第一页
function first() {
hideTable();
page = 1;
for ( var i = 0; i < pageSize; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preText();
nextLink();
lastLink();
}
//最后一页
function last() {
hideTable();
page = pageCount();
currentRow = pageSize * (page - 1);
for ( var i = currentRow; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preLink();
nextText();
firstLink();
}
function hideTable() {
for ( var i = 0; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
}
function showPage() {
pageNum.innerHTML = page;
}
//总共页数
function pageCount() {
var count = 0;
if (numberRowsInTable % pageSize != 0)
count = 1;
return parseInt(numberRowsInTable / pageSize) + count;
}

//显示链接
function preLink() {
spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>";
}
function preText() {
spanPre.innerHTML = "上一页";
}
function nextLink() {
spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";
}
function nextText() {
spanNext.innerHTML = "下一页";
}
function firstLink() {
spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>";
}
function firstText() {
spanFirst.innerHTML = "第一页";
}
function lastLink() {
spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>";
}
function lastText() {
spanLast.innerHTML = "最后一页";
}
//隐藏表格
function hide() {
for ( var i = pageSize; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
totalPage.innerHTML = pageCount();
pageNum.innerHTML = '1';
nextLink();
lastLink();
}
hide();
</script>

</div>

</body>
</html>

update.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改页面</title>
</head>
<body>
<div style="width: 800px;margin: auto;">
<form action="/infoAdmin/update" method="post">
<input type="hidden" value="<%= datas[0].id %>" name="id">
标题：<input type="text"  name="title" required="required"   value="<%= datas[0].title %>" ><br>
副标题：<input type="text" name="info" required="required"  value="<%= datas[0].info %> " ><br>
内容：<input type="text" name="information" required="required"  value="<%= datas[0].information %> " >
<input type="submit" value="提交">
</form>
</div>
</body>
</html>

view.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>

<body>
<div style="width: 800px;margin: auto;">
<div class="post_text" id="endText" style="border-top:1px solid #ddd;" >
<p class="otitle">
<%= datas[0].title %>
</p>
<p> <%= datas[0].info %></p>
<p> <%= datas[0].information %></p>
</div>
</div>
</body>
</html>

接着是views目录下的.html文件

add.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增页面</title>
</head>
<body>
<div style="width: 800px;margin: auto;">
<form action="/persons/add" method="post">
姓名：<input type="text" required="required"  name="name" require="true">
年龄：<input type="text" required="required" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" name="age" require="true">

<input type="submit" value="提交">
</form>
</div>
</body>
</html>

error.html

<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>

file.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="container" class="container">
<%if(locals.success){%>
<div id="alt_success" class="alert alert-success">
<%- success%>
</div>
<%}%>
<%if(locals.error){%>
<div id="alt_warning" class="alert alert-warning">
<%=error%>
</div>
<%}%>
<!--返回上一页-->
<ul class="pagination pagination-sm" >
<li><a href="/" class="glyphicon glyphicon-home" title="返回主页"></a></li>
</ul>
<form class="form-signin" role="form" method="post"  enctype="multipart/form-data">
<h2 class="form-signin-heading" >upload file</h2>
<input type="file" name="fulAvatar" id="fulAvatar" class="form-control">
<br>
<button id="butSub" class="btn btn-lg btn-primary">upload</button>

</form>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
String.prototype.format = function (args) {
var result = this;
if (arguments.length > 0) {
if (arguments.length == 1 && typeof (args) == "object") {
for (var key in args) {
if (args[key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[key]);
}
}
}
else {
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] != undefined) {
var reg = new RegExp("({)" + i + "(})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
}
return result;
}

$(function(){
$('#btnSub').on('click',function(){
var fulAvatarVal = $('#fulAvatar').val(),
errorTip = '<div id="errorTip" class="alert alert-warning">{0}</div> ';

$("#errorTip,#alt_warning").remove();

if(fulAvatarVal.length == 0)
{
$("#container").prepend(errorTip.format('请选择要上传的文件'));
return false;
}

var extName = fulAvatarVal.substring(fulAvatarVal.lastIndexOf('.'),fulAvatarVal.length).toLowerCase();

if(extName != '.png' && extName != '.jpg'){
$("#container").prepend(errorTip.format('只支持png和jpg格式图片'));
return false;
}
return true;
})
});

</script>
</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h1><%= title %></h1>
<h5>的第一个 <%= title %></h5>
<a href="/persons" class="btn btn-lg btn-primary">开始Demo演示</a><br><br>
<a href="/file" class="btn btn-lg btn-primary">文件上传</a><br><br>
<a href="/info" class="btn btn-lg btn-primary">新闻模板</a><br><br>
<a href="/infoAdmin" class="btn btn-lg btn-primary">新闻后台管理</a><br><br>
<a href="https://www.baidu.com/" class="btn btn-lg btn-primary">实在看不懂点击</a>
</body>
</html>

persons.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div>
<div style="width:800px;margin:0 auto">

<div style="float: left;width:10%;">

</div>
<div style="float: right;width:90%;">
<form action="/persons/search" method="post">
姓名：<input type="text" name="s_name" value="" class="text">   
年龄：<input type="text" name="s_age" value="" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"  class="text">   
<button type="submit" class="glyphicon glyphicon-search" title="查询"></button>
</form>
</div>
</div>
<br/>
<div style="width:800px;margin:0 auto" align="center">
<ul class="pagination pagination-sm" >
<li><a href="/" class="glyphicon glyphicon-home" title="返回主页"></a></li>
<li><a href="/persons/add" class="glyphicon glyphicon-plus" title="新增"></a></li>
</ul>
</div>
<table  style="width:800px;margin:0 auto" width="400"  class="table table-hover">
<thead>
<tr class="active">
<th >编号</th>
<th >操作</th>
<th >姓名</th>
<th >年龄</th>
</tr>
</thead>
<!-- 此方法引用博客 http://www.jb51.net/article/57864.htm 这篇 博客中的index.ejs中出现这个遍历数据的方法-->
<tbody id="ec_table" >
<% if (datas.length) { %>
<% datas.forEach(function(person){ %>
<tr >
<td ><%= person.id %></td>
<td ><a href="/persons/del/<%= person.id %>" class="glyphicon glyphicon-remove" title="删除"></a>  
<a href="/persons/toUpdate/<%= person.id %>" class="glyphicon glyphicon-edit" title="修改"></a></td>
<td ><%= person.name %></td>
<td ><%= person.age %></td>
</tr>
<% }) %>
<% } %>
</tbody>
</table>
<div style="width:800px;margin:0 auto" width="400" border="1" cellspacing="0" align="center">
<span id="spanFirst" >第一页</span>
<span id="spanPre">上一页</span>
<span id="spanNext">下一页</span>
<span id="spanLast">最后一页</span> 第
<span id="spanPageNum"></span>页/共
<span id="spanTotalPage"></span>页

</div>

<script>
var theTable = document.getElementById("ec_table");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");
var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");
var numberRowsInTable = theTable.rows.length;
var pageSize = 5;
var page = 1;
//下一页
function next() {
hideTable();
currentRow = pageSize * page;
maxRow = currentRow + pageSize;
if (maxRow > numberRowsInTable)
maxRow = numberRowsInTable;
for ( var i = currentRow; i < maxRow; i++) {
theTable.rows[i].style.display = '';//currentRow ~ maxRow 内显示出来
}
page++;
if (maxRow == numberRowsInTable) {
nextText();
lastText();
}
showPage();
preLink();
firstLink();
}
//上一页
function pre() {
hideTable();
page--;
currentRow = pageSize * page;
maxRow = currentRow - pageSize;
if (currentRow > numberRowsInTable)
currentRow = numberRowsInTable;
for ( var i = maxRow; i < currentRow; i++) {
theTable.rows[i].style.display = '';
}
if (maxRow == 0) {
preText();
firstText();
}
showPage();
nextLink();
lastLink();
}
//第一页
function first() {
hideTable();
page = 1;
for ( var i = 0; i < pageSize; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preText();
nextLink();
lastLink();
}
//最后一页
function last() {
hideTable();
page = pageCount();
currentRow = pageSize * (page - 1);
for ( var i = currentRow; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preLink();
nextText();
firstLink();
}
function hideTable() {
for ( var i = 0; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
}
function showPage() {
pageNum.innerHTML = page;
}
//总共页数
function pageCount() {
var count = 0;
if (numberRowsInTable % pageSize != 0)
count = 1;
return parseInt(numberRowsInTable / pageSize) + count;
}

//显示链接
function preLink() {
spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>";
}
function preText() {
spanPre.innerHTML = "上一页";
}
function nextLink() {
spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";
}
function nextText() {
spanNext.innerHTML = "下一页";
}
function firstLink() {
spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>";
}
function firstText() {
spanFirst.innerHTML = "第一页";
}
function lastLink() {
spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>";
}
function lastText() {
spanLast.innerHTML = "最后一页";
}
//隐藏表格
function hide() {
for ( var i = pageSize; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
totalPage.innerHTML = pageCount();
pageNum.innerHTML = '1';
nextLink();
lastLink();
}
hide();
</script>

</div>

</body>
</html>

update.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改页面</title>
</head>
<body>
<div style="width: 800px;margin: auto;">
<form action="/persons/update" method="post">
<input type="hidden" value="<%= datas[0].id %>" name="id">
姓名：<input type="text"  name="name" required="required"   value="<%= datas[0].name %>">
<!--这里的年龄只能输入数字，校验方法引用博客  https://www.cnblogs.com/xcxc/p/3628283.html  -->
年龄：<input type="text" name="age" required="required" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" value="<%= datas[0].age %> ">

<input type="submit" value="提交">
</form>
</div>
</body>
</html>

user.html

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
url="datagrid2_getdata.php"
title="Load Data" iconCls="icon-save"
rownumbers="true" pagination="true">
<thead>
<tr>
<th field="itemid" width="80">Item ID</th>
<th field="productid" width="80">Product ID</th>
<th field="listprice" width="80" align="right">List Price</th>
<th field="unitcost" width="80" align="right">Unit Cost</th>
<th field="attr1" width="150">Attribute</th>
<th field="status" width="60" align="center">Stauts</th>
</tr>
</thead>
</table>
</body>
</html>

*重头戏肯定是压场的

app.js***

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');
var persons= require('./routes/person');
var file=require('./routes/file');
var info=require('./routes/info');
var infoAdmin=require('./routes/infoAdmin');
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));

//后面两行代码的替换是吧后缀为.ejs的文件转换为.html，起码看着舒服
//并不知道为什么创建以后是.ejs结尾的
//app.set('view engine', 'ejs');
app.engine('.html', require('ejs').__express);
app.set('view engine', 'html');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);
app.use('/persons',persons );
app.use('/file',file);
app.use('/info',info);
app.use('/infoAdmin',infoAdmin);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});

// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page
res.status(err.status || 500);
res.render('error');
});

module.exports = app;

收工 直接跑就行了，我也上传了自己的代码http://download.csdn.net/download/qq_35733535/10174405