前言
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-demo npm install mongoose d:\workspace\project\nodejs-demo\node_modules\mongoose\node_modules\mongodb\node_modu c:\program files (x86)\msbuild\microsoft.cpp\v4.0\microsoft.cpp.invalidplatform.targe e_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){//update
return 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://www.lhsxpumps.com/_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://www.lhsxpumps.com/_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 {//insert
movie.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_ca
quality: '高清',
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://www.lhsxpumps.com/_localhost:3000/movie/未来警察
数据从/movie/json/未来警察，处读取。完成尝试。
修改操作与插入的操作类似，我就不做演示了。
以上程序代码，大家可自行下载学习。
github地址：
本地下载：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问， 点击进行留言回复！！
JavaScript 好题汇总分享（持续更新，看到好题就写）
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论