Express 网站开发

express 开发一个简单的网站,网页模板引擎使用 jade,样式基于 bootstrap,数据库使用 MongoDB

环境搭建

1
$ npm install express jade mongooes

首先需要是 node 环境,使用 npm 安装 express jademongoose, 然后使用 bower 安装 bootstrap。
安装 bower 通过 npm install bower -g, bower 是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

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

创建视图

layout.jade 基础布局,所有的网页都是基于该布局

1
2
3
4
5
6
7
8
9
doctype
html
head
meta(charset="utf-8")
title #{title}
include ./includes/head
body
include ./includes/header
block content

head.jade 放一些 css js 引用

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

header.jade 所有网页通用的 header

1
2
3
4
.container
.row
.page-header
h1 #{title}

index.jade ,主界面,影片列表

1
2
3
4
5
6
7
8
9
10
11
12
13
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 #{item.title}
p: a.btn.btn-primary(href="/movie/#{item._id}", role="button") 观看预告片

detial.jade 影片详情页,展示某个影片的详细信息

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 ../layout

block content
.container
.row
.col-md-7
<video width="100%" controls="" autoplay="false" name="media"><source src="#{movie.flash}"></video>
.col-md-5
dl.dl-horizontal
dt 电影名字
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}

admin.jade Admin 界面,录入影片信息。

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 ../layout

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

list.jade 影片列表编辑界面,编辑已有的文章。

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 ../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.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}") 修改
td
button.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
99
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: 'https://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg',
language: '英语',
flash: 'https://v.youku.com/v_show/id_XODc4NDY0MjA4.html',
summary: '影片讲述当钢铁侠试图启动处于休眠状态的维持和平计划时,事情出了差错。于是,在地球面临生死存亡的紧急关头时,强大的超级英雄们挺身而出承担起拯救世界的重任,他们将阻止可怕的人工智能机器人“奥创”制定恐怖计划。'
}]
})
})

目前还是假数据,还没有使用 MongoDB。

运行 node app.js 然后再浏览器打开 https://localhost:3000


相关链接:

https://www.imooc.com/video/1226
https://expressjs.com/
https://bower.io/

文章来自: https://hanks.pub