淘先锋技术网

首页 1 2 3 4 5 6 7

mongoDB实现增删改查

#实现商品的新增，修改，删除
上一节我们介绍了把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" target="_blank" rel="external nofollow" />
	</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 %>" target="_blank" rel="external nofollow"  class="btn edidt">编辑</a>
								<a  href="/shopDel?id=<%= shopList[i]._id %>" target="_blank" rel="external nofollow"    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("删除成功");
            	}
			}
	);
	
});