NodeJs Express MySQL 搭建电影网站:第一期(搭建Express项目、路由构建、jade 页面构建和模拟数据)
熊孩纸
阅读:709
2021-03-31 20:59:33
评论:0
效果展示:
首页:
详情页面:
后台:电影添加页面
后台:电影列表
第一步:创建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")
相关项目结构:
源码地址:
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。