基于express和mongodb的任务管理系统

该博客介绍了如何在Windows环境下,利用Node.js、Express和MongoDB搭建一个任务管理系统。首先,详细说明了安装MongoDB和管理工具Robomongo,接着讲解了安装Node.js和初始化Express项目。在项目中,通过新增对mongodb和method-override的依赖,实现了对MongoDB的增删改查操作。博客还提到了代码实现过程中的一些问题,以及如何使用ObjectId查询文档。此外,提供了路由文件和视图文件的简单说明,包括主路由文件、tasks路由文件和视图文件(index.jade, edit.jade, new.jade)的创建。最后,提供了源代码的GitHub链接供读者下载学习。" 120498257,10560828,无约束优化:梯度下降与牛顿法解析,"['机器学习', '优化算法', '梯度下降', '牛顿法']

安装mongodb
http://www.runoob.com/mongodb/mongodb-window-install.html

windows平台下,推荐使用Robomongo工具管理mongodb数据库。

安装nodejs
http://www.runoob.com/nodejs/nodejs-install-setup.html

首先全局安装express

http://www.expressjs.com.cn/starter/generator.html

然后使用express生成器创建相关目录

express blog
cd blog

修改package.json,新增对mongodb和method-override的依赖。

"method-override": "^2.1.2",
"mongodb":">=2.2",

然后安装相关依赖

npm install

简单说明
这个小程序是参照《nodejs入门经典》这本书的例子写的,书上的代码有些bug,基本相当于重写了一遍。

编写更新和删除mongodb中的文档时,是通过mongodb自动产生的_id来查询的。mongoose可以使用findById方法进行查询。
为了加深对mongodb的学习和理解,我使用的是mongodb原生驱动,_id的值是ObjectID类型,可以用以下方法查询,具体可以查看文章最后的github源代码(tasks.js)。

var ObjectID = require('mongodb').ObjectId;
var whereJson = {_id:ObjectID(req.params.id)};

功能说明

路径HTTP方法说明
/tasksGET显示任务列表
/tasks/newGET显示新增任务表单
/tasks/editGET显示修改任务表单
/tasksPOST新增任务
/tasksPUT修改任务
/tasksDELETE删除任务

路由文件

主路由文件

在主路由文件app.js中,需要引入tasks路由文件,并配置method-override方法。

var methodOverride = require('method-override');
...
var tasks = require('./routes/tasks');
...
app.use(methodOverride('_method'));
...
app.use('/tasks', tasks);

tasks路由文件

在routes文件夹下新建tasks.js路由文件,专门负责任务管理系统部分的路由。
下面路由文件包含了对mongodb的增删改减操作。

var express = require('express');
var router = express.Router();
//mongodb 连接设置
var MongoClient = require('mongodb').MongoClient;
var ObjectID = require('mongodb').ObjectId;
var DB_CONN_STR = 'mongodb://localhost:27017/health';

//任务列表
router.get('/', function(req, res) {
    MongoClient.connect(DB_CONN_STR, function(err, db) {
        //连接到表
        var collection = db.collection('todo_development');
        //查询数据
        var whereStr = {};
        collection.find(whereStr).toArray(function(err, result) {
            if(err)
            {
                res.send('select error');
            }
            else{
                res.render('tasks/index',{title:"Todos index view",task_list:result});
            }
        });
        db.close();
    });
});

//显示添加任务表单
router.get('/new',function (req,res) {
    res.render('tasks/new',{title:"New task"});
});

//添加任务
router.post('/',function (req,res) {
    var task = req.body.task;
    MongoClient.connect(DB_CONN_STR, function(err, db) {
        //连接到表
        var collection = db.collection('todo_development');
        var data = {task:task};
        collection.insert(data,function (err,result) {
            if(err){
                res.send('insert error');
            }
            else{
                res.redirect('/tasks');
            }
        });
        db.close();
    });
});

//显示编辑任务表单
router.get('/edit/:id',function (req,res) {
    MongoClient.connect(DB_CONN_STR, function(err, db) {
        //连接到表
        var collection = db.collection('todo_development');
        //查询数据
        var whereJson = {_id:ObjectID(req.params.id)};
        collection.findOne(whereJson,function(err, result) {
            console.log(result);
            if(err)
            {
                res.send('select error');
            }
            else{
                res.render('tasks/edit',{title:"编辑任务",task:result});
            }
        });
        db.close();
    });
})

//修改任务
router.put('/:id',function (req,res) {
    var id = req.params.id;
    var task = req.body.task;
    MongoClient.connect(DB_CONN_STR, function(err, db) {
        //连接到表
        var collection = db.collection('todo_development');
        //查询数据
        var whereJson = {_id:ObjectID(req.params.id)};
        //修改数据
        var dataJson = {$set:{task:task}};
        collection.updateOne(whereJson,dataJson,function(err, result) {
            console.log(result);
            if(err)
            {
                res.send('update error');
            }
            else{
                res.redirect('/tasks');
            }
        });
        db.close();
    });
});

//删除任务
router.delete('/:id',function (req,res) {
    var id = req.params.id;
    MongoClient.connect(DB_CONN_STR, function(err, db) {
        //连接到表
        var collection = db.collection('todo_development');
        //查询数据
        var whereJson = {_id:ObjectID(req.params.id)};
        collection.deleteOne(whereJson,function(err, result) {
            console.log(result);
            if(err)
            {
                res.send('delete error');
            }
            else{
                res.redirect('/tasks');
            }
        });
        db.close();
    });
})

module.exports = router;

视图文件

在view目录下创建tasks目录

index.jade

extends ../layout

block content
    h1 任务列表
    hr
    if task_list.length
        table.table.table-bordered
            tr
                th 任务
                th 编辑
                th 删除
            each task in task_list
                tr
                    td #{task.task}
                    td
                        a.btn.btn-primary(href='/tasks/edit/#{task._id}') 编辑
                    td
                        form(method='post',action='/tasks/#{task._id}?_method=DELETE')
                            button.btn(type='submit') 删除
    else
        p 没有任务,真轻松~
    hr
    p
        a(href='/tasks/new') 添加任务

edit.jade

extends ../layout

block content
    form(method='post',action='/tasks/#{task._id}?_method=PUT')
        fieldset
            legend
                a(href='/tasks') 任务列表
                | /修改任务
        div.clearfix
            label 修改一下你的任务吧
            div.input
                input(name='task',class='form-control',style='width:400px;' value="#{task.task}")
                input(type='hidden',name='_method',value='PUT')
        div.actions(style='margin-top:20px;')
            input(type='submit',value='确 定',class='btn btn-primary')
            span   
            button(type='reset',class='btn') 重 置

new.jade

extends ../layout

block content
    form(method='post',action='/tasks')
        fieldset
            legend
                a(href='/tasks') 任务列表
                | /添加任务
        div.clearfix
            label 填写一个任务吧
            div.input
                input(name='task',class='form-control',style='width:400px;')
        div.actions(style='margin-top:20px;')
            input(type='submit',value='确 定',class='btn btn-primary')
            span   
            button(type='reset',class='btn') 重 置       

源代码下载:
https://github.com/qianshou/TaskManagement

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值