封裝模組實現商品增刪改查

Rayshaan發表於2021-01-03
封裝

文章目錄

01.前端

<input type="text" placeholder="請輸入商品名字" class="proname">
<input type="text" placeholder="請輸入商品價格" class="price">
<button class="add">增加商品</button>
<input type="text" placeholder="請輸入查詢的商品" class='findpro'>
<button class="find">查詢商品</button>
<table>
    <thead>
        <tr>
            <td>商品名字</td>
            <td>商品價格</td>
            <td>編輯商品</td>
            <td>刪除商品</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>華為手機</td>
            <td>5600</td>
            <td onclick="update(this)">編輯</td>
            <td onclick="del(this)">刪除</td>
        </tr>
    </tbody>
</table>

在這裡插入圖片描述

02.封裝的模組

const MongoClient=require('mongodb').MongoClient;
const url='mongodb://localhost:27017';

// 把資料庫連線的操作，封裝起來。
function connect(callback){
    MongoClient.connect(url,(err,db)=>{
        if(err) throw err;
        // 說明連線資料庫成功了 db代表連線成功以後返回的資料
        callback(db);
    })
}
//增加
module.exports.insert=(dbname,col,myobj,callback)=>{
    connect(db=>{
        let dbo=db.db(dbname);
        myobj=myobj instanceof Array?myobj:[myobj];
        dbo.collection(col).insertMany(myobj,(err,result)=>{
            if(err) throw err;
            console.log("資料新增成功");
            db.close();
            callback(result);
        })
    });
}
// 查詢封裝的時候，考慮是否需要分頁是否需要排序
//需要書寫函式引數的預設值，因為條件可能沒有
module.exports.find=(dbname,col,callback,myobj={},mysort={},myskip=0,mylimit=0)=>{
    connect(db=>{
        let dbo=db.db(dbname);
        console.log(myobj);
        // sort排序
	    // skip跳過多少條資料
	    // limit()限制取資料的數量
	    dbo.collection(col).find(myobj).sort(mysort).skip(myskip).limit(mylimit).toArray((err,result)=>{
            if(err) throw err;
            console.log("資料查詢成功");
            db.close();
            callback(result);
        });
    });
}
//更新
module.exports.update=(dbname,col,myobj,updateobj,callback)=>{
    connect(db=>{
        let dbo=db.db(dbname);
        let updatestr={$set:updateobj};
        dbo.collection(col).updateOne(myobj,updatestr,(err,res)=>{
            if(err) throw err;
            console.log("資料更新成功");
            db.close();
            callback(res);
        });
    });
}
//刪除
module.exports.delete=(dbname,col,myobj,callback)=>{
    connect(db=>{
        let dbo=db.db(dbname);
        dbo.collection(col).deleteOne(myobj,(err,obj)=>{
            console.log("資料刪除成功");
            db.close();
            callback(obj);
        });
    });
}

03.後臺和資料庫

後天：

const express=require('express');
//引入封裝的模組
const dao=require('./model/dao.js');
const app=express();

//呈遞靜態資源
app.use('/',express.static('./www'));
app.use('/public',express.static('./public/'));

app.listen('8989');

初始資料庫：
在這裡插入圖片描述

04.新增

前端ajax：

$(".add").click(()=>{
    $.ajax({
    	//請求後臺指定的藉口
        url:'http://localhost:8989/add',
        method:'get',
        //發生新增的資料
        data:{
            proname:$(".proname").val(),
            proprice:$(".price").val()
        },
        //成功了就新增一行
        success(data){
            console.log(data);
            $("tbody").append(`
                <tr>
                    <td>${data.ops[0].proname}</td>
                    <td>${data.ops[0].proprice}</td>
                    <td οnclick="update(this)">編輯</td>
                    <td οnclick="del(this)">刪除</td>
                </tr>
            `);
        }
    });
});

後臺：

app.get('/add',(req,res)=>{
    let obj={
        proname:req.query.proname,
        proprice:req.query.proprice
    }
    dao.insert('product','phone',obj,reslut=>{
        res.send(reslut);
    });
});

增加小米手機：
在這裡插入圖片描述

在這裡插入圖片描述
在這裡插入圖片描述

05.刪除

前端ajax：

function del(a){
    $.ajax({
        url:'http://localhost:8989/del',
        method:'get',
        data:{
        	//獲取到商品要刪除的名字和價格
            proname:$(a).siblings().eq(0).html(),
            proprice:$(a).siblings().eq(1).html()
        },
        //成功移除這一行
        success(res){
            console.log('資料刪除成功');
            //拿到父元素的index
            $("tbody tr").eq($(a).parent().index()).remove();
        }
    });
}

後臺：

app.get("/del",(req,res)=>{
	//拿到藥刪除的名字和價格
    let pro={
        proname:req.query.proname,
        proprice:req.query.proprice
    }
    dao.delete('product','phone',pro,data=>{
        res.send(data);
    });
});

刪除華為手機：
在這裡插入圖片描述

在這裡插入圖片描述
在這裡插入圖片描述

06.更新

前端ajax:

function update(b){
	//彈出修改框
    let newprice=prompt('請輸入新的價格');
    //輸入為空或者點選取消就不執行
    if(newprice!=''&&newprice!=null){
        $.ajax({
            url:'http://localhost:8989/update',
            method:'get',
            data:{
                proname:$(b).siblings().eq(0).html(),
                proprice:$(b).siblings().eq(1).html(),
                //要修改的值
                newprice:newprice
            },
            success(data){
                console.log('資料更新成功');
                //修改值
                $(b).prev().html(newprice);
            }
        });
    }
}

後臺：

app.get('/update',(req,res)=>{
	//原資料
    let obj={
        proname:req.query.proname,
        proprice:req.query.proprice
    }
    //新資料
    let updateobj={
        proprice:req.query.newprice
    }
    dao.update('product','phone',obj,updateobj,data=>{
        res.send(data);
    });
});

將小米手機的價格修改為10000
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

07.查詢

前端ajax：

$(".find").click(()=>{
    $.ajax({
        url:'http://localhost:8989/find',
        method:'get',
        //查詢條件
        data:{
            proname:$(".findpro").val()
        },
        success(data){
            console.log('資料查詢成功');
            //查詢到幾個資料就新增幾行
            for(let i in data){
                $("tbody").append(`
                    <tr>
                        <td>${data[i].proname}</td>
                        <td>${data[i].proprice}</td>
                        <td οnclick="update(this)">編輯</td>
                        <td οnclick="del(this)">刪除</td>
                    </tr>
                `);
            }
        }
    });
});

後臺：

app.get('/find',(req,res)=>{
    let obj={
        proname:req.query.proname
    }
    dao.find('product','phone',data=>{
        res.send(data);
    },obj,{},0,10);
})

資料庫：
在這裡插入圖片描述
查詢蘋果手機：
在這裡插入圖片描述

在這裡插入圖片描述

08.利用cookie驗證是否登陸過

前端:

<div id="box">
    <h1>LOGIN</h1>
    <div id="inputBox">
        <div class="inputText">
            <i class="fa fa-user-o"></i>
            <input type="text" placeholder="Username" name="username">
        </div>
        <div class="inputText">
            <i class="fa fa-lock"></i>
            <input type="password" placeholder="Password" name='password'>
        </div>
        <input type="submit" id="login" value='登陸'>
    </div>
</div>

在這裡插入圖片描述

後臺：

const express=require('express');
const app=express();
// 引入處理cookie的包
var cookieParser=require('cookie-parser');
// 配置app可以使用cookie
app.use(cookieParser());

app.use('/',express.static('./www/'));
app.use('/form',express.static('./www/form.html'));
app.use('/public',express.static('./public/'));

app.get('/login',(req,res)=>{
	//設定cookie的名為login，值為使用者名稱
    res.cookie('login',req.query.username,{maxAge:86400000});
    res.send();
});


app.get('/rayshaan',(req,res)=>{
    if(req.cookies.login){
    	//如果cookie存在就傳送給前端
		res.send(`cookie:${req.cookies.login}`);
	}else{
		res.send('cookie不存在');
    } 
});


app.listen('8989');

前端ajax：

//每次載入網頁根據cookie判斷是否登陸過，登陸過就跳轉到其他頁面
$.ajax({
     url:'http://localhost:8989/rayshaan',
     success:function(res){
     	//輸出cookie
     	console.log(res);
     	//當cookie存在時就跳轉
        if(res!=''){
            //location.href='http://localhost:8989/form';
        }
     }
 });
 //第一次登陸的時候寫入cookie
 $("#login").click(()=>{
     $.ajax({
         url:'http://localhost:8989/login',
         method:'get',
         data:{
             username:$("input[type=text]").val(),
             password:$("input[type=password]").val()
         },
         success(data){
             console.log(data);
         }
     });
 });

第一次登陸寫入cookie(值為rayshaan)：
在這裡插入圖片描述
重新整理：
在這裡插入圖片描述
在這裡插入圖片描述
瀏覽器中檢視cookie:
在這裡插入圖片描述

相關文章