zoukankan      html  css  js  c++  java
  • 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:工程代码结构

    (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) 返回


  • 相关阅读:
    Docker For Windows | Setting Up Docker On Windows
    10款游戏的设计分析
    游戏中的沉浸(Flow in Games)
    游戏中运用了人工智能、机器学习等智能算法的思考
    虚幻4的智能指针
    linux下查看已安装的软件与卸载
    Centos7.2下安装mysql5.7,使用rpm包安装
    VMware 安装 CentOS7
    并发之痛 Thread,Goroutine,Actor
    Creating and using a blendspace in c++
  • 原文地址:https://www.cnblogs.com/yshyee/p/4593900.html
Copyright © 2011-2022 走看看