源码讲解 node+mongodb 建站攻略（一期）第一节
源码讲解 node+mongodb 建站攻略（一期）第一节
本章节主要讲解慕课网《 node+mongodb 建站攻略（一期）》http://www.imooc.com/learn/75
首先应大部分同学请求，上代码：http://www.imlwj.com/download/nodejs/node_mongodb.rar，大家要的源代码就在这里了，同时没有那些模块，要自己下去安装一下。
一下容易错误的地方都有备注，同时还有一个特别容易出错的地方，就是代码的缩进，一定要注意（expected "indent", but got "newline"，一般会有这样的错误，并且提示你在那个文件，多少行）
下面都是模拟数据还没有加数据库，期待下一章节。谢谢各位的支持。
目录结构
app.js，入口文件
var express=require('express');
var path=require('path');
var port=process.PORT || 3000;
var app=express();
app.set('views','./views/pages');
app.set('view engine','jade');
//这里与视频不一样，视频里面会出现错误
//Error: Most middleware (like bodyParser) is no longer bundled with Express and m
//ust be installed separately. Please see https://github.com/senchalabs/connect#mi
//ddleware. 会有这样的一个错误，用下面就不会出现错误了。
var bodyParser = require('body-parser');
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname,'bower_components')));
app.listen(port);
console.log('demo1 started on port '+port);
//index page
app.get('/',function(req,res){
res.render('index',{
title:'demo1 首页1',
movies:[{
title:'钢铁侠',
_id:1,
poster:'http://r3.ykimg.com/05160000530EEB63675839160D0B79D5'
},{
title:'钢铁侠',
_id:2,
poster:'http://r3.ykimg.com/05160000530EEB63675839160D0B79D5'
},{
title:'钢铁侠',
_id:3,
poster:'http://r3.ykimg.com/05160000530EEB63675839160D0B79D5'
},{
title:'钢铁侠',
_id:4,
poster:'http://r3.ykimg.com/05160000530EEB63675839160D0B79D5'
},{
title:'钢铁侠',
_id:5,
poster:'http://r3.ykimg.com/05160000530EEB63675839160D0B79D5'
},{
title:'钢铁侠',
_id:6,
poster:'http://r3.ykimg.com/05160000530EEB63675839160D0B79D5'
}]
});
});
//detail page
app.get('/movie/:id',function(req,res){
res.render('detail',{
title:'demo1 详情页',
movie:{
doctor:'javan',
country:'china',
title:'钢铁侠',
year:2014,
poster:'http://r3.ykimg.com/05160000530EEB63675839160D0B79D5',
language:'chinese',
flash:'http://player.youku.com/player.php/sid/XNjA1Njc0NTUy/v.swf',
summary:'中国制造中国制造中国制造中国制造中国制造中国制造中国制造中国制造中国制造'
}
});
});
//list page
app.get('/admin/list',function(req,res){
res.render('list',{
title:'demo1 列表页',
movies:[{
_id:1,
doctor:'javan',
country:'china',
title:'钢铁侠',
year:2014,
poster:'http://r3.ykimg.com/05160000530EEB63675839160D0B79D5',
language:'chinese',
flash:'http://player.youku.com/player.php/sid/XNjA1Njc0NTUy/v.swf',
summary:'中国制造中国制造中国制造中国制造中国制造中国制造中国制造中国制造中国制造'
},{
_id:2,
doctor:'javan',
country:'china',
title:'钢铁侠',
year:2014,
poster:'http://r3.ykimg.com/05160000530EEB63675839160D0B79D5',
language:'chinese',
flash:'http://player.youku.com/player.php/sid/XNjA1Njc0NTUy/v.swf',
summary:'中国制造中国制造中国制造中国制造中国制造中国制造中国制造中国制造中国制造'
}]
});
});
//admin page
app.get('/admin/movie',function(req,res){
res.render('admin',{
title:'demo1 后台录入页',
movie:{
doctor:'',
country:'',
title:'',
year:'',
poster:'',
language:'',
flash:'',
summary:''
}
});
});
layout.jade，所有页面公共使用
doctype
html
head
mete(charset="utf-8")
title #{title}
include ./includes/head
body
include ./includes/header
block content
head.jade，引用一些要用到的css和js
link(href="/bootstrap/dist/css/bootstrap.min.css",rel="stylesheet")
script(src="/jquery/dist/jquery.min.js")
script(src="/bootstrap/dist/js/bootstrap.min.js")
header.jade，所有页面要用的头部，比如导航等
.container
.row
.page-header
h1=title
samll 重度科幻迷
index.jade，显示电影列表
extends ../layout
block content
.container
.row
each item in movies
.col-md-2
.thumbnail
a(href="/movie/#{item._id}")
img(src="#{item.poster}",alt="#{item.title}")
.caption
h3 #{title}
p:a.btn.btn-primary(href="/movie/#{item._id}",role="button")
观看预告片
detail.jade，显示详情，左边falsh播放器，右边详情
extends ../layout
block content
.container
.row
.col-md-7
enbed(src="#{movie.flash}",allowFullScreen="true",quality="high",width="720",height="600",align="middle",type="application/x-shockwave-flash")
.col-md-5
dl.dl-horizontal
dt 电影名字
dd #{movie.title}
dt 导演
dd #{movie.doctor}
dt 国家
dd #{movie.country}
dt 语言
dd #{movie.language}
dt 上映年份
dd #{movie.year}
dt 简介
dd #{movie.summary}
list.jade，后台电影列表，可以修改/更新、删除、查看操作
extends ../layout
block content
.container
.row
table.table.table-hover.table-bordered
thead
tr
th 电影名字
th 导演
th 国家
th 上映时间
//- th 录入时间
th 查看
th 更新
th 删除
tbody
each item in movies
tr(class="item-id-#{item._id}")
td #{item.title}
td #{item.doctor}
td #{item.country}
td #{item.year}
//- td #{moment(item.meta.createdAt).format('MM/DD/YYYY')}
td: a(target="_blank",href="../movie/#{item._id}")查看
td: a(target="_blank",href="../admin/update/#{item._id}")修改
td
button.btn.btn-danger.del(type="button",date-id="#{item._id}")删除
admin.jade，电影的录入
extends ../layout
block content
.container
.row
form.form-horizontal(method="post",action="/admin/movie/new")
.form-group
label.clo-sm-2.control-label(for="inputTitle")电影名字
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[title]")
.form-group
label.clo-sm-2.control-label(for="inputDoctor")导演
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[doctor]")
.form-group
label.clo-sm-2.control-label(for="inputCountry")国家
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[country]")
.form-group
label.clo-sm-2.control-label(for="inputLanguage")语种
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[language]")
.form-group
label.clo-sm-2.control-label(for="inputPoster")海报地址
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[poster]")
.form-group
label.clo-sm-2.control-label(for="inputFlash")片源地址
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[flash]")
.form-group
label.clo-sm-2.control-label(for="inputYear")上映年份
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[year]")
.form-group
label.clo-sm-2.control-label(for="inputSummary")简介
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[summary]")
.form-group
label.clo-sm-2.control-label(for="inputTitle")上映年份
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[year]")
.form-group
.col-sm-offset-2.col-sm-10
button.btn.btn-default(type="submit")录入
转载本站文章请注明出处：爱开发 http://www.imlwj.com/blog/?p=55
