NodeJs Express MySQL 搭建电影网站:第二期(MySQL 数据增删改查操作)

淩亂°似流年 2023-10-18 16:31 32阅读 0赞

第一步：编辑相关页面路由信息，使用MySQL填充数据

编辑movie/routes/index.js 文件

第二步：编辑相关页面

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

control.jade:

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

detail.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}") 查看详情

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

第三步：在movie文件夹下，创建MySQL数据库模板(db.js)

//student 文件夹下
    var mysql=require("mysql");
    const DB={	    
    	host : '127.0.0.1',	    
    	user : 'root',	    
    	password : '123456',   
    	database : 'movie'
    }
    const DBConnection=mysql.createConnection({
    	    host:DB.host,	    
    	    user:DB.user,
    	    password:DB.password,
    	    database:DB.database,
    	    multipleStatements:true
    });
    DBConnection.connect();
    module.exports.DBConnection=DBConnection;

项目结构图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

项目源码地址:[https://github.com/zhouzhiwengang/express-demon/tree/master/movie][https_github.com_zhouzhiwengang_express-demon_tree_master_movie]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190331233756431.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[https_github.com_zhouzhiwengang_express-demon_tree_master_movie]: https://github.com/zhouzhiwengang/express-demon/tree/master/movie