封装模块实现商品增删改查

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: