下面實現商品管理系統
第一步：對應的ejs與數據交換的編寫格式。
商品列表界面product.ejs
<% for(var i=0;i<list.length;i++){%> <tr> <td><%=i+1%></td> <td><img width="100" src="<%=list[i].pic%>" alt=""/></td> <td><%=list[i].title%></td> <td><%=list[i].price%></td> <td><%=list[i].fee%></td> <td class="text-center"> <a href="/productedit?id=<%=list[i]._id%>" class="btn btn-success">修改</a> <a href="/productdelete?id=<%=list[i]._id%>" class="btn btn-danger">刪除</a> </td> </tr> <%}%>
商品編輯頁面
<form action="/doProductEdit" method="post" enctype="multipart/form-data"> <ul> <input type="hidden" name="_id" value="<%=list._id%>"/> <input type="hidden" name="pic" value="<%=list.pic%>"/> <li> 商品名稱: <input type="text" name="title" value="<%=list.title%>"/></li> <li> 商品圖片: <input type="file" name="pic"/> <br/> <br/> <img src="<%=list.pic%>" width="100"/> <br/> <br/> </li> <li> 商品價格: <input type="text" name="price" value="<%=list.price%>"/></li> <li> 商品郵費: <input type="text" name="fee" value="<%=list.fee%>"/></li> <li> 商品描述: <textarea name="description" id="" cols="60" rows="8"><%=list.description%></textarea> </li> <li> <br/> <button type="submit" class="btn btn-default">提交</button> </li> </ul> </form>
商品增加頁面productadd.ejs
<form action="/doProductAdd" method="post" enctype="multipart/form-data"> <ul> <li> 商品名稱: <input type="text" name="title"/></li> <li> 商品圖片: <input type="file" name="pic"/></li> <li> 商品價格: <input type="text" name="price"/></li> <li> 商品郵費: <input type="text" name="fee"/></li> <li> 商品描述: <textarea name="description" id="" cols="60" rows="8"></textarea> </li> <li> <br/> <button type="submit" class="btn btn-default">提交</button> </li> </ul> </form>
第二步：由於商品的增刪改查都要用到數據庫，所以第二步應該講數據庫封裝起來，接着在app.js中引用相應的模塊。
新建db.js，開始判斷是否連接數據庫成功。
var MongoClient=require('mongodb').MongoClient; var DbUrl='mongodb://localhost:27017/productmanage'; var ObjectID = require('mongodb').ObjectID; function __connectDb(callback){ MongoClient.connect(DbUrl,function(err,db){ if(err){ console.log('數據庫連接失敗'); return; } //增加 修改 刪除 callback(db); }) }
exports.ObjectID=ObjectID; //查找數據 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.deleteOne=function(collectionname,json,callback){ __connectDb(function(db){ db.collection(collectionname).deleteOne(json,function(error,data){ callback(error,data); }) }) }
第三步：編輯相應的路由
3.1商品增加路由
//商品列表 app.get('/product',function(req,res){ DB.find('product',{},function(err,data){ res.render('product',{ list:data }); }) }) //顯示增加商品的頁面 app.get('/productadd',function(req,res){ res.render('productadd'); })
當點擊增加商品時，跳轉到doProductAdd路由上
<form action="/doProductAdd" method="post" enctype="multipart/form-data">
在第一篇的時候使用body-parser來接收用戶密碼和用戶名，但是在商品增加編輯中存在圖片上傳問題，body-parser無法實現，所以改用multiparty模塊。
先安裝multiparty
npm install multiparty --save
在引入：
var multiparty = require('multiparty');
使用post獲取商品增加提交的數據
app.post('/doProductAdd',function(req,res){
//獲取表單的數據 以及post過來的圖片
var form = new multiparty.Form();
form.uploadDir='upload' //上傳圖片保存的地址 upload目錄必須存在
form.parse(req, function(err, fields, files) {
//獲取提交的數據以及圖片上傳成功返回的圖片信息
//fields獲取表單的數據 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;
//在數據庫中插入數據
DB.insert('product',{
title:title,
price:price,
fee,//效果與上面一致
description,
pic
},function(err,data){
if(!err){
res.redirect('/product'); /*上傳成功跳轉到首頁*/
}
})
});
})
此時添加/upload路由獲取圖片信息，因為此時圖片的地址是/upload/xxxxxxx.jpg，否則默認從public從查找資源。
app.use('/upload',express.static('upload'));
拓展：如果此時圖片的地址是 /xxxxxxx.jpg，可以直接配置，注意路由!
app.use(express.static('upload'));
3.2商品編輯路由
注意：無論是商品編輯還是刪除都是通過get傳值來獲取商品的數據庫id號
<a href="/productedit?id=<%=list[i]._id%>" class="btn btn-success">修改</a> <a href="/productdelete?id=<%=list[i]._id%>" class="btn btn-danger">刪除</a>
app.js中
app.get('/productedit',function(req,res){
//獲取get傳值 id
var id=req.query.id;
console.log(id);
//去數據庫查詢這個id對應的數據 自增長的id 要用{"_id":new DB.ObjectID(id)
DB.find('product',{"_id":new DB.ObjectID(id)},function(err,data){
//console.log(data);
res.render('productedit',{
list:data[0]
});
});
})
在修改商品form表格上依然使用post來提交數據
<form action="/doProductEdit" method="post" enctype="multipart/form-data">
在編輯/doProductEdit路由的時候，如果並沒有修改圖片信息，此時我們需要作出判斷，否則會在upload文件上存在一串非圖片信息的字符串，最終返回/product界面時，沒有出現並沒有修改的商品圖片。
最終在修改的商品信息返回到product頁面
app.post('/doProductEdit',function(req,res) {
var form = new multiparty.Form();
form.uploadDir = 'upload' // 上傳圖片保存的地址
form.parse(req, function (err, fields, files) {
//獲取提交的數據以及圖片上傳成功返回的圖片信息
//console.log(fields);
console.log(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');
}
})
});
})
3.3商品刪除
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');
}
})
})
最后的最后，奉上項目的源碼地址：https://github.com/xinhua6/productManage.git