实现商品的新增，修改，删除
上一节我们介绍了把mongoDB的功能都做了封装，这一节我们直接使用，代码如下
//数据库操作 先引入封装好的db
var DB =require('./module/db.js');
1：定义一个商品提交的页面ProductAdd.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--这里的路径要使用static中间件静态文件服务 暴露-->
<link rel="stylesheet" type="text/css" href="css/common.css"/>
</head>
<body >
<%- include('public/header.ejs') %>
<div id="content" class="content">
<div class="menuLeft">
<ul class="menuUl">
<li><a href='/productList'>商品管理</a></li>
<li><a href='/productList'>商品列表</a></li>
<li><a href='/productAdd'>增加商品</a></li>
<li><a href='/productEdit'>编辑商品</a></li>
<li><a href='#'>分裂管理</a></li>
<li><a href='#'>商品分类列表</a></li>
<li><a href='#'>商品分类增加</a></li>
</ul>
</div>
<div class="menuContent">
<h2 class="shopList">商品增加</h2>
<form action="/shopAdd" method="post" enctype="multipart/form-data">
<div id="login" class="shopAdd" >
<div class="shopItem">
<label for="">商品名称：</label>
<input type="text" name="shopname" id="shopname" />
</div>
<div class="shopItem">
<label for="">商品图片：</label>
<input type="file" name="shoppic" id="shoppic" />
</div>
<div class="shopItem">
<label for="">商品价格：</label>
<input type="text" name="shopprice" id="shopprice" />
</div>
<div class="shopItem">
<label for="">商品邮费：</label>
<input type="text" name="shopfee" id="shopfee" />
</div>
<div class="shopItem">
<label for="">商品描述：</label>
<textarea name="shopDesc" rows="" cols="" id="shopDesc"></textarea>
</div>
<input class="shopSubmit" type="submit" value="提交"/>
</div>
</form>
</div>
</div>
</body>
</html>
注意提交表单必须一定加
method="post" enctype="multipart/form-data"否则无法提交，上传会失败
image.png
这里文件图片上传 我们用了multiparty这个插件，可以解析图片地址
先安装一下
cnpm install multiparty -D使用
//图片上传
var multiparty = require('multiparty');
var http = require('http');
具体的接口实现
//商品新增接口
app.all("/shopAdd",(req,res)=>{
var form = new multiparty.Form();
//配置文件上传目录，后续需要映射虚拟目录才可以显示
form.uploadDir = "upload";//新建一个upload目录，专门存储上传图片
form.parse(req, function(err, fields, files) {
//console.log(fields);
//console.log(files);
let shopname= fields.shopname[0];
//图片路径 注意是files
let shoppic = files.shoppic[0].path;
let shopprice = fields.shopprice[0];
let shopfee = fields.shopfee[0];
let shopDesc = fields.shopDesc[0];
//console.log(shopname);
//console.log(shoppic);
//console.log(shopprice);
//console.log(shopfee);
//console.log(shopDesc);
//插入数据库
DB.insert('shop',{
title:shopname,
pic:shoppic,
price:shopprice,
fee:shopfee
},(err,data)=>{
//if(!err){
res.redirect("/productList")
//}
})
})
});
效果图
image.png
image.png
image.png
接下来实现修改
思路：点击编辑的时候，把数据库的id放在url中，页面初始化的时候解析url参数，获取数据库的_id存储在隐藏域中，然后根据_id查询数据库出来数据，填充在页面上，然后提交表单，根据_id更新数据库，大功告成，上代码
<tbody id="tbody">
<% for(var i=0;i<shopList.length;i++){ %>
<tr>
<td><%= i+1 %></td>
<td><%= shopList[i].title %></td>
<td>
<img src="<%= shopList[i].pic %>" width="36" height="36" />
</td>
<td><%= shopList[i].price %></td>
<td><%= shopList[i].fee %></td>
<td>
<a href="/shopEdit?id=<%= shopList[i]._id %>" class="btn edidt">编辑</a>
<a href="/shopDel?id=<%= shopList[i]._id %>" class="btn remove">删除</a>
</td>
</tr>
<% } %>
</tbody>
image.png
接口实现
//商品修改初始化页面
app.all("/shopEdit",(req,res)=>{
//获取id
let id =req.query.id;
console.log(id);
//查询数据
DB.find('shop',{_id:new DB.objectId(id)},(err,data)=>{
//console.log(data[0]);
//console.log(data);
//渲染修改视图页面
res.render('productEdit',{shopList:data[0]})
})
});
image.png
ps:这里要注意解析数据库_id,要用到一个插件，否则解析不了（objectId）
我们再db.js中引入一下 cnpm install -D
//处理数据库对象的id库
var objectId =require('mongodb').ObjectID;
//暴露id使用
exports.objectId=objectId;
点击编辑页面中的提交按钮后
//商品修改接口提交修改
app.all("/doshopEdit",(req,res)=>{
var form = new multiparty.Form();
//配置文件上传目录，后续需要映射虚拟目录才可以显示
form.uploadDir = "upload";//新建一个upload目录，专门存储上传图片
form.parse(req, function(err, fields, files) {
//console.log(fields);
//先拿到修改的ID，更新使用
let _id = fields._id[0];
console.log(_id);
let shopname= fields.shopname[0];
//图片路径 注意是files
let shoppic = files.shoppic[0].path;
let shopprice = fields.shopprice[0];
let shopfee = fields.shopfee[0];
let shopDesc = fields.shopDesc[0];
console.log(files);
//console.log(shoppic);
//console.log(shopprice);
//console.log(shopfee);
//console.log(shopDesc);
//单独处理图片
let orginFileName =files.shoppic[0].originalFilename;
if(orginFileName){//有修改图片
var setData={
title:shopname,
pic:shoppic,
price:shopprice,
fee:shopfee
}
}else{ //没有修改图片就不添加
var setData={
title:shopname,
price:shopprice,
fee:shopfee
}
}
//删除临时文件
//fs.unlink(shoppic,(err)=>{console.log(err)});
//根据id修改更新数据库
DB.update('shop',{"_id":new DB.objectId(_id)},setData
,function(err,data){
if(!err){
res.redirect('/productList');
}
}
);
})
});
效果图
image.png
image.png
image.png
修改成功OK（注意要删除修改后生成的临时文件哦）
最后一步 删除
同理：也是根据id直接操作数据库就OK啦
//删除文件
app.all("/shopDel",(req,res)=>{
let _id= req.query.id;
console.log("_id==="+_id);
//根据id修改更新数据库
DB.deleteOne('shop',{"_id":new DB.objectId(_id)}
,function(err){
if(!err){
res.redirect('/productList');
console.log("删除成功");
}
}
);
});
