美文网首页ITNotes
《Node + Express 快速搭建网站》学习笔记-4伪造模

《Node + Express 快速搭建网站》学习笔记-4伪造模

作者: 张大侠 | 来源:发表于2017-03-16 14:13 被阅读37次

    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



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

    相关文章

      网友评论

      • huluo666:@张大侠 哈，可以了，bootstrap引用问题
        张大侠::+1: 小问题最烦了
      • huluo666:请问下index.jade 和你写的一样，页面布局怎么是竖排的，怎么横排呢？

        张大侠:.col-md-2
        你在上面加上这个类了吗？这个定义了宽度为2（bootstrap）

      本文标题：《Node + Express 快速搭建网站》学习笔记-4伪造模

      本文链接：https://www.haomeiwen.com/subject/eoqjnttx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      ITNotes

      关于我们|服务条款|联系我们|《Node + Express 快速搭建网站》学习笔记-4伪造模|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！