分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

利用nodejs实现商品管理系统(二)

发布时间:2023-09-06 02:24责任编辑:赖小花关键词:jsnodejs

下面实现商品管理系统

第一步:对应的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

利用nodejs实现商品管理系统(二)

原文地址:https://www.cnblogs.com/lanhuo666/p/10035679.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved