express+jade+bootstrap+mongdb simple CRUD test

1:当前环境

y@y:~$ node --version && express -V && mongo --version

v0.12.2

4.9.0

MongoDB shell version: 2.4.9

y@y:~$ 

2:新建工程目录

y@y:express-test$ express demo01

y@y:express-test$ cd demo01 && npm install
使用bower下载bootstrap:
y@y:public$ bower install bootstrap

在package.json中加入mongodb依赖:

{

  "name": "demo01",

  "version": "0.0.0",

  "private": true,

  "scripts": {

    "start": "node ./bin/www"

  },

  "dependencies": {

    "express": "~4.9.0",

    "body-parser": "~1.8.1",

    "cookie-parser": "~1.3.3",

    "morgan": "~1.3.0",

    "serve-favicon": "~2.1.3",

    "debug": "~2.0.0",

    "jade": "~1.6.0",

    "mongodb":  "~2.0.33",

    "monk": "~1.0.1"

  }

}

再次执行:npm install

3:工程代码结构

express+jade+bootstrap+mongdb simple CRUD test

(1)app.js

// 加载依赖库

var express = require('express');

var path = require('path');

var favicon = require('serve-favicon');

var logger = require('morgan');

var cookieParser = require('cookie-parser');

var bodyParser = require('body-parser');



//mongodb config

//var mongo = require('mongodb');

var monk = require('monk');

var db = monk('localhost:27017/test');





// 加载路由控制

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

var users = require('./routes/users');



// 创建项目实例

var app = express();



// 定义jade模板引擎和模板文件位置

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'jade');



// 定义网站图标

//app.use(favicon(__dirname + '/public/favicon.ico'));



// 定义日志和输出级别

app.use(logger('dev'));



// 定义数据解析器

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));



// 定义cookie解析器

app.use(cookieParser());



// 定义静态文件目录

app.use(express.static(path.join(__dirname, 'public')));



//让db访问路由

app.use(function(req,res,next){

    req.db = db;

    next();

});



// 匹配路径和路由

app.use('/', routes);

app.use('/user', users);





// 404错误处理

app.use(function(req, res, next) {

    var err = new Error('Not Found');

    err.status = 404;

    next(err);

});





// 开发环境,500错误处理和错误堆栈跟踪

if (app.get('env') === 'development') {

    app.use(function(err, req, res, next) {

        res.status(err.status || 500);

        res.render('error', {

            message: err.message,

            error: err

        });

    });

}



// 生产环境,500错误处理

app.use(function(err, req, res, next) {

    res.status(err.status || 500);

    res.render('error', {

        message: err.message,

        error: {}

    });

});



// 输出模型app

module.exports = app;

(2)路由users.js

var express = require('express');

var router = express.Router();



/**

 * 用户列表

 * http://127.0.0.1:3000/user/list

 */

router.get('/list', function(req, res) {

  var db = req.db;



  db.get('user').find({},{},function(err,docs){

    if(err){

      errHandler(res,err);

    }else{

      res.render('users/list',{

        title: '用户列表',

        userlist: docs

      });

    }

  });

});



/**

 * 添加新用户操作界面

 * http://127.0.0.1:3000/user/add

 */

router.get('/add', function(req, res) {

  res.render('users/add');

});



/**

 * 修改用户信息界面

 */

router.get('/edit/:id', function(req,res){

  var db = req.db;

  db.get('user').findOne({_id:req.params.id},{},function(err,doc){

    if(err){

      errHandler(res,err);

    }else{

      res.render('users/edit', {user: doc});

    }

  });

});



/**

 * 修改用户信息

 */

router.post('/update', function(req,res){

  var db = req.db;



  var _id = req.body._id;

  var name = req.body.name;

  var email = req.body.email;



  db.get('user').updateById(_id,

      {'name':name,'email':email},

      function(err,doc){

        if(err){

          errHandler(res,err);

        }else{

          res.redirect('list');

        }

      });

});



/**

 * 保存新添加的用户信息

 */

router.post('/save', function(req,res){

  var db = req.db;



  var name = req.body.name;

  var email = req.body.email;



  db.get('user').insert(

      {

        'name': name,

        'email': email

      },

      function(err,doc){

        if(err){

          errHandler(res,err);

        }else{

          res.redirect('list');

        }

      }

  );

});



/**

 * 根据_id删除

 */

router.get('/delete/:id', function(req,res){

  var db = req.db;



  db.get('user').remove({_id:req.params.id},function(err,doc){

    if(err){

      errHandler(res,err);

    }else{

      res.render('info',{info:'删除成功!',url:'http://127.0.0.1:3000/user/list'});

    }

  });

});



/**

 *  错误处理

 * @param res

 * @param err

 */

function errHandler(res,err){

  res.status(err.status || 500);

  res.render('error', {

    message: err.message,

    error: err

  });

};





module.exports = router;

(3)users/list.jade

extends ../layout



block content

   div.container

      h3.text-center.text-primary 用户列表

      hr

      a.btn.btn-primary.btn-sm(href='add') 增加

      table.table.table-bordered.table-condensed.table-hover

         thead

            tr.bg-info

               th.text-center.col-xs-4 用户名

               th.text-center.col-xs-5 邮箱

               th.text-center.col-xs-3 操作

         tbody

            each user, i in userlist

               tr.text-center

                  td= user.name

                  td= user.email

                  td

                     a.btn.btn-danger.btn-sm.margin-left(href='delete/'+user._id) 删除

                     a.btn.btn-warning.btn-sm.margin-left(href='edit/'+user._id) 修改

(4)users/add.jade

extends ../layout



block content

    div.container

        h3.text-center.text-primary 添加用户

        hr

        form(name="addUserForm",method="post",action="/user/save")

            div.form-group

                label(for='name') 用户名

                input#name.form-control(name='name',placeholder='用户名')

            div.form-group

                label(for='email') 邮箱

                input#email.form-control(name='email',type='email',placeholder='邮箱地址')

            div.text-center

                button.btn.btn-primary.margin-right(type='submit') 保存

                button.btn.btn-default.margin-left(type='reset') 重置

(5)users/edit.jade

extends ../layout

block content

    div.container

        h3.text-center.text-primary 修改用户信息

        hr

        form(name="editUserForm",method="post",action="/user/update")

            input(type='hidden',name='_id',value=user._id)

            div.form-group

                label(for='name') 用户名

                input#name.form-control(name='name',placeholder='用户名', value=user.name)

            div.form-group

                label(for='email') 邮箱

                input#email.form-control(name='email',type='email',placeholder='邮箱地址', value=user.email)

            div.text-center

                button.btn.btn-primary.margin-right(type='submit') 保存

                button.btn.btn-default.margin-left(type='reset') 重置

(6)info.jade

extends layout

block content

   div.container.text-center

      h1.text-warning=info

      a.btn.btn-primary(href=url) 返回

 

 

 



 

你可能感兴趣的:(bootstrap)