Node.js Express+Mongodb 項目實戰

這是一個簡單的商品管理系統的小項目，包含的功能還算挺全的，項目涵蓋了登錄、註冊，圖片上傳以及對商品進行增、刪、查、改等操作，對於新手來說是個很不錯的練手項目，分享給大家。

GitHub源碼：https://github.com/oceanMin/cms

項目前準備

• 安裝node.js
• 安裝express
• 安裝mongoDB

章節目錄

• 快速開始
  • 快速開始
• 模塊
  • express商品管理系統介紹
  • 框架搭建、ejs 、express.static靜態頁面搭建
  • 商品管理系統查詢mongodb數據庫登錄功能
  • 退出登錄功能
  • 中間件權限判斷
  • 密碼加密存儲
  • 數據庫商品列表顯示
  • DB數據庫的封裝
  • 圖片上傳
  • 修改商品數據
  • 刪除商品數據
  • 路由模塊化處理
  • 商品管理系統模塊化改造

商品管理系統目錄結構：

查詢mongodb數據庫登錄功能

創建數據庫

1.打開數據庫

2.需要創建productmanage數據庫

3.productmanage 數據庫裏面有user表

4.在user表中有數據 ,如果沒有執行如下命令插入

db.user.insert({"username":"admin","password":"123456"})

如圖：

連接數據庫

繼續在app.js文件中添加如下代碼：

//安裝body-parser中間件
//獲取post
var bodyParser = require(‘body-parser‘);
// 設置body-parser中間件
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

//數據庫操作
var MongoClient=require(‘mongodb‘).MongoClient;

var DbUrl=‘mongodb://localhost:27017/productmanage‘;  /*連接數據庫*/

//登錄
app.get(‘/login‘,function
 
(req,res){
    res.render(‘login‘);
})

//獲取登錄提交的數據
app.post(‘/doLogin‘,function(req,res){

    //1.獲取數據
    //2.連接數據庫查詢數據
    MongoClient.connect(DbUrl,function(err,db){
        if(err){
            console.log(err);
            return;
        }

        //查詢數據  {"username":req.body.username,"password":req.body.password}
        var result=db.collection(‘user‘).find(req.body);

        //遍歷數據的方法
        result.toArray(function(err,data){
            console.log(data);

            if(data.length>0){
                console.log(‘登錄成功‘);

                //保存用戶信息
                req.session.userinfo=data[0];
                res.redirect(‘/product‘);  /*登錄成功跳轉到商品列表*/
            }else{
                //console.log(‘登錄失敗‘);
                res.send("<script>alert(‘登錄失敗‘);location.href=‘/login‘</script>");
            }
            db.close();
        })
    })
})

退出登錄

退出登錄很簡單，下面一段代碼搞定：

app.get(‘/loginOut‘,function(req,res){
    //銷毀session
    req.session.destroy(function(err){
        if(err){
            console.log(err);
        }else{
            res.redirect(‘/login‘);
        }
    })
})

中間件權限判斷

這裏我們要添加一個中間件作為權限判斷，首先要安裝一個express-session中間件用來保存用戶信息

cnpm install express-session --save-dev

在app.js文件中，我們自定義一個中間件用來判斷登錄狀態

//保存用戶信息
var session = require("express-session");
//配置中間件  固定格式
app.use(session({
    secret: ‘keyboard cat‘,
    resave: false,
    saveUninitialized: true,
    cookie: {
        maxAge:1000*60*30
    },
    rolling:true
}))

//自定義中間件  判斷登錄狀態
app.use(function(req,res,next){
    //console.log(req.url);
    //next();
    if(req.url==‘/login‘ || req.url==‘/doLogin‘){
        next();
    }else{
        if(req.session.userinfo&&req.session.userinfo.username!=‘‘){   /*判斷有沒有登錄*/
            app.locals[‘userinfo‘]=req.session.userinfo;   /*配置全局變量  可以在任何模板裏面使用*/
            next();
        }else{
            res.redirect(‘/login‘)
        }
    }
})

密碼加密存儲

這裏我們用到的是md5加密，用法很簡單，還是一樣 先安裝依賴：

cnpm install md5-node --save-dev

在app.js文件中引入：

var md5=require(‘md5-node‘); /*md5加密*/

//獲取登錄提交的數據
app.post(‘/doLogin‘,function(req,res){
    var username=req.body.username;
    var password=md5(req.body.password);  /*要對用戶輸入的密碼加密*/

    //1.獲取數據
    //2.連接數據庫查詢數據
    MongoClient.connect(DbUrl,function(err,db){
        if(err){
            console.log(err);
            return;
        }
        //查詢數據  {"username":req.body.username,"password":req.body.password}
        var result=db.collection(‘user‘).find({
            username:username,
            password:password
        });

        //另一種遍歷數據的方法
        result.toArray(function(err,data){
            if(data.length>0){
                console.log(‘登錄成功‘);
                //保存用戶信息
                req.session.userinfo=data[0];

                res.redirect(‘/product‘);  /*登錄成功跳轉到商品列表*/

            }else{
                //console.log(‘登錄失敗‘);
                res.send("<script>alert(‘登錄失敗‘);location.href=‘/login‘</script>");
            }
            db.close();
        })
    })
})

※ 註意：在使用md5加密登錄系統時，要確保數據庫中保存的密碼是加密的，否則會因密碼不一致而登錄不上。

數據庫商品列表顯示

打開app.js文件，修改代碼如下：

app.get(‘/product‘,function(req,res){
    //連接數據庫查詢數據
    MongoClient.connect(DbUrl,function(err,db){
        if(err){
            console.log(err);
            console.log(‘數據庫連接失敗‘);
            return;
        }
        var result=db.collection(‘product‘).find();

        result.toArray(function(error,data){
            if(error){
                console.log(error);
                return;
            }
            db.close();

            //console.log(data);
            res.render(‘product‘,{
                list:data
            });
        })
    })
})

DB數據庫的封裝

完善DB數據庫封裝。新建 modules/db.js ，添加如下代碼：

 var MongoClient = require(‘mongodb‘).MongoClient;
 var DbUrl = ‘mongodb://127.0.0.1:27017/productmanage‘; //連接數據庫

 var ObjectID = require(‘mongodb‘).ObjectID;

 function __connectDb(callback){

     MongoClient.connect(DbUrl, function(err,db){

         if(err){
             console.log(err);
             console.log(‘數據庫連接失敗‘);
             return;
         }
        callback(db);
     })
 }

 //暴露ObjectID
exports.ObjectID = ObjectID;

 /**
  * collectionname: 表名
  * json：查詢條件
  * callback： 返回查詢的數據
  */
//  查詢數據
 exports.find = function(collectionname,json,callback){
     __connectDb(function(db){
         var result = db.collection(collectionname).find(json);

         result.toArray(function(error, data){
             db.close();    /**關閉數據庫連接 */
             callback(error, data); /**拿到數據，執行回調函數 */
         })
     })
 }

//  新增數據
 exports.insert = function(collectionname,json,callback){
     __connectDb(function(db){
         db.collection(collectionname).insertOne(json,function(error,data){
             callback(error,data);
         })
     })
 }

//  修改數據
exports.update = function(collectionname,json1,json2,callback){
    __connectDb(function(db){
        db.collection(collectionname).updateOne(json1,{$set:json2},function(error,data){
            callback(error,data);
        })
    })
}

//  刪除數據
exports.delete = function(collectionname,json,callback){
    __connectDb(function(db){
        db.collection(collectionname).deleteOne(json,function(error,data){
            callback(error,data);
        })
    })
}

然後在app.js文件中引入db.js文件

//數據庫操作
var DB=require(‘./modules/db.js‘);
//獲取登錄提交的數據
app.post(‘/doLogin‘,function(req,res){
    var username=req.body.username;
    var password=md5(req.body.password);  /*要對用戶輸入的密碼加密*/

    //1.獲取數據
    //2.連接數據庫查詢數據
    DB.find(‘user‘,{
        username:username,
        password:password
    },function(err,data){
        if(data.length>0){
            console.log(‘登錄成功‘);
            //保存用戶信息
            req.session.userinfo=data[0];

            res.redirect(‘/product‘);  /*登錄成功跳轉到商品列表*/

        }else{
            //console.log(‘登錄失敗‘);
            res.send("<script>alert(‘登錄失敗‘);location.href=‘/login‘</script>");
        }
    })
})

//商品列表
app.get(‘/product‘,function(req,res){
    DB.find(‘product‘,{},function(err,data){
        res.render(‘product‘,{
            list:data
        });
    })
})

圖片上傳

圖片上傳插件的使用

1. npm install multiparty

2. var multiparty = require(‘multiparty‘);

3.上傳圖片的地方

var form = new multiparty.Form();

     form.uploadDir=‘upload‘   上傳圖片保存的地址

     form.parse(req, function(err, fields, files) {

       //獲取提交的數據以及圖片上傳成功返回的圖片信息
});

4.html頁面form 表單要加入 enctype="multipart/form-data"（這個很重要）

圖片上傳代碼如下：

var multiparty = require(‘multiparty‘);  /*圖片上傳模塊  即可以獲取form表單的數據 也可以實現上傳圖片*/

//獲取表單提交的數據 以及post過來的圖片
app.post(‘/doProductAdd‘,function(req,res){

    //獲取表單的數據 以及post過來的圖片

    var form = new multiparty.Form();

    form.uploadDir=‘upload‘   //上傳圖片保存的地址     目錄必須存在

    form.parse(req, function(err, fields, files) {

        //獲取提交的數據以及圖片上傳成功返回的圖片信息
        
        //console.log(fields);  /*獲取表單的數據*/
        
        //console.log(files);  /*圖片上傳成功返回的信息*/
        var title=fields.title[0];
        var price=fields.price[0];
        var fee=fields.fee[0];
        var description=fields.description[0];
        var pic=files.pic[0].path;
        //console.log(pic);

        DB.insert(‘product‘,{
            title:title,
            price:price,
            fee,
            description,
            pic

        },function(err,data){
            if(!err){
                res.redirect(‘/product‘); /*上傳成功跳轉到首頁*/
            }
        })
    });
})

修改商品

修改商品代碼如下：

//執行修改的路由
app.post(‘/doProductEdit‘,function(req,res){
    var form = new multiparty.Form();

    form.uploadDir=‘upload‘  // 上傳圖片保存的地址

    form.parse(req, function(err, fields, files) {
        //獲取提交的數據以及圖片上傳成功返回的圖片信息
        var _id=fields._id[0];   /*修改的條件*/
        var title=fields.title[0];
        var price=fields.price[0];
        var fee=fields.fee[0];
        var description=fields.description[0];

        var originalFilename=files.pic[0].originalFilename;
        var pic=files.pic[0].path;

        if(originalFilename){  /*修改了圖片*/
            var setData={
                    title,
                    price,
                    fee,
                    description,
                    pic
            };
        }else{ /*沒有修改圖片*/
            var setData={
                title,
                price,
                fee,
                description
            };
            //刪除生成的臨時文件
            fs.unlink(pic);
        }
        DB.update(‘product‘,{"_id":new DB.ObjectID(_id)},setData,function(err,data){
              if(!err){
                  res.redirect(‘/product‘);
              }
        })
    });

刪除商品數據

app.js加入刪除商品代碼：

//刪除商品
app.get(‘/productdelete‘,function(req,res){

    //獲取id
    var  id=req.query.id;
    DB.deleteOne(‘product‘,{"_id":new DB.ObjectID(id)},function(err){
        if(!err){

            res.redirect(‘/product‘);
        }
    })
    //res.send(‘productdelete‘);
})

路由模塊化

基本功能完成的差不多，我們來改造下剛寫的代碼

首先，改造一下 app.js頁面，修改如下：

var express=require(‘express‘);

//引入模塊
var admin =require(‘./routes/admin.js‘);

var index =require(‘./routes/index.js‘)

var app=new express();  /*實例化*/

//admin
//admin/user

app.use(‘/‘,index);

app.use(‘/admin‘,admin);

app.listen(3000,‘127.0.0.1‘);

……

完整代碼請查看GitHub源碼，如有問題請直接在 Issues 中提，或者您發現問題並有非常好的解決方案，歡迎 PR ??

GitHub源碼：https://github.com/oceanMin/cms

Node.js Express+Mongodb 項目實戰