1

$ npm install express jade mongooes

1

$ bower install bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

├── app.js  # 启动文件
├── bower_components # bower 安装的库
│   ├── bootstrap
│   └── jquery
├── node_modules # npm 安装的依赖库
│   ├── express
│   ├── jade
│   ├── moment
│   └── mongoose
├── package.json
└── views # 视图模板├── includes│   ├── head.jade│   └── header.jade├── layout.jade└── pages├── admin.jade├── detail.jade├── index.jade

1
2
3
4
5
6
7
8
9

doctype
htmlheadmeta(charset="utf-8")title #{title}include ./includes/headbodyinclude ./includes/headerblock content

1
2
3

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")

1
2
3
4

.container.row.page-headerh1 #{title}

1
2
3
4
5
6
7
8
9
10
11
12
13

extends ../layoutblock content.container.roweach item in movies.col-md-2.thumbnaila(href="/movie/#{item._id}")img(src="#{item.poster}", alt="#{item.title}").captionh3 #{item.title}p: a.btn.btn-primary(href="/movie/#{item._id}", role="button") 观看预告片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

extends ../layoutblock content.container.row.col-md-7<video width="100%" controls="" autoplay="false" name="media"><source src="#{movie.flash}"></video>.col-md-5dl.dl-horizontaldt 电影名字dd #{movie.title}dt 导演dd #{movie.director}dt 主演dd #{ movie.actor}dt 国家dd #{ movie.country}dt 语言dd #{movie.language}dt 上映年份dd #{ movie.publishTime}dt 类型dd #{movie.type}dt 简介dd #{movie.summary}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

extends ../layoutblock content.container.rowform.form-horizontal(method="post",action="/admin/movie/new").form-grouplabel.col-sm-2.control-label(for="inputTitle") 电影名字.col-sm-10input#inputTitle.col-sm-10.form-control(type="text",name="movie[title]").form-grouplabel.col-sm-2.control-label(for="inputDirector") 导演.col-sm-10input#inputDirector.col-sm-10.form-control(type="text",name="movie[director]").form-grouplabel.col-sm-2.control-label(for="inputCountry") 国家.col-sm-10input#inputCountry.col-sm-10.form-control(type="text",name="movie[country]").form-grouplabel.col-sm-2.control-label(for="inputLanguage") 语言.col-sm-10input#inputLanguage.col-sm-10.form-control(type="text",name="movie[language]").form-grouplabel.col-sm-2.control-label(for="inputYear") 上映年份.col-sm-10input#inputYear.col-sm-10.form-control(type="text",name="movie[publishTime]").form-grouplabel.col-sm-2.control-label(for="inputSummary") 简介.col-sm-10input#inputSummary.col-sm-10.form-control(type="text",name="movie[summary]")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

extends ../layoutblock content.container.rowtable.table.table-hover.table-borderedtheadtrth 电影名字th 导演th 国家th 上映年份//- th 录入时间th 查看th 更新th 删除tbodyeach item in moviestr(class="item-id-#{item._id}")td #{item.title}td #{item.director}td #{item.country}td #{item.publishTime}//- td #{moment(item.meta.createdAt).format('MM/DD/YYYY')}td: a(target="_blank", herf="../movie/#{item._id}") 查看td: a(target="_blank", herf="../admin/update/#{item._id}") 修改tdbutton.btn.btn-danger.del(type="button", date-id="#{item._id}") 删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

var express = require('express')
var path = require('path')
var port = process.env.PORT || 3000
var app = express()app.set('views','./views/pages')
app.set('view engine', 'jade')
app.use(express.static(path.join(__dirname,'bower_components')))
app.listen(port)console.log('server listening on poert:'+port)// index
app.get('/',function (req,res) {res.render('index',{title: '首页',movies: [{title: '变形金刚1',_id: 1,poster: 'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2332503406.jpg'},{title: '变形金刚2',_id: 2,poster: 'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2332503406.jpg'},{title: '变形金刚3',_id: 3,poster: 'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2332503406.jpg'},{title: '变形金刚4',_id: 4,poster: 'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2332503406.jpg'}]})
});// movie detail
app.get('/movie/:id',function (req,res) {res.render('detail',{title: '详情页',movie:{title:'美国队长3：内战',director: '安东尼·罗素 / 乔·罗素',editor : '克里斯托弗·马库斯 / 斯蒂芬·麦克菲利 / 杰克·科比 / 乔·西蒙',actor : '克里斯·埃文斯 / 小罗伯特·唐尼 / 斯嘉丽·约翰逊 / 塞巴斯蒂安·斯坦 / 安东尼·麦凯 / 更多...',type : '动作 / 科幻 / 冒险',link : 'marvel.com/captainamerica',country : '美国',language : '科萨语 / 英语 / 德语 / 俄语 / 罗马尼亚语',publishTime: ' 2016-05-06(中国大陆/美国) / 2016-04-12(加州首映)',duration : '148分钟(中国大陆) / 147分钟',alise : '美国队长3：内战 / 美国队长3：英雄内战(港/台) / 美队3 / Captain America 3',summary : '美国队长史蒂夫·罗杰斯（克里斯·埃文斯 Chris Evans 饰）带领着全新组建的复仇者联盟，继续维护世界和平。然而，一次执行任务时联盟成员不小心造成大量平民伤亡，从而激发政治压力，政府决定通过一套监管系统来管理和领导复仇者联盟。联盟内部因此分裂为两派：一方由史蒂夫· 罗杰斯领导，他主张维护成员自由，在免受政府干扰的情况下保护世界；另一方则追随托尼·斯塔克（小罗伯特·唐尼 Robert Downey Jr. 饰），他令人意外地决定支持政府的监管和责任制体系。神秘莫测的巴基（塞巴斯蒂安·斯坦 Sebastian Stan 饰）似乎成为内战的关键人物……',flash:'https://img3.doubanio.com/rda/8ffecbe972ad5cf.mp4'}})
})//admin page
app.get('/admin/movie', function (req, res) {res.render('admin', {title: 'imooc 后台录入页',movie: {director: '',country: '',title: '',publishTime: '',poster: '',language: '',flash: '',summary: ''}})
})//admin page
app.get('/admin/list', function (req, res) {res.render('list', {title: 'imooc 列表页',movies: [{director: '乔斯·韦登',country: '美国',title: '复仇者联盟2',publishTime: '2015',_id:2,poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg',language: '英语',flash: 'http://v.youku.com/v_show/id_XODc4NDY0MjA4.html',summary: '影片讲述当钢铁侠试图启动处于休眠状态的维持和平计划时，事情出了差错。于是，在地球面临生死存亡的紧急关头时，强大的超级英雄们挺身而出承担起拯救世界的重任，他们将阻止可怕的人工智能机器人“奥创”制定恐怖计划。'}]})
})