《Node + Express 快速搭建網(wǎng)站》學(xué)習(xí)筆記-4偽造模板數(shù)據(jù)跑通前后端交互流程

2-3偽造模板數(shù)據(jù)跑通前后端交互流程

ch2-項(xiàng)目前后端流程打通

項(xiàng)目結(jié)構(gòu)

- imooc/
    -- node_modules/            //node依賴模塊
    -- bower_components/        //靜態(tài)資源安裝目錄
    -- views/                   //主要的視圖文件結(jié)構(gòu)，利用jade繼承特性實(shí)現(xiàn)公共區(qū)塊的復(fù)用
        --- includes/
            ---- head.jade      //網(wǎng)站公共頭部
            ---- header.jade    //網(wǎng)站內(nèi)容公共頭部
        --- 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")
                                觀看預(yù)告片

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 導(dǎo)演
                    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") 導(dǎo)演
                    .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") 海報(bào)地址
                    .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 導(dǎo)演
                        th 國家
                        th 上映年份
                        //- th 錄入時(shí)間
                        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}") 刪除

修改入口文件并偽造數(shù)據(jù)

app.js

var express = require('express');
// var path = require('path');  //靜態(tài)資源目錄，新版express要獨(dú)立安裝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());   //表單數(shù)據(jù)格式化，新版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){    //路由規(guī)則和URL地址相匹配
    res.render('index', {   //渲染模板
        title: 'imooc 首頁',
        movies: [{  //偽造模板數(shù)據(jù)
            title: '生化危機(jī)：終章',
            _id: 1,
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg'
        },{
            title: '生化危機(jī)：終章',
            _id: 2,
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg'
        },{
            title: '生化危機(jī)：終章',
            _id: 3,
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg'
        },{
            title: '生化危機(jī)：終章',
            _id: 4,
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg'
        },{
            title: '生化危機(jī)：終章',
            _id: 5,
            poster: 'https://img3.doubanio.com/view/photo/thumb/public/p2429713841.jpg'
        },{
            title: '生化危機(jī)：終章',
            _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: '生化危機(jī)：終章',
            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 飾）在華盛頓特區(qū)被威斯克背叛后身陷險(xiǎn)境，人類幾乎要失去最后的希望。作為唯一的幸存者，也是人類對抗僵尸大軍的最后防線，愛麗絲必須回到噩夢開始的地方——浣熊市，才能完成拯救世界救贖人類的正義使命。回歸故事發(fā)生的起點(diǎn)浣熊市，愛麗絲將和昔日的朋友一起對抗僵尸和最新變種怪物，與保護(hù)傘公司展開了一場驚心動(dòng)魄的終極決戰(zhàn)。'
        }
    });
});

//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: '生化危機(jī)：終章',
            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 飾）在華盛頓特區(qū)被威斯克背叛后身陷險(xiǎn)境，人類幾乎要失去最后的希望。作為唯一的幸存者，也是人類對抗僵尸大軍的最后防線，愛麗絲必須回到噩夢開始的地方——浣熊市，才能完成拯救世界救贖人類的正義使命。回歸故事發(fā)生的起點(diǎn)浣熊市，愛麗絲將和昔日的朋友一起對抗僵尸和最新變種怪物，與保護(hù)傘公司展開了一場驚心動(dòng)魄的終極決戰(zhàn)。'
        }]
    })
});

測試前后端交互流程

node app.js



測試完成！下一步根據(jù)頁面的字段提取和抽象，從而來設(shè)計(jì)數(shù)據(jù)庫。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容