《Node + Express 快速搭建网站》学习笔记-4伪造模板数据跑通前后端交互流程

2-3伪造模板数据跑通前后端交互流程

ch2-项目前后端流程打通

项目结构

- imooc/
    -- node_modules/            //node依赖模块
    -- bower_components/        //静态资源安装目录
    -- views/                   //主要的视图文件结构，利用jade继承特性实现公共区块的复用
        --- includes/
            ---- head.jade      //网站公共头部
            ---- header.jade    //网站内容公共头部
        --- pages/
            ---- index.jade
            ---- detail.jade
            ---- admin.jade
            ---- list.jade
        --- layout.jade         //公共的HTML框架代码
    -- app.js                   //入口文件

填充HTML模板

公共部分

head.jade

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

.container
    .row
        .page-header
            h1 #{title}
            small 重度科幻迷

页面模板

index.jade

extend ../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")
                                观看预告片

detail.jade

extend ../layout

block content
    .container
        .row
            .col-md-7
                embed(src="#{movie.flash}", allowFullScreen="true", quality="high", width="720", height="600", align="middle", type="application/x-shockwave-flash")
            .col-md-5
                .dl-horizontal
                    dt 电影名字
                    dd #{movie.title}
                    dt 导演
                    dd #{movie.doctor}
                    dt 国家
                    dd #{movie.country}
                    dt 语言
                    dd #{movie.language}
                    dt 上映年份
                    dd #{movie.year}
                    dt 简介
                    dd #{movie.summary}

admin.jade

extend ../layout

block content
    .container
        .row
            form.form-horizontal(method="post", action="/admin/movie/new")
                .form-group
                    label.col-sm-3.control-label(for="inputTitle") 电影名字
                    .col-sm-10
                        input#inputTitle.form-control(type="text", name="movie[title]", value="#{movie.title}")
                .form-group
                    label.col-sm-3.control-label(for="inputDoctor") 导演
                    .col-sm-10
                        input#inputDoctor.form-control(type="text", name="movie[country]", value="#{movie.country}")
                .form-group
                    label.col-sm-3.control-label(for="inputCountry") 国家
                    .col-sm-10
                        input#inputCountry.form-control(type="text", name="movie[country]", value="#{movie.country}")
                .form-group
                    label.col-sm-3.control-label(for="inputLanguage") 语种
                    .col-sm-10
                        input#inputLanguage.form-control(type="text", name="movie[language]", value="#{movie.language}")
                .form-group
                    label.col-sm-3.control-label(for="inputPoster") 海报地址
                    .col-sm-10
                        input#inputPoster.form-control(type="text", name="movie[poster]", value="#{movie.poster}")
                .form-group
                    label.col-sm-3.control-label(for="inputFlash") 片源地址
                    .col-sm-10
                        input#inputFlash.form-control(type="text", name="movie[flash]", value="#{movie.flash}")
                .form-group
                    label.col-sm-3.control-label(for="inputYear") 上映年代
                    .col-sm-10
                        input#inputYear.form-control(type="text", name="movie[year]", value="#{movie.year}")
                .form-group
                    label.col-sm-3.control-label(for="inputSummary") 电影简介
                    .col-sm-10
                        input#inputSummary.form-control(type="text", name="movie[summary]", value="#{movie.summary}")
                .form-group
                    .col-sm-offset-2.col-sm-10
                    button.btn.btn-default(type="submit") 录入

list.jade

extend ../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.doctor}
                                td #{item.country}
                                td #{item.year}
                                //- td #{moment(item.meta.createedAt).format('MM/DD/YYYY')}
                                td: a(target="_blank", href="../movie/#{item._id}") 查看
                                td: a(target="_blank", href="../movie/update/#{item._id}") 修改
                                td
                                    button.btn.btn-danger.del(type="button", data-id="#{item._id}") 删除

修改入口文件并伪造数据

app.js

var express = require('express');
// var path = require('path');  //静态资源目录，新版express要独立安装static
var serveStatic = require('serve-static');
var bodyParser = require('body-parser');
var port = process.env.PORT || 3000;
var app = express();

app.set('views', './views/pages/'); //修改视图模板目录
app.set('view engine', 'jade');
// app.use(express.bodyParser());   //表单数据格式化，新版express不捆绑bodyParser
// app.use(express.static(path.join(__dirnamr, 'bower_components')));   //告诉express页面请求中样式和脚本的请求去path中查找
app.use(bodyParser.urlencoded());
app.use(serveStatic('bower_components'));
app.listen(port);

console.log('imooc started on port ' + port);

//路由
//index page
app.get('/', function(req, res){    //路由规则和URL地址相匹配
    res.render('index', {   //渲染模板
        title: 'imooc 首页',
        movies: [{  //伪造模板数据
            title: '生化危机：终章',
            _id: 1,
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg'
        },{
            title: '生化危机：终章',
            _id: 2,
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg'
        },{
            title: '生化危机：终章',
            _id: 3,
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg'
        },{
            title: '生化危机：终章',
            _id: 4,
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg'
        },{
            title: '生化危机：终章',
            _id: 5,
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg'
        },{
            title: '生化危机：终章',
            _id: 6,
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg'
        }]
    });
});

//detail page
app.get('/movie/:id', function(req, res){
    res.render('detail', {
        title: 'imooc 详情页',
        movie: {
            doctor: '保罗·安德森',
            country: '美国',
            titile: '生化危机：终章',
            year: '2017',
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg',
            language: '英语',
            flash: 'http://122.72.112.144/vkp.tc.qq.com/d00237fq1cr.p212.1.mp4?sdtfrom=v1010&guid=a3ccf7b9cda4cf90dbfef914a0d9cc50&vkey=765D82A126D8F4044006EFAE68BC29439517098DC9382BACEF86992DB032630A1490E8C50396E2625289736C5765C282ABBE0047855A391F1DCC8B37C724253ACA9DDEBA8D63863422CC8862EFD75DECF903D4420B8D8780315EB262CF40564E16358ADF053889AB790D0DBF267CD8CB',
            summary: '爱丽丝（米拉·乔沃维奇 Milla Jovovich 饰）在华盛顿特区被威斯克背叛后身陷险境，人类几乎要失去最后的希望。作为唯一的幸存者，也是人类对抗僵尸大军的最后防线，爱丽丝必须回到噩梦开始的地方——浣熊市，才能完成拯救世界救赎人类的正义使命。回归故事发生的起点浣熊市，爱丽丝将和昔日的朋友一起对抗僵尸和最新变种怪物，与保护伞公司展开了一场惊心动魄的终极决战。'
        }
    });
});

//admin page
app.get('/admin/movie', function(req, res){
    res.render('admin', {
        title: 'imooc 录入页',
        movie: {
            doctor: '',
            country: '',
            title: '',
            year: '',
            poster: '',
            language: '',
            flash: '',
            summary: ''
        }
    });
});

//list page
app.get('/admin/list/', function(req, res){
    res.render('list', {
        title: 'imooc 列表页',
        movies: [{
            _id: 1,
            doctor: '保罗·安德森',
            country: '美国',
            titile: '生化危机：终章',
            year: '2017',
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg',
            language: '英语',
            flash: 'http://122.72.112.144/vkp.tc.qq.com/d00237fq1cr.p212.1.mp4?sdtfrom=v1010&guid=a3ccf7b9cda4cf90dbfef914a0d9cc50&vkey=765D82A126D8F4044006EFAE68BC29439517098DC9382BACEF86992DB032630A1490E8C50396E2625289736C5765C282ABBE0047855A391F1DCC8B37C724253ACA9DDEBA8D63863422CC8862EFD75DECF903D4420B8D8780315EB262CF40564E16358ADF053889AB790D0DBF267CD8CB',
            summary: '爱丽丝（米拉·乔沃维奇 Milla Jovovich 饰）在华盛顿特区被威斯克背叛后身陷险境，人类几乎要失去最后的希望。作为唯一的幸存者，也是人类对抗僵尸大军的最后防线，爱丽丝必须回到噩梦开始的地方——浣熊市，才能完成拯救世界救赎人类的正义使命。回归故事发生的起点浣熊市，爱丽丝将和昔日的朋友一起对抗僵尸和最新变种怪物，与保护伞公司展开了一场惊心动魄的终极决战。'
        }]
    })
});

测试前后端交互流程

node app.js

测试完成！下一步根据页面的字段提取和抽象，从而来设计数据库。