一、準備工做。javascript
三、建立目錄及文件。html
使用Express4建立項目,ejs做爲視圖引擎。jquery
一、安裝Mongoose類庫:npm install mongoose --save。ajax
二、建立models文件夾,在models文件夾下新建mongodb.js文件。mongodb
1 var mongoose=require('mongoose'); 2 mongoose.connect('mongodb://localhost:27017/nodejs'); 3 4 exports.mongoose=mongoose;
一、在models目錄,建立數據模型Movie.js,也就是咱們一般想扮演的Dao角色。數據庫
1 var mongodb=require('./mongodb'); 2 var Schema=mongodb.mongoose.Schema; 3 4 var MovieSchema=new Schema({ 5 name:String, 6 alias:[String], 7 publish:Date, 8 create_date:{type:Date,default:Date.now}, 9 images:{ 10 converSmall:String, 11 converBig:String 12 }, 13 source:[{ 14 source:String, 15 link:String, 16 swfLink:String, 17 quality:String, 18 version:String, 19 lang:String, 20 subtitle:String, 21 create_date:{type:Date,default:Date.now} 22 }] 23 }); 24 25 26 var Movie=mongodb.mongoose.model("Movie",MovieSchema); 27 var MovieDao=function(){}; 28 29 /******* 30 保存 31 ********/ 32 MovieDao.prototype.save=function(obj,callback){ 33 var instance=new Movie(obj); 34 instance.save(function(err){ 35 callback(err); 36 }) 37 } 38 /** 39 按照電影名稱精確查詢 40 **/ 41 MovieDao.prototype.findByName=function(name,callback){ 42 Movie.findOne({name:name},function(err,obj){ 43 callback(err,obj); 44 }); 45 } 46 47 module.exports=new MovieDao();
二、打開app.js 完善路由地址express
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'); var routes = require('./routes/index'); var users = require('./routes/users'); var movie=require('./routes/movie'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); // uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); //app.use('/', routes); //app.use('/users', users); app.get('/',movie.movieAdd); 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); // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handlers // development error handler // will print stacktrace 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 }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app; app.listen(3000,function(){ console.log('server begin...'); })
三、在routes目錄增長movie.js
var Movie=require('./../models/Movie.js'); exports.movieAdd=function(req,res){ if(req.params.name){ return res.render("movie",{ title:req.params.name+'|電影|管理|movie.me', label:'編輯電影'+req.params.name, movie:req.params.name }); }else{ return res.render("movie",{ title:'新增長|電影|管理|movie.me', label:'新增長電影', movie:false }); } } exports.doMovieAdd=function(req,res){ console.log(JSON.parse(req.body.content)); var json=JSON.parse(req.body.content); //把客戶端的Json字符串轉化爲object if(json._id){ //update } else{ //insert Movie.save(json,function(err){ if(err){ res.send({'success':false,'err':err}) }else{ res.send({'success':true}) } }) } } exports.movieJson=function(req,res){ Movie.findByName(req.params.name,function(err,obj){ res.send(obj); }) }
四、在views目錄,增長movie.ejs視圖。
<% include head.ejs %> <div class="container-fluid"> <div class="row-fluid"> <div class="span8"> <form> <fieldset> <legend><%=label%></legend> <textarea name="editor" id="editor" class="span12" rows="10" cols="60" <%=(movie?'"movie='+movie+'"':'')%> ></textarea> </fieldset> <br> <button id="save" type="button" class="btn btn-primary">保存</button> </form> </div> </div> </div> <span id='msg'></span> <% include footer.ejs %>
運行起來看看頁面效果 http://localhost:3000
一、基礎環境搭建好後,別忘了啓動mongodb服務。在這裏還有個地方,若是你使用的是express4.0框架,那麼從頁面向路由裏傳對象時須要在客戶端裏用JSON.Stringify序列化對象,而後在路由文件裏使用JSON.Parse把字符串轉化爲對象。本地直接建立一個JSON對象,直接讀取這個JSON文件插入數據庫。在public/javascripts下建立movie.json。
建立好JSON文件後,我在本地使用了head.ejs和footer.ejs ,別忘了在footer.ejs裏引用要使用的js文件,我這裏使用了jquery、bootstrap、jquery.json、movie.js(後面建立)。
{ "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目錄裏增長movie.js做爲客戶端訪問腳本。 客戶端初始化時讀取json文件。
1 $(function(){ 2 var mdata={}; 3 var url='/javascripts/movie.json'; 4 5 var movie=$('#editor').attr('movie'); 6 if(movie){ 7 url='/movie/json/'+movie; 8 } 9 10 $.getJSON(url,function(data){ 11 mdata=data; 12 render_editor_form(data); 13 render_event_form(); 14 }); 15 16 var render_editor_form=function(data){ 17 $('#editor').val($.toJSON(data)); 18 }; 19 20 var render_event_form=function(){ 21 $('#save').on('click',function(event){ 22 var data={}; 23 data.content=JSON.stringify(mdata); 24 $.ajax({ 25 type:'POST', 26 url:'/movie/add', 27 dataType:'json', 28 data:data, 29 success:function(data,status){ 30 if(data.success){ 31 $('#msg').html('保存成功'); 32 $('#msg').addClass('href','/movie/'+data.name); 33 }else{ 34 $('#msg').html(data.err); 35 $('#msg').addClass('alert alert-error'); 36 } 37 } 38 }); 39 }); 40 }; 41 });
啓動瀏覽器看看效果:
三、在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(JSON.parse(req.body.content)); var json=JSON.parse(req.body.content); //把客戶端的Json字符串轉化爲object if(json._id){ //update } else{ //insert Movie.save(json,function(err){ if(err){ res.send({'success':false,'err':err}) }else{ res.send({'success':true}) } }) } }
頁面啓動起來,直接點擊保存按鈕,查看報文,插入成功後會返回success:true。插入成功後你能夠用DOS命令來檢查,也能夠用可視化工具來查看,後面在頁面裏調用也能夠。
一、在models/Movie.js裏增長findByName()用來查看你剛纔插入數據庫的記錄,這裏使用電影名稱來查看。
/** 按照電影名稱精確查詢 **/ MovieDao.prototype.findByName=function(name,callback){ Movie.findOne({name:name},function(err,obj){ callback(err,obj); }); }
二、在routes/movie.js裏調用findByName()
1 exports.movieJson=function(req,res){ 2 Movie.findByName(req.params.name,function(err,obj){ 3 res.send(obj); 4 }) 5 }
寫完調用後,你能夠在瀏覽器裏輸入http://localhost:3000/movie/json/將來警察 ,會返回你剛纔入庫的數據。
使用Mongodb我發現最靈活的莫過於數據結構了,原文是用的express3,而後我作的時候用的express4,在路由裏使用req.body.content提示undefined。後來查詢由於Express版本的時,因此就用了JSON.Stringify和JSON.parse()。