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

迈不过友情╰ 2023-10-18 16:31 55阅读 0赞

效果展示：

首页：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

详情页面:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1][]

后台：电影添加页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 2][]

后台：电影列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 3][]

第一步：创建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 文件

第四步：编辑相关页面

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