Express Web サイト開発_html/css_WEB-ITnose

Express は、Web テンプレート エンジンは jade を使用し、スタイルはブートストラップに基づいており、データベースは MongoDB を使用します。

環境セットアップ

$ npm install express jade mongooes

まずノード環境が必要です。npm を使用して Express Jade と mongoose をインストールし、次に bower を使用してブートストラップをインストールします。

npm install bower -g を使用して bower をインストールします。 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 基本レイアウト、すべての Web ページはこのレイアウトに基づいています

doctypehtml  head    meta(charset="utf-8")    title #{title}    include ./includes/head  body    include ./includes/header    block content

頭に CSS JS を置きます。 jade Quote

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 すべての Web ページに共通のヘッダー

.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        <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.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 を開きます。