NodeJs Express MySQL 搭建电影网站:第一期(搭建Express项目、路由构建、jade 页面构建和模拟数据)

效果展示：

首页：

详情页面:

 

后台：电影添加页面

 

后台：电影列表

第一步：创建movie 应用

express movie

第二步：movie应用依赖第三方模块（MySQL + body-parser）

cnpm install mysql

cnpm install body-parser

编辑package.json 文件

{
  "name": "movie",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "jade": "~1.11.0",
    "morgan": "~1.9.0",
	"mysql": "~2.16.0",
	"body-parser": "~1.18.3"
  }
}

第三步：编辑相关页面路由信息，并填充模拟数据

编辑movie/routes/index.js 文件

var express = require('express');
var router = express.Router();

//访问网站跟目录：localhost:3000/
router.get('/', function(req, res, next) {
   res.render('index.jade',{
        title:'网站首页',
        movies:[
            {
            _id:1,
            title:"惊奇队长 Captain Marvel (2019)",
            poster: 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2548870813.webp'
            },
             {
            _id:2,
            title:"绿皮书 Green Book (2018)",
            poster:'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2549177902.webp'
            },
            {
            _id:3,
            title:"海王 Aquaman (2018)",
            poster:'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2541280047.webp'
            }
        ]
    });
});

//localhost:3000/movie/1
router.get("/movie/:id",function(req,res){
    res.render('detail.jade',{
        title:'电影详情',
        movie:{
        title:'惊奇队长 Captain Marvel (2019)',
        director:' 安娜·波顿 / 瑞安·弗雷克',
        country:'美国', 
        language:'英语',
        year:2018,
        poster:'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2548870813.webp',
        summary:'漫画中的初代《惊奇女士》原名Carol Danvers，她曾经是一名美国空军情报局探员，暗恋惊奇先生。此后她得到了超能力，成为《惊奇女士》，在漫画中是非常典型的女性英雄人物。' + 
　　'她可以吸收并控制任意形态的能量，拥有众多超能力。《惊奇队长》将是漫威首部以女性超级英雄为主角的电影。',
        flash:'#'
        }
    })
});


//localhost:3000/admin/add
router.get("/admin/add",function(req,res){
    res.render('control.jade',{
        title:'后台电影添加页',
        movie:{
            title:'',
            director:'',
            country:'', 
            language:'',
            year:'',
            poster:'',
            summary:'',
            flash:''
        }
    });
});


//localhost:3000/admin/list
router.get("/admin/list",function(req,res){
    res.render('list.jade',{
        title:'后台电影列表',
      movies:[
        {
            _id:1,
            title:'惊奇队长',
            director:'安娜·波顿 / 瑞安·弗雷克'
        }
      ]
    });
});



module.exports = router;

第四步：编辑相关页面

在movie/views文件夹下新增如下文件：index.jade、detail.jade、list.jade、control.jade

index.jade:

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

detail.jade

extends ./layout.jade
block content
    .container
        .row
            .col-md-7
                video(src="#{movie.poster}",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

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

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")

相关项目结构：

源码地址：