环境搭建 1 $ npm install express jade mongooes 首先需要是 node 环境,使用 npm 安装 express jad
环境搭建
1 | $ npm install express jade mongooes |
首先需要是 node
环境,使用 npm
安装 express
jade
和 mongoose
, 然后使用 bower 安装 bootstrap。
安装 bower 通过 npm install bower -g
, bower 是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。
1 | $ bower install bootstrap |
搭建完成后目录结构
12345678910111213141516171819 | ├── 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
基础布局,所有的网页都是基于该布局
123456789 | doctypehtml head meta(charset="utf-8") title #{title} include ./includes/head body include ./includes/header block content |
head.jade
放一些 css js 引用
123 | 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
1234 | .container .row .page-header h1 #{title} |
index.jade
,主界面,影片列表
12345678910111213 | extends ../layoutblock 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
影片详情页,展示某个影片的详细信息
12345678910111213141516171819202122232425 | extends ../layoutblock 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 界面,录入影片信息。
123456789101112131415161718192021222324252627282930 | extends ../layoutblock 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
影片列表编辑界面,编辑已有的文章。
12345678910111213141516171819202122232425262728 | extends ../layoutblock 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}") 删除 |
路由
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 | var express = require('express')var path = require('path')var port = process.env.PORT || 3000var 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)// indexapp.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 detailapp.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 pageapp.get('/admin/movie', function (req, res) { res.render('admin', { title: 'imooc 后台录入页', movie: { director: '', country: '', title: '', publishTime: '', poster: '', language: '', flash: '', summary: '' } })})//admin pageapp.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: '影片讲述当钢铁侠试图启动处于休眠状态的维持和平计划时,事情出了差错。于是,在地球面临生死存亡的紧急关头时,强大的超级英雄们挺身而出承担起拯救世界的重任,他们将阻止可怕的人工智能机器人“奥创”制定恐怖计划。' }] })}) |
目前还是假数据,还没有使用 MongoDB。
运行 node app.js
然后再浏览器打开 http://localhost:3000
。
一.为什么要学习jade?
- 通常大部分前端开发工作者一开始步入前端开发的时候,都是直接简单的写html页面然后丢给后台开发,后台开发在来嵌入模版。
- 对于日益庞大的前端页面来说,还是用老的字符串拼接的方法来嵌入html内容已经不适应当下的开发趋势了。
- 废话不多说,直接切入正题。
二.开始装jade。
- jade基于nodejs的开发环境,所以我们首先要安装nodejs,nodejs的安装方法其实还是挺复杂的,所以请大家自己去百度或者google,省事可以直接去 nodejs 的官方网站下载nodejs的安装包直接安装就好了。
- 第二步我要安装npm包管理工具,在node环境下,不装grunt是无法开展工作的哟。
- 开始安装jade插件了,下面的就是安装命令。
三.开始使用jade来构建前端模版。
- 首先我们建立一个文件夹叫jade,然后在创建一个jade的文件叫jade.jade即可。
2.我们在jade文件内写上jade规模的模版代码,其实很好看懂。
3.上面代码估计大家都能看懂,就是创建一个常规的前端html的文件,但是规范是jade的规范,然后我们可以进入cmd命令行工具 cd到当前的文件夹,然后暴力编译当前的jade文件,会看到同目录会生成一个压缩过的html的文件。
4.压缩的过的可以通过加-P来不压缩,如果每次更改模版都要打命令行一次很麻烦是不是,我们可以通过加上jade -P -w jade.jade 加上一个-w来开启监视模式,每次更改模版,html文件都会自动编译咯。
5.我们现在来看看生成的html文件吧,是不是生成了正常的html dom树了呢?
四.熟悉jade规范。
- 从图上可以看出来,子级元素必须要缩进。
- 标签和文本必须要留有空行。