mongodb方法+使用兩個庫 增刪改查案例
阿新 • • 發佈：2021-01-05
目錄
檔案目錄
資料庫 db.js
var mongodb = require('mongodb'); // 引入mongodb var MongoClient = mongodb.MongoClient; var dbUrl = "mongodb://localhost:27017"; // 資料庫的地址及埠 var dbName = "myFiult"; // 庫名 // 連線資料庫 function connectMGDB(cb, res) { MongoClient.connect(dbUrl, {useNewUrlParser: true}, function(err, db) { // console.log('db==========', db); if(err) { console.log("資料庫連線失敗：", err); res.send({error: 1}); // 資料庫連線失敗 } else { console.log("資料庫連線成功"); // 關聯資料庫 var dbase = db.db(dbName); // 進行增刪改查操作 cb(dbase, db); } }) } // 插入方法 module.exports.insert = function(res, cName, obj, cb) { connectMGDB(function(dbase, db) { dbase.collection(cName).insert(obj, function(err, result) { cb(err, result, db); }) }, res) } // 查詢方法 module.exports.find = function(res, cName, whereObj, cb) { connectMGDB(function(dbase, db) { whereObj.find ? whereObj.find : whereObj.find = {}; // whereObj物件中有find屬性 則執行whereObj.find whereObj.sort ? whereObj.sort : whereObj.sort = {}; whereObj.limit ? whereObj.limit : whereObj.limit = 0; whereObj.skip ? whereObj.skip : whereObj.skip = 0; // 查詢 age>16 的資料 跳過3條資料 顯示3條資料 dbase.collection(cName).find().count().then(function(count) { // 查詢當前資料總量 dbase.collection(cName).find(whereObj.find).limit(whereObj.limit) .skip(whereObj.skip).collation({"locale": "zh", numericOrdering:true}).sort(whereObj.sort).toArray(function(err, result) { // 根據查詢條件返回對應資料 cb(err, result, db, count); }) }) }, res); } // 刪除方法 module.exports.delete = function(res, cName, obj, cb) { connectMGDB(function(dbase, db) { dbase.collection(cName).deleteMany(obj, function(err, result) { cb(err, result, db) }) }, res); } // 修改方法 module.exports.update = function(res, cName, whereObj, updatePbj, cb) { connectMGDB(function(dbase, db) { dbase.collection(cName).updateOne(whereObj, updatePbj, function(err, result) { cb(err, result, db) }) }, res); }
首頁
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/new_file.css"/> <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h1>華聯超市</h1> <a href="http://127.0.0.1:3000/hd/hd.html" style="margin-left: 20px;">錄入商品</a>  <a href="http://127.0.0.1:3000/qd/qd.html">前臺展示</a> </body> <script src="js/new_file.js" type="text/javascript" charset="utf-8"></script> </html>
new_file.css
*{
margin: 0;
padding: 0;
}
h1{
margin-left: 20px;
line-height: 60px;
}
a{
color: blue;
}
錄入商品頁
hd.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="hd.css"/> <script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h1>商品錄入</h1> <p> 圖片地址：<input type="text" class="img"/>  商品名稱：<input type="text" class="name"/> </p> <p> 商品價格：<input type="text" class="many"/>  商品種類： <select class="class"> <option value="冰箱" selected="selected">冰箱</option> <option value="電腦">電腦</option> <option value="手機">手機</option> </select> </p> <p> <button type="button" class="add">新增</button> </p> <p> 名稱：<input type="text" class="names"/>  價格：<input type="text" class="manys"/>  <button type="button" class="ss">搜尋</button> </p> <p class="ts yc" style="color: red;">名稱/價格不能都為空</p> <p class="button"> <button type="button" selected class="alls color">全部</button>  <button type="button" class="bx">冰箱</button>  <button type="button" class="dn">電腦</button>  <button type="button" class="sj">手機</button> <input type="text" class="save yc"/> </p> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>圖片</th> <th>名稱</th> <th>價格</th> <th>種類</th> <th>操作</th> </tr> </thead> <tbody> <!--<tr> <td> <img src="../imgs/${arr[i].img}.jpg"/> </td> <td>${arr[i].name}</td> <td>${arr[i].many}</td> <td>${arr[i].classs}</td> <td> <a href="javascript:void(0)" onclick=del('${arr[i]._id}')>刪除</a>  <a href="javascript:void(0)" class="xg">修改</a> </td> </tr>--> </tbody> </table> </body> <script src="hd.js" type="text/javascript" charset="utf-8"></script> </html>
hd.css
*{
margin: 0;
padding: 0;
text-decoration: none;
outline: none;
}
body{
padding-left: 20px;
}
h1{
line-height: 60px;
}
p{
margin-bottom: 5px;
}
button{
padding: 1px 10px;
}
table{
width: 600px;
line-height: 24px;
text-align: center;
}
img{
margin-top:5px ;
width: 80px;
height: 80px;
}
a{
color: #000000;
}
.yc{
display: none;
}
.color{
color: red;
}
hd.js
//首屏渲染
show()
//新增
$('.add').click(function(){
if ($('.img').val()==''||$('.name').val()==''||$('.many').val()=='') {
alert('不能為空')
} else{
var obj = {
img:$('.img').val(),
name:$('.name').val(),
many:$('.many').val(),
classs:$('.class').val()
}
$.ajax({
type:"post",
url:"/addPost",
async:true,
data:obj,
success:function(res){
show()
}
});
}
$('.img').val('')
$('.name').val('')
$('.many').val('')
var str = `
<option value="冰箱" selected="selected">冰箱</option>
<option value="電腦">電腦</option>
<option value="手機">手機</option>`
$('select').html(str)
})
//渲染1
function show(){
$.ajax({
type:"get",
url:"/getContent",
success:function(res){
if (res.length==0) {
$('table').hide()
$('.button').hide()
} else{
showDom(res)
$('table').show()
$('.button').show()
}
}
});
}
//渲染2
function showDom(arr){
var str = ''
for (var i = 0; i < arr.length; i++) {
str += `
<tr>
<td>
<img src="../imgs/${arr[i].img}.jpg"/>
</td>
<td>${arr[i].name}</td>
<td>${arr[i].many}</td>
<td>${arr[i].classs}</td>
<td>
<a href="javascript:void(0)" onclick=del('${arr[i]._id}')>刪除</a> 
<a href="javascript:void(0)" onclick=xg(${JSON.stringify(arr[i])},this)>修改</a>
</td>
</tr>
`}
$('tbody').html(str)
}
//刪除
function del(myid){
var obj = {
id:myid
}
$.ajax({
type:"post",
url:"/delePost",
async:true,
data:obj,
success:function(res){
$('.button>button').eq(0).addClass('color').siblings().removeClass('color')
show()
}
});
}
//修改
function xg(obj,a){
if ($(a).html() == '修改') {
$('.img').val(obj.img)
$('.name').val(obj.name)
$('.many').val(obj.many)
$('.class').val(obj.classs)
$('.save').val(obj._id)
$(a).html('完成修改')
} else{
$(a).html('修改')
var obj = {
img:$('.img').val(),
name:$('.name').val(),
many:$('.many').val(),
classs:$('.class').val(),
id:$('.save').val()
}
$.ajax({
type:"post",
url:"/updatePost",
async:true,
data:obj,
success:function(res){
show()
$('.img').val('')
$('.name').val('')
$('.many').val('')
var str = `
<option value="冰箱" selected="selected">冰箱</option>
<option value="電腦">電腦</option>
<option value="手機">手機</option>`
$('select').html(str)
}
});
}
}
//搜尋
$('.ss').click(function(){
var obj
if ($('.names').val()==''&&$('.manys').val()=='') {
$('.ts').slideDown().delay(1000).slideUp()
} else if($('.names').val()==''&&$('.manys').val()!=''){
obj = {
many:$('.manys').val()
}
} else if($('.names').val()!=''&&$('.manys').val()==''){
obj = {
name:$('.names').val()
}
} else if($('.names').val()!=''&&$('.manys').val()!=''){
obj = {
many:$('.manys').val(),
name:$('.names').val()
}
}
$.ajax({
type:"post",
url:"/tabData",
async:true,
data:obj,
success:function(res){
if (res.length==0) {
$('table').hide()
$('.button').hide()
} else{
showDom(res)
$('table').show()
$('.button').show()
}
}
});
$('.manys').val('')
$('.names').val('')
})
//分類
$('.button>button').click(function(){
var index = $(this).index()
$(this).addClass('color').siblings().removeClass('color')
if ($(this).html()=='全部') {
show()
} else{
var obj = {
classs:$(this).html()
}
$.ajax({
type:"post",
url:"/tabData",
data:obj,
success:function(res){
if (res.length==0) {
$('table').hide()
} else{
showDom(res)
$('table').show()
}
}
});
}
})
前臺展示頁
qd.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="qd.css"/>
<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>華聯超市商品購買中心</h1>
<p>
<button type="button" class="color">首頁</button>
<button type="button">購物車</button>
</p>
<div class="box">
<div>
<ul type="none" class="ul1">
<!-- <li>
<img src="../imgs/${arr[i].img}.jpg" alt="">
<span>${arr[i].name} ${arr[i].many}</span>
<button bid="${arr[i]._id}" type="button" onclick="add()">加入購物車</button>
</li> -->
</ul>
<h1>加入成功</h1>
</div>
<ul type="none" class="ul2 yc">
<!-- <li>
<img src="../imgs/${arr[i].img}.jpg" alt="">
<span>${arr[i].name} ${arr[i].many}</span>
<button bid="${arr[i]._id}" type="button" onclick="jian()">-</button>
<input type="text" value="{arr[i].sl">
<button bid="${arr[i]._id}" type="button" onclick="jia()">+</button>
</li> -->
</ul>
</div>
</body>
<script src="qd.js" type="text/javascript" charset="utf-8"></script>
</html>
qd.css
*{
margin: 0;
padding: 0;
text-decoration: none;
outline: none;
}
body{
padding-left: 20px;
}
h1{
line-height: 60px;
}
body>p{
margin-bottom: 10px;
}
.color{
color: red;
}
.yc{
display: none;
}
.box>div>h1{
color: red;
display: none;
}
ul>li{
margin-bottom: 10px;
border: 1px solid red;
width: 500px;
height: 100px;
}
ul>li>img{
width: 90px;
height: 90px;
margin: 5px;
vertical-align: middle;
}
ul>li>span{
border: 0px;
}
.ul2>li>button{
width: 16px;
}
qd.js
//首屏渲染
show()
show1()
//tog切換
$('body>p>button').click(function(){
$(this).addClass('color').siblings().removeClass('color')
var index = $(this).index()
$('.box').children().eq(index).show().siblings().hide()
})
//首頁獲取資料
function show(){
$.ajax({
type:'get',
url:'/getContent',
success:function(res){
showDom(res)
}
})
}
//首頁渲染資料
function showDom(arr){
var str = ''
for (let i = 0; i < arr.length; i++) {
str+=
`<li>
<img src="../imgs/${arr[i].img}.jpg" alt="">
<span>${arr[i].name} ${arr[i].many}</span>
<button bname="${arr[i].name}" bid="${arr[i]._id}" type="button" onclick="add(this)">加入購物車</button>
</li>`
}
$('.ul1').html(str)
}
//首頁點選加入購物車
var sl=1
function add(a){
var name = $(a).attr('bname')
var id = $(a).attr('bid')
//查詢
$.ajax({
type:'post',
url:'/tab',
data:{
name:name
},
success:function(res){
if (res.length == 0) {
$.ajax({
type:'post',
url:'/tabData',
data:{
_id:id
},
success:function(res){
var obj = {
name:res[0].name,
many:res[0].many,
sl:sl,
img:res[0].img
}
$.ajax({
type:'post',
url:'/add',
data:obj,
success:function(res){
show1()
}
})
}
})
} else {
$.ajax({
type:'post',
url:'/tab',
data:{
name:name
},
success:function(res){
sl = res[0].sl - 0 + 1
var id = res[0]._id
$.ajax({
type:'post',
url:'/update',
data:{
id:id,
sl:sl
},
success:function(res){
show1()
}
});
}
})
}
}
});
$('.box>div>h1').slideDown(500).delay(1000).slideUp(500)
}
//購物車獲取資料
function show1(){
$.ajax({
type:'get',
url:'/content',
success:function(res){
showDom1(res)
}
});
}
//購物車渲染
function showDom1(arr){
var str = ''
for (let i = 0; i < arr.length; i++) {
str +=
`<li>
<img src="../imgs/${arr[i].img}.jpg" alt="">
<span>${arr[i].name} ${arr[i].many}</span>
<button bid="${arr[i]._id}" type="button" onclick="jian(this)">-</button>
<span>${arr[i].sl}</span>
<button bid="${arr[i]._id}" type="button" onclick="jia(this)">+</button>
</li>`
}
$('.ul2').html(str)
}
//購物車+功能
function jia(a){
var id = $(a).attr('bid')
var sl = $(a).siblings('span').eq(1).html()-0+1
$.ajax({
type:'post',
url:'/update',
data:{
id:id,
sl:sl
},
success:function(res){
show1()
}
});
}
//購物車-功能
function jian(a){
var id = $(a).attr('bid')
var sl = $(a).siblings('span').eq(1).html()-0-1
if (sl==0) {
$.ajax({
type:'post',
url:'/dele',
data:{
id:id
},
success:function(res){
show1()
}
});
} else {
$.ajax({
type:'post',
url:'/update',
data:{
id:id,
sl:sl
},
success:function(res){
show1()
}
});
}
}
後臺檔案 index.js
// 寫錄入系統的介面
var express = require('express');
var router = express.Router();
// 引入資料庫
var db = require('../modules/db.js');
console.log("db:", db);
// 引入mongodb 解決id問題
var mongodb = require('mongodb');
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({extended: false});
//cors跨域
router.use("*", function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header("Access-Control-Allow-Methods", "*");
res.header("Access-Control-Allow-Headers", "*");
next();
});
/* GET users listing. */
router.get('/', function(req, res, next) {
//res.render('index', { title: 'Express' });
res.sendFile(__dirname+'/index.html');
res.sendFile(__dirname+'/qd/qd.html');
res.sendFile(__dirname+'/hd/hd.html');
});
//新增
router.post('/addPost', urlencodedParser, function(req, res) {
var obj = req.body;
console.log("obj:", obj);
db.insert(res, "shoppingListX", obj, function(err, result, db) {
if(err) {
console.log("資料存入失敗：", err);
res.send({error: 2});
} else {
console.log("資料存入成功");
res.send(result.result);
db.close();
}
})
});
// 渲染
router.get('/getContent', function(req, res) {
var obj = req.query;
console.log("obj:", obj);
db.find(res, "shoppingListX", obj, function(err, result, db) {
if(err) {
console.log("資料查詢失敗：", err);
res.send({error: 2});
} else {
console.log("資料查詢成功");
res.send(result);
db.close();
}
})
});
// 刪除介面 delePost
router.post('/delePost', urlencodedParser, function(req, res) {
var obj = req.body;
var key = Object.keys(obj)[0];
var id = mongodb.ObjectId(obj[key]);
var data = {
_id: id
}
db.delete(res, "shoppingListX", data, function(err, result, db) {
if(err) {
console.log("資料刪除失敗：", err);
res.send({error: 2});
} else {
console.log("資料刪除成功");
res.send(result.result);
db.close();
}
})
});
// 修改
router.post("/updatePost", urlencodedParser, function(req, res) {
var data = req.body;
// console.log("data:", data);
var id = mongodb.ObjectId(data.id);
data.shopPrice = data.shopPrice - 0;
// 修改 條件 修改後的資料
var whereObj = {
_id: id
}
var updateObj = {
$set: data
}
db.update(res, "shoppingListX", whereObj, updateObj, function(err, result, db) {
if(err) {
console.log("資料修改失敗：", err);
res.send({error: 2});
} else {
console.log("資料修改成功");
res.send(result.result);
db.close();
}
})
});
// 搜尋
router.post('/tabData', urlencodedParser, function(req, res) {
var obj = req.body;
// console.log("obj:", obj);
if(obj._id){
obj._id = mongodb.ObjectId(obj._id);
}
var whereObj = {
find: obj
}
db.find(res, "shoppingListX", whereObj, function(err, result, db) {
if(err) {
console.log("資料查詢失敗：", err);
res.send({error: 2});
} else {
res.send(result);
db.close();
}
})
});
// 排序
router.post('/sortPost', urlencodedParser, function(req, res) {
var obj = req.body;
var key = Object.keys(obj)[0];
// console.log("obj:", obj)
obj[key] ? obj[key] = obj[key] - 0 : "";
var whereObj = {
sort: obj
}
db.find(res, "shoppingListX", whereObj, function(err, result, db) {
if(err) {
console.log("資料查詢失敗：", err);
res.send({error: 2});
} else {
res.send(result);
db.close();
}
})
})
//全部刪除
router.post('/alldelPost', urlencodedParser, function(req, res) {
var obj ={}
db.delete(res, "shoppingListX", obj, function(err, result, db) {
if(err) {
console.log("資料刪除失敗：", err);
res.send({error: 2});
} else {
console.log("資料刪除成功");
res.send(result.result);
db.close();
}
})
});
// 分頁
router.post('/fyData', urlencodedParser, function(req, res) {
var obj = req.body;
// console.log("obj:", obj);
var whereObj = {
limit:Number(obj.limit),
skip:Number(obj.skip)
}
console.log("whereObj::::::::::",whereObj)
db.find(res, "shoppingListX", whereObj, function(err, result, db) {
if(err) {
console.log("資料查詢失敗：", err);
res.send({error: 2});
} else {
res.send(result);
db.close();
}
})
});
//新增
router.post('/add', urlencodedParser, function(req, res) {
var obj = req.body;
console.log("obj:", obj);
db.insert(res, "shoppingListY", obj, function(err, result, db) {
if(err) {
console.log("資料存入失敗：", err);
res.send({error: 2});
} else {
console.log("資料存入成功");
res.send(result.result);
db.close();
}
})
});
// 渲染
router.get('/content', function(req, res) {
var obj = req.query;
console.log("obj:", obj);
db.find(res, "shoppingListY", obj, function(err, result, db) {
if(err) {
console.log("資料查詢失敗：", err);
res.send({error: 2});
} else {
console.log("資料查詢成功");
res.send(result);
db.close();
}
})
});
// 刪除介面 delePost
router.post('/dele', urlencodedParser, function(req, res) {
var obj = req.body;
var key = Object.keys(obj)[0];
var id = mongodb.ObjectId(obj[key]);
var data = {
_id: id
}
db.delete(res, "shoppingListY", data, function(err, result, db) {
if(err) {
console.log("資料刪除失敗：", err);
res.send({error: 2});
} else {
console.log("資料刪除成功");
res.send(result.result);
db.close();
}
})
});
// 修改
router.post("/update", urlencodedParser, function(req, res) {
var data = req.body;
// console.log("data:", data);
var id = mongodb.ObjectId(data.id);
data.shopPrice = data.shopPrice - 0;
// 修改 條件 修改後的資料
var whereObj = {
_id: id
}
var updateObj = {
$set: data
}
db.update(res, "shoppingListY", whereObj, updateObj, function(err, result, db) {
if(err) {
console.log("資料修改失敗：", err);
res.send({error: 2});
} else {
console.log("資料修改成功");
res.send(result.result);
db.close();
}
})
});
// 搜尋
router.post('/tab', urlencodedParser, function(req, res) {
var obj = req.body;
// console.log("obj:", obj);
if(obj._id){
obj._id = mongodb.ObjectId(obj._id);
}
var whereObj = {
find: obj
}
db.find(res, "shoppingListY", whereObj, function(err, result, db) {
if(err) {
console.log("資料查詢失敗：", err);
res.send({error: 2});
} else {
res.send(result);
db.close();
}
})
});
module.exports = router;