前言
Nodejs基于Javascript，MongoDB腳步同樣也是基于Javascript。而且他們的數據存儲格式都是JSON，這就是為什么要把他們放在一起的原因了。如果程序前后端能直接處理JSON，我想數據處理過程又可以極大的減化了，代碼量又將低少1/5。多么的興奮啊！讓我們來動手驗證一下想法吧。
本文重點介紹web前端通過JQuery發起POST提交JSON數據，通過Mongoose直接插入或更新到MongoDB。
工程目錄沿用nodejs-demo，增加/mongoose路徑及對應文件。
文章目錄
1. 配置Mongoose
增加mongoose的類庫
cd d:/workspace/project/nodejs-demonpm install mongooseD:/workspace/project/nodejs-demo/node_modules/mongoose/node_modules/mongodb/node_moduC:/Program Files (x86)/MSBuild/Microsoft.Cpp/v4.0/Microsoft.Cpp.InvalidPlatform.Targee_modules/mongodb/node_modules/bson/build/bson.vcxproj]mongoose@3.6.10 node_modules/mongoose├── muri@0.3.1├── hooks@0.2.1├── sliced@0.0.3├── mpath@0.1.1├── ms@0.1.0├── mpromise@0.2.1 (sliced@0.0.4)└── mongodb@1.3.3 (kerberos@0.0.2, bson@0.1.8)
安裝時，有64位兼容性錯誤提示沒關系，Mongoose類庫安裝完成。
增加models目錄
mkdir models
在models目錄，增加mongodb.js文件
var mongoose = require('mongoose');mongoose.connect('mongodb://localhost/nodejs');exports.mongoose = mongoose;指定Mongo的數據庫名為nodejs
2.創建目錄及文件
在models目錄，增加數據模型Movie.js
var mongodb = require('./mongodb');var Schema = mongodb.mongoose.Schema;var MovieSchema = new Schema({name : String,alias : [String],publish : Date,create_date : { type: Date, default: Date.now},images :{coverSmall:String,coverBig:String,},source :[{source:String,link:String,swfLink:String,quality:String,version:String,lang:String,subtitle:String,create_date : { type: Date, default: Date.now }}]});var Movie = mongodb.mongoose.model("Movie", MovieSchema);var MovieDAO = function(){};module.exports = new MovieDAO();指定Mongo的數據庫集為Movie
數據類型，包括了String,Date,Array,Mixed]
打開app.js增加訪問路徑
var express = require('express'), routes = require('./routes'), user = require('./routes/user'), movie = require('./routes/movie'), http = require('http'), path = require('path'), ejs = require('ejs'), SessionStore = require("session-mongoose")(express);...app.get('/movie/add',movie.movieAdd);//增加app.post('/movie/add',movie.doMovieAdd);//提交app.get('/movie/:name',movie.movieAdd);//編輯查詢app.get('/movie/json/:name',movie.movieJSON);//JSON數據在routes目錄，增加movie.js
var Movie = require('./../models/Movie.js');exports.movieAdd = function(req, res) {if(req.params.name){//updatereturn res.render('movie', {title:req.params.name+'|電影|管理|moive.me',label:'編輯電影:'+req.params.name,movie:req.params.name});} else {return res.render('movie',{title:'新增加|電影|管理|moive.me',label:'新增加電影',movie:false});}};exports.doMovieAdd = function(req, res) {res.send({'success':true});};在views目錄，增加movie.html
<% include header.html %><div class="container-fluid"><div class="row-fluid"><div class="span8"><form><fieldset><legend><%=label%></legend><textarea id="c_editor" name="c_editor" class="span12" rows="10"></textarea><button id="c_save" type="button" class="btn btn-primary">保存</button></fieldset><form></div></div></div><% include footer.html %>
網頁效果：http://localhost:3000/movie/add
3. 插入數據，POST提交JSON增加一條記錄
基礎環境，都搭建好后，我們開臺準備向mongodb中插入數據。
首先創建一個json數據文件，這樣我們可以方便點，直接讀入這個文件，創建JSON數據對象了。
在public/javascripts/目錄，增加movie.json文件
{"name": "未來警察","alias": ["Future X-Cops ","Mei loi ging chaat"],"publish": "2010-04-29","images":{"coverBig":"/img/movie/1_big.jpg","coverSmall":"/img/movie/1_small.jpg"},"source":[{"source":"優酷","link":"http://www.youku.com","swfLink":"http://player.youku.com/player.php/sid/XMTY4NzM5ODc2/v.swf","quality":"高清","version":"正片","lang":"漢語","subtitle":"中文字幕"},{"source":"搜狐","link":"http://tv.sohu.com","swfLink":"http://share.vrs.sohu.com/75837/v.swf&topBar=1&autoplay=false&plid=3860&pub_catecode=","quality":"高清","version":"正片","lang":"漢語","subtitle":"中文字幕"}]}在public/javascripts/目錄，增加jquery.json-2.4.js類庫
<script src="/javascripts/jquery-1.9.1.min.js"></script><script src="/javascripts/bootstrap.min.js"></script><script src="/javascripts/jquery.json-2.4.js"></script><script src="/javascripts/movie.js"></script></body></html>
在public/javascripts/目錄，增加movie.js文件，作為前端腳本
$(function() {var mdata={};var url = '/javascripts/movie.json';$.getJSON(url, function(data) {mdata=data;render_editor_form(mdata);render_event_form(mdata);});var render_editor_form=function(data){$('#c_editor').val($.toJSON(data));};var render_event_form=function(){$('#c_save').on('click',function(event){var data = {};data['content'] = mdata;$.ajax({type: "POST",url: '/movie/add',data: data,success: function (data, textStatus){if(data.success){$('#msg').html('成功保存!');$('#msg').addClass('alert alert-success');$(location).attr('href','/movie/'+mdata.name);} else {$('#msg').html(data.err);$('#msg').addClass('alert alert-error');}}});});};});修改views/footer.html，增加movie.js文件引用，同時增加jquery.json包
<script src="/javascripts/jquery-1.9.1.min.js"></script><script src="/javascripts/bootstrap.min.js"></script><script src="/javascripts/jquery.json-2.4.js"></script><script src="/javascripts/movie.js"></script></body></html>
網頁效果：http://localhost:3000/movie/add
在models/Movie.js，增加save方法
MovieDAO.prototype.save = function(obj, callback) {var instance = new Movie(obj);instance.save(function(err){callback(err);});};在routes/movie.js，調用save方法
exports.doMovieAdd = function(req, res) {console.log(req.body.content);var json = req.body.content;if(json._id){//update} else {//insertMovie.save(json, function(err){if(err) {res.send({'success':false,'err':err});} else {res.send({'success':true});}});}};控制臺日志
Express server listening on port 3000{ name: '未來警察',alias: [ 'Future X-Cops ', 'Mei loi ging chaat' ],publish: '2010-04-29',images:{ coverBig: '/img/movie/1_big.jpg',coverSmall: '/img/movie/1_small.jpg' },source:[ { source: '優酷',link: 'http://www.youku.com',swfLink: 'http://player.youku.com/player.php/sid/XMTY4NzM5ODc2/v.swf',quality: '高清',version: '正片',lang: '漢語',subtitle: '中文字幕' },{ source: '搜狐',link: 'http://tv.sohu.com',swfLink: 'http://share.vrs.sohu.com/75837/v.swf&topBar=1&autoplay=false&plid=3860&pub_caquality: '高清',version: '正片',lang: '漢語',subtitle: '中文字幕' } ] }POST /movie/add 200 57ms - 21b數據已插入MongoDB
4. 查詢數據，取出剛增加的記錄
models/Movie.js,增加findByName方法
MovieDAO.prototype.findByName = function(name, callback) {Movie.findOne({name:name}, function(err, obj){callback(err, obj);});};routes/movies.js,增加movieJSON
exports.movieJSON = function(req, res) {Movie.findByName(req.params.name,function(err, obj){res.send(obj);});}前端javascripts/movie.js，從/movie/json/xxx處取數據
var mdata={};var url = '/javascripts/movie.json';var movie=$('#c_editor').attr('movie')if(movie){url = '/movie/json/'+movie;}修改 views/movie.html
<textarea id="c_editor" name="c_editor" rows="10" <%= (movie?'"movie='+movie+'"':'') %>></textarea>
訪問我們的網頁
http://localhost:3000/movie/未來警察
數據從/movie/json/未來警察，處讀取。完成嘗試。
修改操作與插入的操作類似，我就不做演示了。
以上程序代碼，大家可自行下載學習。
github地址：https://github.com/bsspirit/nodejs-demo
本地下載：http://xiazai.VeVB.COm/201705/yuanma/nodejs-demo(VeVB.COm).rar
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
