源碼講解 node+mongodb 建站攻略(一期)第二節

源碼講解 node+mongodb 建站攻略(一期)第二節

上一節,咱們完成了模擬數據,此次咱們來玩兒真正的數據庫,mongodb。node

代碼http://www.imlwj.com/download/nodejs/demo1.rarajax

首先給你們看看目錄結構。mongodb

QQ截圖20150810140831

你們能夠比對一下,跟第一節咱們加了那些內容。數據庫

 

1,咱們新建文件夾schemas,新建文件movie.js,主要提供對數據模型,實例化,對數據的增刪改查方法。express

var mongoose=require('mongoose');
var MovieSchema=new mongoose.Schema({
doctor:String,
title:String,
language:String,
summary:String,
flash:String,
poster:String,
year:Number,
meta:{
createAt:{
type:Date,
default:Date.now()
},
updateAt:{
type:Date,
default:Date.now()
}
}
});
MovieSchema.pre('save',function(next){
if(this.isNew){
this.meta.createAt=this.meta.updateAt=Date.now();
}else{
this.meta.updateAt=Date.now();
}
next();
});

MovieSchema.statics={
fetch:function(cb){
return this
.find({})
.sort('meta.updateAt')
.exec(cb);
},
findById:function(id,cb){
return this
.findOne({_id:id})
.exec(cb);
}
};

module.exports=MovieSchema;

2,咱們新建文件夾schemas,新建文件movie.js ,定義變量json

var mongoose=require('mongoose');
var MovieSchema=require('../schemas/movie');
var Movie=mongoose.model('Movie',MovieSchema);

module.exports=Movie;

3,準備工做作好了,開始頁面上來操做數據了,仍是從入口文件開始app

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var _ = require('underscore');//提供新的支持underscore
var Movie = require("./models/movie");
var port = process.PORT || 3000;
var app = express();

mongoose.connect("mongodb://localhost/demo1");

app.set('views', './views/pages');
app.set('view engine', 'jade');

// app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname,'bower_components')));
app.use(bodyParser.urlencoded({
extended: true
}));
app.locals.moment = require('moment');

app.listen(port);

console.log('demo1 started on port ' + port);

//index page
app.get('/', function(req, res) {
//查詢全部數據,調用的是models-->movie.js裏面的方法
Movie.fetch(function(err, movies) {
if (err) {
console.log(err);
}
//將查詢的數據返回到index.jade頁面
res.render('index', {
title: 'demo1 首頁',
movies: movies
});
});
});

//detail page
app.get('/movie/:id', function(req, res) {
//詳情頁面,獲取request裏面的id,根據id查詢一條數據
var id = req.params.id;
Movie.findById(id, function(err, movie) {
res.render('detail', {
title: 'demo1' + movie.title,
id: id,
movie: movie
});
})
});

//admin page
app.get('/admin/movie', function(req, res) {
res.render('admin', {
title: 'demo1 後臺錄入頁',
movie: {
_id: '',
doctor: '',
country: '',
title: '',
year: '',
poster: '',
language: '',
flash: '',
summary: ''
}
});
});

//admin update movie
app.get('/admin/update/:id', function(req, res) {
//獲取request裏面的id,根據id判斷是修改
var id = req.params.id;
if (id) {
Movie.findById(id, function(err, movie) {
res.render('admin', {
title: 'demo1 後臺更新頁',
movie: movie
});
});
}
});

//admin delete movie
app.delete('/admin/list',function(req,res){
//根據id刪除一條數據
var id = req.query.id;
if(id){
Movie.remove({_id:id},function(err,movie){
if(err){
console.log(err);
}else{
res.json({success:1});
}
});
}

})

//admin post movie
app.post('/admin/movie/new', function(req, res) {
console.log(req.body);
console.log(req.body.movie);
//獲取數據對象,保存數據,新增。
var id = req.body.movie._id;
var movieObj = req.body.movie;
var _movie;
if (id !== undefined) {
Movie.findById(id, function(err, movie) {
if (err) {
console.log(err);
}
_movie = _.extend(movie, movieObj);
_movie.save(function(err, movie) {
if (err) {
console.log(err);
}
res.redirect('/movie/' + movie._id);
});
});
} else {
_movie = new Movie({
doctor: movieObj.doctor,
title: movieObj.title,
language: movieObj.language,
country: movieObj.country,
year: movieObj.year,
poster: movieObj.poster,
flash: movieObj.flash,
summary: movieObj.summary
});
_movie.save(function(err, movie) {
if (err) {
console.log(err);
}
res.redirect('/movie/' + movie._id);
});
}
});

//list page
app.get('/admin/list', function(req, res) {
//跟首頁同樣。
Movie.fetch(function(err, movies) {
if (err) {
console.log(err);
}
res.render('list', {
title: 'demo1 列表頁',
movies: movies
});
});
});

3,刪除數據寫的是button,因此要對button寫一個事件,在處理刪除。mongoose

在bower_components下面新建js文件夾,而後新建admin.js。同時在list.jade下面引入 script(src="/js/admin.js"),注意縮進。ide

QQ截圖20150810143443

$(function(){
$('.del').click(
function(e){
var target = $(e.target);
var id = target.data('id');
var tr = $('.item-id-'+ id);
$.ajax({
type:'DELETE',
url:'/admin/list?id='+id
})
.done(function(reaults){
if(reaults.success===1){
if(tr.length>0){
tr.remove();
}
}
})
}
)
})

最後直接在完整圖片預覽一下吧post

QQ截圖20150810143602

QQ截圖20150810143624

QQ截圖20150810143639

QQ截圖20150810143654

轉載本站文章請註明出處:愛開發 http://www.imlwj.com/blog/?p=66

相關文章
相關標籤/搜索