利用nodejs实现商品管理系统（二）

下面实现商品管理系统

第一步：对应的ejs与数据交换的编写格式。

商品列表界面product.ejs

<% for(var i=0;i<list.length;i++){%>

                     <tr>

                        <td><%=i+1%></td>

                        <td><img width="100" src="<%=list[i].pic%>" alt=""/></td>

                        <td><%=list[i].title%></td>

                        <td><%=list[i].price%></td>

                         <td><%=list[i].fee%></td>

                        <td class="text-center">

                            <a href="/productedit?id=<%=list[i]._id%>" class="btn btn-success">修改</a>

                            <a href="/productdelete?id=<%=list[i]._id%>" class="btn btn-danger">删除</a>

                       </td>

                    </tr>

                    <%}%>

商品编辑页面

　　　　　　　　　　　　　　<form action="/doProductEdit" method="post" enctype="multipart/form-data">

                            <ul>

                                <input type="hidden" name="_id" value="<%=list._id%>"/>

                                <input type="hidden" name="pic" value="<%=list.pic%>"/>

                                <li>  商品名称: <input type="text" name="title" value="<%=list.title%>"/></li>

                                <li>  商品图片: <input type="file" name="pic"/>

                                    <br/> <br/>

                                   　　　　 <img src="<%=list.pic%>" width="100"/>

                                    <br/> <br/>

                                </li>

                                <li>  商品价格: <input type="text" name="price" value="<%=list.price%>"/></li>

                                <li>  商品邮费: <input type="text" name="fee"  value="<%=list.fee%>"/></li>

                                <li>

                                    商品描述:

                                    <textarea name="description" id="" cols="60" rows="8"><%=list.description%></textarea>

                                </li>

                                <li>

                                    <br/>

                                    <button type="submit" class="btn btn-default">提交</button>

                                </li>

                            </ul>

                        </form>

商品增加页面productadd.ejs

　　　　　　　　　　　　　　<form action="/doProductAdd" method="post" enctype="multipart/form-data">

                            <ul>

                                <li>  商品名称: <input type="text" name="title"/></li>

                                <li>  商品图片: <input type="file" name="pic"/></li>

                                <li>  商品价格: <input type="text" name="price"/></li>

                                <li>  商品邮费: <input type="text" name="fee"/></li>

                                <li>

                                    商品描述:

                                    <textarea name="description" id="" cols="60" rows="8"></textarea>

                                </li>

                                <li>

                                    <br/>

                                    <button type="submit" class="btn btn-default">提交</button>

                                </li>

                            </ul>

                        </form>

第二步：由于商品的增删改查都要用到数据库，所以第二步应该讲数据库封装起来，接着在app.js中引用相应的模块。

新建db.js，开始判断是否连接数据库成功。

var MongoClient=require('mongodb').MongoClient;

var DbUrl='mongodb://localhost:27017/productmanage';

var ObjectID = require('mongodb').ObjectID;

function  __connectDb(callback){

    MongoClient.connect(DbUrl,function(err,db){

        if(err){

            console.log('数据库连接失败');

            return;

        }

        //增加 修改 删除

          callback(db);

    })

}

exports.ObjectID=ObjectID;

//查找数据

exports.find=function(collectionname,json,callback){

    __connectDb(function(db){

        var result=db.collection(collectionname).find(json);

        result.toArray(function(error,data){

            db.close();/*

            关闭数据库*/

            callback(error,data);/*拿到数据执行回调函数*/

        })

    })

}

//插入数据

exports.insert=function(collectionname,json,callback){

    __connectDb(function(db){

        db.collection(collectionname).insertOne(json,function(error,data){

            callback(error,data);

        })

    })

}

//更新数据

exports.update=function(collectionname,json1,json2,callback){

    __connectDb(function(db){

        db.collection(collectionname).updateOne(json1,{$set:json2},function(error,data){

            callback(error,data);

        })

    })

}

//删除数据

exports.deleteOne=function(collectionname,json,callback){

    __connectDb(function(db){

        db.collection(collectionname).deleteOne(json,function(error,data){

            callback(error,data);

        })

    })

}

第三步：编辑相应的路由

3.1商品增加路由

//商品列表

app.get('/product',function(req,res){

        DB.find('product',{},function(err,data){

            res.render('product',{

                list:data

            });

        })

})

//显示增加商品的页面

app.get('/productadd',function(req,res){

    res.render('productadd');

})

当点击增加商品时，跳转到doProductAdd路由上

<form action="/doProductAdd" method="post" enctype="multipart/form-data">

在第一篇的时候使用body-parser来接收用户密码和用户名，但是在商品增加编辑中存在图片上传问题，body-parser无法实现，所以改用multiparty模块。

先安装multiparty

npm install multiparty --save

在引入：

var multiparty = require('multiparty');

使用post获取商品增加提交的数据

app.post('/doProductAdd',function(req,res){

    //获取表单的数据 以及post过来的图片

    var form = new multiparty.Form();

    form.uploadDir='upload'   //上传图片保存的地址    upload目录必须存在

    form.parse(req, function(err, fields, files) {

        //获取提交的数据以及图片上传成功返回的图片信息
　　　　　//fields获取表单的数据  files得到图片上传成功返回的信息

        var title=fields.title[0];

        var price=fields.price[0];

        var fee=fields.fee[0];

        var description=fields.description[0];

        var pic=files.pic[0].path;
　　　　//在数据库中插入数据

        DB.insert('product',{

            title:title,

            price:price,

            fee,//效果与上面一致

            description,

            pic

        },function(err,data){

            if(!err){

                res.redirect('/product'); /*上传成功跳转到首页*/

            }

        })

    });

})

此时添加/upload路由获取图片信息，因为此时图片的地址是/upload/xxxxxxx.jpg，否则默认从public从查找资源。

app.use('/upload',express.static('upload'));

拓展：如果此时图片的地址是 /xxxxxxx.jpg，可以直接配置，注意路由!

app.use(express.static('upload'));

3.2商品编辑路由

注意：无论是商品编辑还是删除都是通过get传值来获取商品的数据库id号

 <a href="/productedit?id=<%=list[i]._id%>" class="btn btn-success">修改</a>

 <a href="/productdelete?id=<%=list[i]._id%>" class="btn btn-danger">删除</a>

app.js中

app.get('/productedit',function(req,res){

    //获取get传值 id

    var id=req.query.id;

    console.log(id);

    //去数据库查询这个id对应的数据     自增长的id 要用{"_id":new DB.ObjectID(id)

    DB.find('product',{"_id":new DB.ObjectID(id)},function(err,data){

        //console.log(data);

        res.render('productedit',{

            list:data[0]

        });

    });

})

在修改商品form表格上依然使用post来提交数据

<form action="/doProductEdit" method="post" enctype="multipart/form-data">

在编辑/doProductEdit路由的时候，如果并没有修改图片信息，此时我们需要作出判断，否则会在upload文件上存在一串非图片信息的字符串，最终返回/product界面时，没有出现并没有修改的商品图片。

最终在修改的商品信息返回到product页面

app.post('/doProductEdit',function(req,res) {

    var form = new multiparty.Form();

    form.uploadDir = 'upload'  // 上传图片保存的地址

    form.parse(req, function (err, fields, files) {

        //获取提交的数据以及图片上传成功返回的图片信息

        //console.log(fields);

        console.log(files);

        var _id = fields._id[0];

        /*修改的条件*/

        var title = fields.title[0];

        var price = fields.price[0];

        var fee = fields.fee[0];

        var description = fields.description[0];

        var originalFilename = files.pic[0].originalFilename;

        var pic = files.pic[0].path;

        if (originalFilename) {  /*修改了图片*/

            var setData = {

                title,

                price,

                fee,

                description,

                pic

            };

        } else { /*没有修改图片*/

            var setData = {

                title,

                price,

                fee,

                description

            };

            //删除生成的临时文件

            fs.unlink(pic);

        }

        DB.update('product', {"_id": new DB.ObjectID(_id)}, setData, function (err, data) {

            if (!err) {

                res.redirect('/product');

            }

        })

    });

})

3.3商品删除

app.get('/productdelete',function(req,res){

        //获取id

        var  id=req.query.id;

        DB.deleteOne('product',{"_id":new DB.ObjectID(id)},function(err){

            if(!err){

                res.redirect('/product');

            }

        })

    })

最后的最后，奉上项目的源码地址：https://github.com/xinhua6/productManage.git

巴特西

利用nodejs实现商品管理系统（二）

最新文章

热门文章