node.js之web框架Express入门(源码)

最新推荐文章于 2024-04-23 17:07:50 发布

疯狂攻城狮

最新推荐文章于 2024-04-23 17:07:50 发布

阅读量409

点赞数 1

分类专栏： nodejs javascript web前端

本文链接：https://blog.csdn.net/qq_26790735/article/details/53923771

版权

web前端同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

nodejs

1 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

项目开发工具：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请求发出；

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:"注册失败"});
        }
    });
};

3、db.js 数据连接池（数据源）

var mysql = require("mysql");
var connection = mysql.createConnection({
   host:'localhost',  //数据库地址ip
   user:'username',   //数据库用户名
   password:'123456', //数据库密码
   database:'dataname'    //数据库名称
});

exports.getConnection = connection;

4、sql.js   //dao层数据查询

var 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);
      });
   }
};

5、home.ejs

<!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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <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>