https://www.cnblogs.com/-nothing-/p/4943354.html
1、安装ejs
在项目根目录安装ejs.
npm install ejs
2、引入ejs
var ejs = require('ejs'); //我是新引入的ejs插件
3、设置html引擎
app.engine('html', ejs.__express);
设置视图引擎
app.set('view engine', 'html');
保存后重启服务，即可访问html文件。
可编辑表格
数据库
参考
http://www.cnblogs.com/zhengyeye/p/nodejs.html#3947308
http://www.cnblogs.com/zhengyeye/p/8796032.html
nodejs连接mysql操作：http://www.runoob.com/nodejs/nodejs-mysql.html
express框架学习：http://www.runoob.com/nodejs/nodejs-express-framework.html
react app+express:https://segmentfault.com/a/1190000009782180
db.js
var mysql = require('mysql');
var pool = mysql.createPool({
host : 'localhost',
user : 'root',
password : '123456',
port: '3306',
database: 'test',
});
function query(sql, callback) {
pool.getConnection(function (err, connection) {
// Use the connection
connection.query(sql, function (err, rows) {
callback(err, rows);
connection.release();//释放链接
});
});
}
exports.query = query;
user.js
var express = require('express');
var router = express.Router();
//引入数据库包
var db = require("./db.js");
/**
* 查询列表页
*/
router.get('/', function (req, res, next) {
db.query('select * from userinfo', function (err, rows) {
console.log('==========');
if (err) {
res.render('users.html', {title: 'Express', datas: []}); // this renders "views/users.html"
} else {
res.render('users.html', {title: 'Express', datas: rows});
}
})
});
/**
* 新增页面跳转
*/
router.get('/add', function (req, res) {
res.render('user.html');
});
router.post('/add', function (req, res) {
var name = req.body.name;
db.query("insert into userinfo(name) values('" + name + "')", function (err, rows) {
if (err) {
res.end('新增失败：' + err);
} else {
res.redirect('/users');
}
})
});
/**
* 删
*/
router.get('/del/:id', function (req, res) {
var id = req.params.id;
db.query("delete from userinfo where id=" + id, function (err, rows) {
if (err) {
res.end('删除失败：' + err)
} else {
res.redirect('/users')
}
});
});
/**
* 修改
*/
router.get('/toUpdate/:id', function (req, res) {
var id = req.params.id;
db.query("select * from userinfo where id=" + id, function (err, rows) {
if (err) {
res.end('修改页面跳转失败：' + err);
} else {
res.render("user.html", {datas: rows}); //直接跳转
}
});
});
router.post('/update', function (req, res) {
var id = req.body.id;
var name = req.body.name;
var pid = req.body.pid;
var pm = req.body.pm;
var stime = req.body.stime;
var etime = req.body.etime;
var isend = req.body.isend;
var remark = req.body.remark;
db.query("update userinfo set name='"+name+"',pid='"+pid+"',pm='"+pm+"',stime='"+stime+"' ,etime='"+etime+"' ,isend='"+isend+"' ,remark='"+remark+"' where id=" + id, function (err, rows) {
if (err) {
res.end('修改失败：' + err);
} else {
res.redirect('/users');
}
});
});
module.exports = router;
app.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<style>
th,td{
width: 200px;
height: 50px;
border: 1px solid black;
}
textarea{outline:none;resize:none;border-color: transparent}
table{border-collapse:collapse;}
</style>
<body>
<table>
<tr>
<th>功能序号</th>
<th>功能名称</th>
<th>父功能序号</th>
<th>负责人</th>
<th>开始时间</th>
<th>结束时间</th>
<th>是否完成</th>
<th>备注</th>
<th>操作</th>
</tr>
{% for item in datas %}
<form action="/users/update" method="post">
<tr>
<td>{{item.id}}</td>
<td><textarea rows="3" cols="30" type="text" name="name" value="{{item.name}}">{{item.name}}</textarea></td>
<td><textarea rows="3" cols="30" type="text" name="pid" value="{{item.pid}}">{{item.pid}}</textarea></td>
<td><textarea rows="3" cols="30" type="text" name="pm" value="{{item.pm}}">{{item.pm}}</textarea></td>
<td><textarea rows="3" cols="30" type="text" name="stime" value="{{item.stime}}">{{item.stime}}</textarea></td>
<td><textarea rows="3" cols="30" type="text" name="etime" value="{{item.etime}}">{{item.etime}}</textarea></td>
<td><textarea rows="3" cols="30" type="text" name="isend" value="{{item.isend}}">{{item.isend}}</textarea></td>
<td><textarea rows="3" cols="30" type="text" name="remark" value="{{item.remark}}">{{item.remark}}</textarea></td>
<td>
<button href="/users/del/{{item.id}}">删除</button>
<input type="hidden" value="{{item.id}}" name="id">
<input type="submit" value="提交">
</td>
</tr>
</form>
{% endfor %}
</table>
<form action="/users/add" method="post">
<input type="submit" value="新增">
</form>
</body>
</html>
