Nodejs電影建站開發實例(上)

時間 2019-11-13

標籤 nodejs 建站開發實例简体版

原文原文鏈接

網站環境：使用express框架、bootstrap樣式、jade模板、mongoose數據庫html

npm insatll express -g
npm insatll jada -g
npm insatll mongoose -g

一、建立express工程：myMoviemongodb

進入工程執行npm install，npm start 後訪問很正常，能夠往下繼續了數據庫

二、建立路由，打通入口express

初擬可能瀏覽的入口================npm

網站跟目錄：localhost:3000/bootstrap

某個電影詳情頁：localhost:3000/movie/1app

後臺電影添加頁：localhost:3000/admin/add框架

後臺列表頁：localhost:3000/admin/listmongoose

根據所需修改app.jside

var express = require("express");
var app=express();


//訪問網站跟目錄：localhost:3000/
app.get("/",function(req,res){
    res.send("網站首頁");
});


//localhost:3000/movie/1
app.get("/movie/:id",function(req,res){
    res.send("電影詳情");
});


//localhost:3000/admin/add
app.get("/admin/add",function(req,res){
    res.send("後臺電影添加頁");
});


//localhost:3000/admin/list
app.get("/admin/list",function(req,res){
    res.send("後臺電影列表");
});


app.listen(3030,function(){
    console.log("請訪問http://localhost:3030");
});

三、jade準備視圖

index.jade主頁、add.jade後臺添加頁、detail.jade(電影詳情)、list.jade(後臺電影列表)的準備，爲了便於觀察，放入基本的信息，用於關聯jade視圖

app.js

var express = require("express");
var app=express();
var path = require('path');



//設置模板引擎
app.set("view engine",'jade');
app.set('views','./views/pages');

//設置靜態資源
app.use(express.static(path.join(__dirname, './public')));


//訪問網站跟目錄：localhost:3000/
app.get("/",function(req,res){
    res.render('index.jade',{
        title:'網站首頁',
        movies:{}
    });
});


//localhost:3000/movie/1
app.get("/movie/:id",function(req,res){
    res.render('detail.jade',{
        title:'電影詳情',
        movie:{}
    })
});


//localhost:3000/admin/add
app.get("/admin/add",function(req,res){
    res.render('control.jade',{
        title:'後臺電影添加頁',
        movie:{}
    });
});


//localhost:3000/admin/list
app.get("/admin/list",function(req,res){
    res.render('list.jade',{
        title:'後臺電影列表',
      movies:{}
    });
});



app.listen(3000,function(){
    console.log("請訪問http://localhost:3000");
});

layout.jade

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

header.jade

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

index.jade、control.jade、detail.jade、list.jade

extends ../layout.jade
block content

四、jade數據僞造

app.js

var express = require("express");
var app=express();
var path = require('path');



//設置模板引擎
app.set("view engine",'jade');
app.set('views','./views/pages');

//設置靜態資源
app.use(express.static(path.join(__dirname, './public')));


//訪問網站跟目錄：localhost:3000/
app.get("/",function(req,res){
    res.render('index.jade',{
        title:'網站首頁',
        movies:[
            {
            _id:1,
            title:"海綿寶寶3D",
            poster: 'http://img31.mtime.cn/mg/2015/11/17/094620.70277104_170X256X4.jpg'
            },
             {
            _id:2,
            title:"星際迷航3",
            poster:'http://img31.mtime.cn/mg/2016/09/01/143653.31713698_170X256X4.jpg'
            },
            {
            _id:3,
            title:"驚天綁架團",
            poster:'http://img31.mtime.cn/mg/2016/07/12/091819.79722823_170X256X4.jpg'
            },
            {
            _id:4,
            title:"愛寵大機密",
            poster:'http://img31.mtime.cn/mg/2016/06/21/093149.12209704_170X256X4.jpg'
            },
             {_id:5,
            title:"冰川時代4",
            poster:'http://img31.mtime.cn/mt/2012/07/19/131845.38602455_170X256X4.jpg'
            }
        ]
    });
});


//localhost:3000/movie/1
app.get("/movie/:id",function(req,res){
    res.render('detail.jade',{
        title:'電影詳情',
        movie:{
        title:'海綿寶寶3D',
        director:'保羅·蒂比特',
        country:'美國', 
        language:'英語',
        year:2016,
        poster:'http://img31.mtime.cn/mg/2015/11/17/094620.70277104_170X256X4.jpg',
        summary:'安東尼奧·班德拉斯飾演的大反派海盜傑克現身，他找到了一本神奇的寶書，但是想要得到徹底的力量，必定要找到書中的最後一頁。通過調查，這寶貴的最後一頁，正存在海綿寶寶的家裏。',
        flash:'#'
        }
    })
});


//localhost:3000/admin/add
app.get("/admin/add",function(req,res){
    res.render('control.jade',{
        title:'後臺電影添加頁',
        movie:{
            title:'',
            director:'',
            country:'', 
            language:'',
            year:'',
            poster:'',
            summary:'',
            flash:''
        }
    });
});


//localhost:3000/admin/list
app.get("/admin/list",function(req,res){
    res.render('list.jade',{
        title:'後臺電影列表',
      movies:[
        {
            _id:1,
            title:'海綿寶寶3D',
            director:'保羅·蒂比特'
        }
      ]
    });
});




app.listen(3000,function(){
    console.log("請訪問http://localhost:3000");
});

View Code

index.jade

extends ../layout.jade
block content
 .container
    .row
        each item in movies
           .col-md-2
             .thumbnall
                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}") 查看詳情

View Code

detail.jade

extends ../layout.jade
block content
    .container
        .row
            .col-md-7
                video(src="#{movie.flash}",autoplay="true",width="720",height="400")
            .col-md-5
                dl.dl-horizontal
                    dt 電影名字
                    dd=movie.title
                    dt 導演
                    dd=movie.director
                    dt 國家
                    dd=movie.country
                    dt 上映年份
                    dd=movie.year
                    dt 簡介
                    dd=movie.summary

View Code

list.jade

extends ../layout.jade
block content
    .container
        .row
            table.table.table-hover.table-bordered
                thead
                    tr
                        th 電影名字
                        th 導演
                        th 查看
                        th 更新
                        th 刪除
                tbody
                    each item in movies
                        tr
                            td #{item.title}
                            td #{item.director}
                            td: a(target="_blank",href="../movie/#{item._id}") 查看
                            td: a(target="_blank",href="../movie/update/#{item._id}") 修改
                            td 
                                a.btn.btn-danger.del(type="button",href="/admin/delete?id=#{item._id}") 刪除

View Code

control.jade

extends ../layout.jade
block content
    .container
        .row
            form.form-horizontal(method="post",action="/admin/movie/do")
                //電影名字
                .form-group
                    label.col-sm-2.control-label(for="inputTitle") 電影名字：
                    .col-sm-10
                        input#inputTitle.form-control(type="text",name="movie[title]",value="#{movie.title}")
                 //導演
                .form-group
                    label.col-sm-2.control-label(for="inputTitle") 導演：
                    .col-sm-10
                        input#inputDirector.form-control(type="text",name="movie[director]",value="#{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]",value="#{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]",value="#{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[year]",value="#{movie.year}")
                //簡介
                .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]",value="#{movie.summary}")
                .form-group
                    .col-sm-2
                    .col-sm-10
                        input.btn.btn-default(type="submit",name="submit")