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>&nbsp;&nbsp;
                <a href="/infoAdmin/del/<%= infos.id %>" class="glyphicon glyphicon-remove" title="删除"></a>&nbsp;&nbsp;
                <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"> &nbsp;&nbsp;
                年龄：<input type="text" name="s_age" value="" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"  class="text"> &nbsp;&nbsp;
                <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>&nbsp;&nbsp;
                <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