Node.js Express+Mongodb 項目實戰

時間 2020-05-06

標籤 node.js node express+mongodb express mongodb 項目實戰欄目 Node.js 简体版

原文原文鏈接

Node.js Express+Mongodb 項目實戰html

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

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

項目前準備

安裝node.js
安裝express
安裝mongoDB

章節目錄

商品管理系統目錄結構：github

查詢mongodb數據庫登陸功能

建立數據庫

1.打開數據庫mongodb

2.須要建立productmanage數據庫數據庫

3.productmanage 數據庫裏面有user表express

4.在user表中有數據 ,若是沒有執行以下命令插入npm

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

如圖：json

鏈接數據庫

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

//安裝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');