您好,欢迎访问一九零五行业门户网

Express 网站开发_html/css_WEB-ITnose

express开发一个简单的网站,网页模板引擎使用 jade,样式基于 bootstrap,数据库使用 mongodb
环境搭建
$ npm install express jade mongooes
首先需要是 node环境,使用 npm安装 express jade和 mongoose, 然后使用 bower 安装 bootstrap。
安装 bower 通过 npm install bower -g, bower 是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如javascript、html、css之类的网络资源。
$ bower install bootstrap
搭建完成后目录结构
├── 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基础布局,所有的网页都是基于该布局
doctypehtml head meta(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所有网页通用的 header
.container .row .page-header h1 #{title}
index.jade,主界面,影片列表
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影片详情页,展示某个影片的详细信息
extends ../layoutblock content .container .row .col-md-7 .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.jadeadmin 界面,录入影片信息。
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影片列表编辑界面,编辑已有的文章。
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}) 删除
路由 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。
其它类似信息

推荐信息