项目开发工具:webStorm
nodejd版本:v4.4.7
框架:Express
源码地址:http://download.csdn.net/detail/qq_26790735/9724356
项目结构:
数据库user表结构:
文件源码:
1、app.js nodejs核心文件
var express = require("express"); var morgan = require("morgan"); var path = require('path'); var ejs = require('ejs'); var bodyParser = require("body-parser"); var router = require("./routes/route");
var app = express(); app.set('view engine', 'ejs'); //设置视图引擎 app.set('views', path.join(__dirname, './views')); //放置视图引擎的文件夹 app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); //接收json数据请求 app.use(express.static("./public")); //设置静态文件,一般放html,css,js文件 app.use(morgan()); //显示日志
/** * get请求 */
app.get("/",router.home);app.get("/list",router.list);app.get("/del:id",router.del);app.get("/edit:id",router.edit);
/** * post请求 */
app.post("/add", router.add);app.post("/updata", router.updata);
/**
* 监听端口
*/
app.listen(8888,function(){ console.log("run....");});module.exports = app;
2、route.js 路由处理,由app文件中get,post请求发出;
3、db.js 数据连接池(数据源)var sqlDao = require("../dao/sql"); //获取dao层查询的数据 /* GET home page. */ exports.home = function(req,res){ res.render("home",{msg:""}); }; exports.add = function(req, res, next){ var name = req.body.username; //req.body.xxx获取form表单中字段值,xxx为name var age = parseInt(req.body.age); var idcard = req.body.idcard; sqlDao.getDao.add(name, age,idcard,function(row){ console.log(row); if(row&&row.affectedRows>0){ sqlDao.getDao.queryAll(function(result){ res.render("list",{rows:result}); }); }else{ res.render("home",{msg:"注册失败"}); } }); }; exports.list = function(req,res){ sqlDao.getDao.queryAll(function(result){ if(result){ res.render("list",{rows:result}); } }); }; exports.del = function(req,res){ console.log(req.params.id); sqlDao.getDao.delete(req.params.id,function(row){ console.log(row.affectedRows); sqlDao.getDao.queryAll(function(result){ console.log(result); res.render("list",{rows:result}); }); }); }; exports.edit = function(req,res){ console.log(req.params.id); sqlDao.getDao.queryById(req.params.id,function(row){ console.log(row); var name = row[0].user_cn_name; var age = row[0].user_age; var idcard = row[0].user_idcard; var id = row[0].id; res.render("updata",{aa:name,bb:age,cc:idcard,dd:id}); }); }; exports.updata = function(req, res, next){ var id = req.body.id; var name = req.body.username; var age = parseInt(req.body.age); var idcard = req.body.idcard; sqlDao.getDao.update(id,name, age,idcard,function(row){ console.log(row); if(row&&row.affectedRows>0){ sqlDao.getDao.queryAll(function(result){ res.render("list",{rows:result}); }); }else{ res.render("home",{msg:"注册失败"}); } }); };
var mysql = require("mysql"); var connection = mysql.createConnection({ host:'localhost', //数据库地址ip user:'username', //数据库用户名 password:'123456', //数据库密码 database:'dataname' //数据库名称 }); exports.getConnection = connection;
4、sql.js //dao层数据查询
5、home.ejsvar connection = require("./db"); var sql = { insert:'INSERT INTO user(id,user_cn_name, user_age, user_idcard) VALUES(0,?,?,?)', update:'update user set user_cn_name=?, user_age=?,user_idcard=? where id=?', delete: 'delete from user where id=?', queryById: 'select * from user where id=?', queryAll: 'select * from user' }; exports.getDao = { add: function (username, age,idcard,callback) { connection.getConnection.query(sql.insert,[username,age,idcard],function(err,reslut){ callback(reslut); }); }, delete: function (id, callback) { connection.getConnection.query(sql.delete,id,function(err, row){ console.log(row.affectedRows); callback(row); }); }, update: function (id,name, age,idcard, callback) { connection.getConnection.query(sql.update, [name, age,idcard,id], function(err, result) { callback(result); }); }, queryById: function (id, callback) { connection.getConnection.query(sql.queryById, id, function(err, result) { callback(result); }); }, queryAll: function (callback) { connection.getConnection.query(sql.queryAll, function(err, result) { callback(result); }); } };
<!doctype html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="css/styles.css" type="text/css" /> <link rel="stylesheet" href="css/styles.mb.css" type="text/css" /> </head> <body> <div class="container"> <div class="row clearfix"> <div class="col-md-offset-4 col-md-4 col-md-offset-4 column"> <form action="/add" method="post"> <div class="form-group"> <label>姓名:</label><input type="text" name="username" class="form-control"/> </div> <div class="form-group"> <label>年龄:</label><input type="text" name="age" class="form-control"/> </div> <div class="form-group"> <label>证件号:</label><input type="text" name="idcard" class="form-control"/> </div> <button type="submit" class="btn btn-default">注册</button> </form> <div><%= msg %></div> </div> </div> </div> </body> </html>
6、list.ejs
<link rel="stylesheet" href="css/styles.css" type="text/css" /> <link rel="stylesheet" href="css/styles.mb.css" type="text/css" /> <center> <table class="table" border="2" cellspacing="1" style="color:red;border:2px"> <tr><td>ID</td><td>姓名</td><td>年龄</td><td>证件号码</td><td>操作</td></tr> <% for(var i in rows ){ %> <tr> <td><%= rows[i].id %></td> <td><%= rows[i].user_cn_name %></td> <td><%= rows[i].user_age %></td> <td><%= rows[i].user_idcard %></td> <td> <a href="/del<%= rows[i].id %>">删除</a> <a href="/edit<%= rows[i].id %>">修改</a> </td> </tr> <% } %> </table> <div><a href="/">新增用户</a></div> </center>
7、updata.ejs
<link rel="stylesheet" href="css/styles.css" type="text/css" /> <link rel="stylesheet" href="css/styles.mb.css" type="text/css" /> <center> <form action="/updata" method="post"> <div class="form-group"> <label>姓名:</label><input type="text" value="<%= aa %>" name="username" class="form-control"/> </div> <div class="form-group"> <label>年龄:</label><input type="text" value="<%= bb %>" name="age" class="form-control"/> </div> <div class="form-group"> <label>证件号:</label><input type="text" value="<%= cc %>" name="idcard" class="form-control"/> </div> <input type="hidden" name="id" value="<%= dd %>"> <button type="submit" class="btn btn-default">确认修改</button> </form> <button type="button" class="btn btn-default" οnclick="back()">取消</button> </center> <script> function back(){ window.location.href="/list"; } </script>