Express 路由模块化

我们在使用Express的时候,有可能会在app.js中写入大量的关于路由代码,如下:

    //安装express

    //安装ejs


    //https://docs.mongodb.com/getting-started/node/query/

    //图片上传插件的使用

    /*
     1.npm install multiparty


     2.var multiparty = require('multiparty');



     3.上传图片的地方

     var form = new multiparty.Form();

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

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

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

     });

     4.html页面form 表单要加入 enctype="multipart/form-data"



     * */

    var express=require('express');

    var app=new express();  /*实例化*/
    var md5=require('md5-node'); /*md5加密*/
    //获取post

    var multiparty = require('multiparty');  /*图片上传模块  即可以获取form表单的数据 也可以实现上传图片*/


    var  fs=require('fs');
    //数据库操作
    var DB=require('./modules/db.js');

    //保存用户信息
    var session = require("express-session");
    //配置中间件  固定格式
    app.use(session({
        secret: 'keyboard cat',
        resave: false,
        saveUninitialized: true,
        cookie: {
            maxAge:1000*60*30
        },
        rolling:true
    }))


    //使用ejs模板引擎   默认找views这个目录
    app.set('view engine','ejs');

    //配置public目录为我们的静态资源目录
    app.use(express.static('public'));

    //   upload/Aj8HIYV_EqbkNdCNwkYJiL33.jpg

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


    //ejs中 设置全局数据   所有的页面都可以使用
    //app.locals['userinfo']='1213'
    //app.locals['userinfo']='111111';
    //自定义中间件  判断登录状态

    //app.use(function(req,res,next){
    //    //console.log(req.url);
    //    //next();
    //    if(req.url=='/login' || req.url=='/doLogin'){
    //        next();
    //
    //    }else{
    //
    //        if(req.session.userinfo&&req.session.userinfo.username!=''){   /*判断有没有登录*/
    //
    //            app.locals['userinfo']=req.session.userinfo;   /*配置全局变量  可以在任何模板里面使用*/
    //            next();
    //        }else{
    //            res.redirect('/login')
    //        }
    //    }
    //
    //})

    app.get('/',function(req,res){
        res.send('index');
    })

    //登录
    app.get('/login',function(req,res){
        //res.send('login');
        res.render('login');

    })
    //获取登录提交的数据
    app.post('/doLogin',function(req,res){
        //res.send('login');
        //console.log(req.body);    /*获取post提交的数据*/

        //req.body ={ username: 'admin', password: '123456' }


        var username=req.body.username;
        var password=md5(req.body.password);  /*要对用户输入的密码加密*/

        //1.获取数据
        //2.连接数据库查询数据
        DB.find('user',{
            username:username,
            password:password
        },function(err,data){
            if(data.length>0){
                console.log('登录成功');
                //保存用户信息
                req.session.userinfo=data[0];
                res.redirect('/product');  /*登录成功跳转到商品列表*/
            }else{
                //console.log('登录失败');
                res.send("");
            }
        })



    })


    //商品列表
    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');

    })

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


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

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

        var form = new multiparty.Form();

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

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

            //获取提交的数据以及图片上传成功返回的图片信息
            //
            //console.log(fields);  /*获取表单的数据*/
            //
            //console.log(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;
            //console.log(pic);

            DB.insert('product',{
                title:title,
                price:price,
                fee,
                description,
                pic

            },function(err,data){
                if(!err){
                    res.redirect('/product'); /*上传成功跳转到首页*/
                }

            })




        });


    })

    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]
            });
        });


    })

    //执行修改的路由
    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');
                }

            })



        });



    })
    //删除商品
    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');
            }

        })
        //res.send('productdelete');



    })

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


        //销毁session

        req.session.destroy(function(err){

            if(err){
                console.log(err);
            }else{
                res.redirect('/login');
            }
        })
    })


    //删除数据
    app.get('/delete',function(req,res){

        DB.deleteOne('product',{"title":"iphone4"},function(error,data){
            if(!error){

                res.send('删除数据成功');
            }
        })
    })

    app.listen(3004,'127.0.0.1');

这样会使得我们的app.js难以维护,也不利于多人合作编码,所以我们需要对我们的项目进行路由模块化。

我们先简化我们的代码,去掉一些复杂的逻辑,直接写一个简单的路由模块化的demo。

首先我们先写一个app.js:

    /**
     * Created by c on 2018/4/5.
     */

    var express = require('express');


    var app = new express();  /*实例化*/

    app.get('/',function(req,res){
        res.send('index');
    });

    app.listen(3004,'127.0.0.1');

只是简单的引入express,然后我们访问以下看看能否运行:
Express 路由模块化_第1张图片

接下来我们需要把我们之前关于路由的代码放到routes文件夹中,我们创建一个routes文件夹:
这里写图片描述

然后我们在routes文件夹下面创建admin文件夹、user文件夹,用来区分项目中不同角色的操作,把admin操作的路由放在admin文件夹下,把普通user操作的路由放在user文件夹下。
这里写图片描述

然后我们在admin文件夹下创建一个login.js作为管理员登录的操作:

    /**
     * Created by c on 2018/4/5.
     */
    var express = require('express');

    var router = express.Router();   /*可使用 express.Router 类创建模块化、可挂载的路由句柄*/

    router.get('/',function(req,res){
        res.send('登录页面');

    });

    //处理登录的业务逻辑
    router.post('/doLogin',function(req,res){
        res.send('admin user');

    });

    module.exports = router;   /*暴露这个 router模块*/

创建一个product.js,是管理员对商品的增删改查的操作:

    /**
     * Created by c on 2018/4/5.
     */

    var express = require('express');

    var router = express.Router();   /*可使用 express.Router 类创建模块化、可挂载的路由句柄*/

    router.get('/',function(req,res){
        res.send('显示商品首页');

    });
    //处理登录的业务逻辑
    router.get('/add',function(req,res){
        res.send('显示商品 增加');

    });
    router.get('/edit',function(req,res){
        res.send('显示商品 修改');

    });
    router.get('/delete',function(req,res){
        res.send('显示商品 删除');

    });

    module.exports = router;   /*暴露这个 router模块*/

在user文件夹下面我们同理也可以加入user操作的路由js文件,我们这里就只针对admin进行演示。

然后我们在routes文件夹下创建一个admin.js,用来管理admin文件下的所有路由:

Express 路由模块化_第2张图片

    /**
     * Created by c on 2018/4/5.
     */
    var express = require('express');

    var router = express.Router();   /*可使用 express.Router 类创建模块化、可挂载的路由句柄*/
    //后台的路由  所有的后台处理都要经过这里

    var login = require('./admin/login.js');
    var product = require('./admin/product.js');

    //配置路由
    router.use('/login',login);
    router.use('/product',product);


    module.exports = router;   /*暴露这个 router模块*/

通过express.Router()类创建模块化、可挂载的路由句柄。然后我们把admin下面的文件引入,然后对他们进行路由配置。

然后我们在routes文件夹下创建一个index.js:
Express 路由模块化_第3张图片

    /**
     * Created by c on 2018/4/5.
     */

    var express = require('express');

    var router = express.Router();   /*可使用 express.Router 类创建模块化、可挂载的路由句柄*/

    router.get('/',function(req,res){
        res.send('index');

    });


    router.get('/product',function(req,res){
        res.send('product页面');

    });

    module.exports = router;   /*暴露这个 router模块*/

我们对index页面和product页面的路由配置在index.js

然后我们就可以继续改造我们的app.js:

    /**
     * Created by c on 2018/4/5.
     */


    var express = require('express');

    //引入模块
    var admin =require('./routes/admin.js');

    var index =require('./routes/index.js');

    var app = new express();  /*实例化*/



    //admin
    //admin/user

    app.use('/',index);

    /*
     /admin/login

     /admin/user

     * */

    app.use('/admin',admin);

    app.listen(3004,'127.0.0.1');

我们在app.js中引入routes下的admin.js和index.js。然后我们使用app.use('/',index);配置路由,当url满足’/’的时候,就会去找index.js下面的路由继续匹配。
比如我们直接输入:http://127.0.0.1:3004/的时候如下:

Express 路由模块化_第4张图片

当我们输入:http://127.0.0.1:3004/product的时候,它先会匹配到’/’,然后通过app.use('/',index);找到’./routes/index.js’文件,然后在index.js中配置了’/product’,所以最后浏览器就可以看到:
Express 路由模块化_第5张图片

然后我们还配置了app.use('/admin',admin);,当我们输入http://127.0.0.1:3004/admin/login的时候,它首先会匹配到’/admin’,然后去找到我们的’./routes/admin.js’文件,然后在admin.js文件中配置了’/login’,所以最后在浏览器中就可以看到:

Express 路由模块化_第6张图片

这样我们对Express路由模块化的改造就完成了。

你可能感兴趣的:(Node.js,Express,Express)