Express 网站开发 | 易学教程

环境搭建

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

搭建完成后目录结构

├── 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 基础布局，所有的网页都是基于该布局

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

.container
  .row
    .page-header
      h1 #{title}

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

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 影片详情页，展示某个影片的详细信息

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 界面，录入影片信息。

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 影片列表编辑界面，编辑已有的文章。

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}") 删除

路由

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: '影片讲述当钢铁侠试图启动处于休眠状态的维持和平计划时，事情出了差错。于是，在地球面临生死存亡的紧急关头时，强大的超级英雄们挺身而出承担起拯救世界的重任，他们将阻止可怕的人工智能机器人“奥创”制定恐怖计划。'
        }]
    })
})

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

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

一.为什么要学习jade?

通常大部分前端开发工作者一开始步入前端开发的时候，都是直接简单的写html页面然后丢给后台开发，后台开发在来嵌入模版。
对于日益庞大的前端页面来说，还是用老的字符串拼接的方法来嵌入html内容已经不适应当下的开发趋势了。
废话不多说，直接切入正题。

二.开始装jade。

jade基于nodejs的开发环境，所以我们首先要安装nodejs,nodejs的安装方法其实还是挺复杂的，所以请大家自己去百度或者google,省事可以直接去 nodejs 的官方网站下载nodejs的安装包直接安装就好了。
第二步我要安装npm包管理工具，在node环境下，不装grunt是无法开展工作的哟。
开始安装jade插件了，下面的就是安装命令。