[nodejs,mongodb,angularjs2]我的便利贴-web应用练习

1.目的：学习nodejs连接使用mongodb,用angularjs2展示数据
2.使用技术：
数据库: mongodb
后端数据获取: nodejs
前端数据展示: angularjs2
3.应用:
纯mongodb CURD操作： http://127.0.0.1:3000/mongodb/
便利贴应用：http://127.0.0.1:3000/
4.运行方法：
1) 安装有nodejs,mongodb
2) npm install supervisor -g
3) npm install
4) npm start
5.便利贴画面样式 参照http://jingyan.baidu.com/article/e75057f287c8abebc91a89d7.html
copyright:WangXinsheng
cnblogs.com/wangxinsheng

============================

http://127.0.0.1:3000/：

 

http://127.0.0.1:3000/mongodb/:

核心代码：

1.mongodb操作用,使用mongodb驱动[nodejs]：

// insert method
var insertDocuments = function(db,data,col,callback) {
    // Get the documents collection
    var collection = db.collection(col);
    // Insert some documents
    collection.insertMany([data], function(err, result) {
        assert.equal(err, null);
        callback(result);
    });
}
// find documents
var findDocuments = function(db,col,callback,filterJson={}) {
    // Get the documents collection
    var collection = db.collection(col);
    // Find some documents
    collection.find(filterJson).toArray(function(err, docs) {
        assert.equal(err, null);
        docs.sort(function(a,b){return b.time.replace(/-/g,'') - a.time.replace(/-/g,'');});
        callback(docs);
    });
}
// remove docs
var removeDocument = function(db,removeJson,col,callback) {
    // Get the documents collection
    var collection = db.collection(col);
    // or use methode: remove
    collection.deleteOne(removeJson, function(err, result) {
        assert.equal(err, null);
        callback(result);
    }); 
}
// update docs
var updateDocument = function(db,updateJson,setJson,col,callback) {
    // Get the documents collection
    var collection = db.collection(col);
    // Update document
    collection.updateMany(updateJson
    , { $set: setJson }, function(err, result) {
        assert.equal(err, null);
        callback(result);
    }); 
}
/*
note opp
 */
router.get('/getAllNote',function(req, res, next) {
    // Use connect method to connect to the server
    MongoClient.connect(url,function(err, db) {
        assert.equal(null, err);
        findDocuments(db,'note',function(allDocs) {
            db.close();
            res.json(allDocs);
        });
    });
});

router.post('/getNote',function(req, res, next) {
    // Use connect method to connect to the server
    MongoClient.connect(url,function(err, db) {
        assert.equal(null, err);
        let filterJson = {'_id':new ObjectID(req.body._id)};
        findDocuments(db,'note',function(allDocs) {
            db.close();
            res.json(allDocs);
        },filterJson);
    });
});

router.post('/addNote',function(req, res, next) {
    // Use connect method to connect to the server
    MongoClient.connect(url, function(err, db) {
        insertDocuments(db,req.body,'note',function(result) {
            db.close();
            res.json(result);
        });
    });
});

router.post('/delNote',function(req, res, next) {
    // Use connect method to connect to the server
    MongoClient.connect(url, function(err, db) {
        let removeJson = {'_id': new ObjectID(req.body._id)};
        removeDocument(db,removeJson,'note',function(result) {
            db.close();
            res.json(result);
        });
    });
});

router.post('/editNote',function(req, res, next) {
    // Use connect method to connect to the server
    MongoClient.connect(url, function(err, db) {
        let updateJson = {'_id':new ObjectID(req.body._id)};
        let setJson = {'time':req.body.time,'content':req.body.content,'name':req.body.name,'sts':req.body.sts};
        updateDocument(db, updateJson, setJson,'note',function(result) {
            db.close();
            res.json(result);
        });
    });
});

2.模板代码[略，详见附件]：

note.jade

noteDetail.html

noteList.html

noteShow.html

3.angularjs2 服务代码：

import { Injectable } from '@angular/core';
import {Http,Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';

@Injectable()
export class noteService {
  constructor(private http: Http) {
  }
  getAllNote():Promise<any[]> {
    return this.http.get('/mongodb/getAllNote').toPromise().then(res=>
      JSON.parse(res.text()) as any[]
    ).catch(this.handleError);
  }
  getNote(noteId:string):Promise<any[]> {
    return this.http.post('/mongodb/getNote',{_id:noteId}).toPromise().then(res=>
      JSON.parse(res.text()) as any[]
    ).catch(this.handleError);
  }
  addNote(note:any):Promise<any[]> {
    return this.http.post('/mongodb/addNote',note).toPromise().then(res=>
      JSON.parse(res.text()) as any
    ).catch(this.handleError);
  }
  delNote(note:any):Promise<any[]> {
    return this.http.post('/mongodb/delNote',note).toPromise().then(res=>
      JSON.parse(res.text()) as any
    ).catch(this.handleError);
  }
  editNote(note:any):Promise<any[]> {
    return this.http.post('/mongodb/editNote',note).toPromise().then(res=>
      JSON.parse(res.text()) as any
    ).catch(this.handleError);
  }

  private handleError (error: Response | any) {
    console.error(error);
    return { };
  }
}

4.angularjs2 列表显示代码：

import {Component, OnInit, ViewChild, Renderer, ElementRef, AfterViewInit, animate, trigger,state,style,transition} from '@angular/core';
import {Http,Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import { noteService } from './note.service';
import { Router,ActivatedRoute, Params }  from '@angular/router';

@Component({
  selector: 'noteList',
  templateUrl: '/noteList.html',
  styleUrls: ['stylesheets/noteList.css']
})
export class AppListComponent  implements OnInit {
    notes:any[] = [];
    constructor(private noteService: noteService,private router: Router,private route: ActivatedRoute) {
    }
    ngOnInit(){
        this.noteService.getAllNote().then(notes => this.notes=notes);
    }
  doEdit(editNote:any){
    this.router.navigate(['/noteEdit', JSON.stringify(editNote)]);
  }
  doDel(delNote:any){
    this.noteService.delNote(delNote).then(result => {
      this.noteService.getAllNote().then(notes => this.notes=notes);
    });
  }
  doShow(noteId:string){
    this.router.navigate(['/noteShow', noteId]);
  }
}

5.添加编辑显示代码[略，详见附件]：

noteAddForm.component.ts [添加与修改]

noteShow.component.ts [显示详细]

完整源码下载：http://download.csdn.net/detail/wangxsh42/9742804