基於Express+MongoDB搭建電影網站(一)

一、前期準備

1.下載node和MongoDB

2. 掌握前端的基礎知識，比如html,css,jquery,js,bootstrap

3.瞭解Express,看看中文文檔

4.瞭解MongoDB,可以先去菜鳥看看

二、創建項目骨架

1.創建項目

1）MyApp

創建一個叫做MyApp的項目，下載它的依賴項目，並啓動服務，在瀏覽器輸入localhost:3000

E:\node\express MyAPP -e
E:\node\cd MyApp && npm install
E:\node\MyApp node ./bin/www

2）bower

在全局安裝bower,官網是這樣介紹

Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.

bower和npm 類似，可理解爲包管理工具

E:\node\MyApp npm install bower -g

用bower下載jquery和bootstrap，下載完成之後我們可以發現，項目中多了一個“bower_components”的文件夾，jquery和bootstrap已經在裏面了

E:\node\MyApp bower install jquery bootstrap

三、創建路由和視圖

1.創建路由

我們搭建的電影網站，需要有首頁、詳情頁、後臺錄入頁、列表頁。打開routes下的index.js添加相應的路由

router.get('/', function(req, res, next) {
  res.render('index', { title: '首頁' });
});
router.get('/movie/:id', function(req, res, next) {
  res.render('detail', { title: '詳情頁' });
});
router.get('/admin/movie', function(req, res, next) {
  res.render('admin', { title: '後臺錄入頁' });
});
router.get('/admin/list', function(req, res, next) {
  res.render('list', { title: '列表頁' });
})

2.創建視圖

在views文件夾下面分別創建以下幾個頁面:detail.ejs、admin.ejs、list.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

3.測試流程

1）開啓服務

如果router這邊修改了，必須要重新啓動服務纔可以刷新；視圖修改了直接在瀏覽器刷新就可以看到效果

E:\node\MyApp node ./bin/www

2）測試流程

地址欄輸入路由，測試頁面是否能正常顯示

localhost:3000

localhost:3000/movie/:1

四、僞造數據

1.修改視圖

1）layout

在views頁面創建pages文件夾，把頁面都放到pages下面；創建layout頁面，裏面創建header.ejs和footer.ejs。因爲很多頁面會有相同的部分，比如頭部和尾部，我們可以把這些放在一個文件夾。在頁面通過 include 引用進去就可以了

header.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
<link rel="stylesheet" type="text/css" href="../bootstrap/dist/css/bootstrap.css">
  </head>
  <body>
  <h2>Mr.Kang</h2>

footer.ejs

  </body>
</html>
<script type="text/javascript" src="../jquery/dist/jquery.js"></script>
<script type="text/javascript" src="../bootstrap/dist/js/bootstrap.js"></script>

2）index.ejs

數據庫中的電影會有很多部，後臺傳給前端頁面，我們可以得到一個movie數組，利用for循環得到電影的信息

<%include ../layout/header.ejs %>
<h2><%=title%></h2>
    <div class="container">
        <div class="row">
            <%for(var i=0;i<movies.length;i++){ %>
            <div class="col-md-2">
                <div class="thumbnail">
                    <a href="/movie/:<%=movies[i]._id%>"><img src="<%=movies[i].poster%>" style="height:120px;width:170px"></a>
                    <div class="caption">
                        <h3><%=movies[i].title%></h3>
                        <p><a href="/movie/:<%=movies[i]._id%>" class="btn btn-primary">歡迎觀看預告片</a></p>
                    </div>
                </div>
            </div>
            <%}%>
        </div>
    </div>
    <%include ../layout/footer.ejs %>

3)detail.ejs

<%include ../layout/header.ejs %>
<div class="container">
    <div class="row">
        <div class="col-md-7">
            <video  src="<%=movie.source%>"  width="685" height="397" controls="controls"></video>
        </div>
        <div class="col-md-5">
            <dl class="dl-horizontal">
                <dt>電影名字</dt>
                <dd><%=movie.title%></dd>
                <dt>導演</dt>
                <dd><%=movie.director%></dd>
                <dt>國家</dt>
                <dd><%=movie.country%></dd>
                <dt>語言</dt>
                <dd><%=movie.language%></dd>
                <dt>上映年份</dt>
                <dd><%=movie.year%></dd>
                <dt>簡介</dt>
                <dd><%=movie.description%></dd>
            </dl>
        </div>
    </div>
</div>
    <%include ../layout/footer.ejs %>

4)admin.ejs

<%include ../layout/header.ejs %>
<div class="container">
    <div class="row">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">電影名字</label>
                <div class="col-sm-10">
                    <input class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">導演</label>
                <div class="col-sm-10">
                    <input class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">國家</label>
                <div class="col-sm-10">
                    <input class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">語言</label>
                <div class="col-sm-10">
                    <input class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">上映年份</label>
                <div class="col-sm-10">
                    <input class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">海報地址</label>
                <div class="col-sm-10">
                    <input class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">簡介</label>
                <div class="col-sm-10">
                    <textarea class="form-control"  rows="8"></textarea>
                </div>
            </div>

            <div class="form-group">
                      <div class="col-sm-10">
                                <button class="btn  btn-primary btn-block btn-lg" type="submit" style="margin-left:196px">提交</button>
                                </div>
                   </div>
        </form>
    </div>
</div>
    <%include ../layout/footer.ejs %>

5)list.ejs

<%include ../layout/header.ejs %>

<div class="container">
    <div class="row">
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>電影名字</th>
                    <th>導演</th>
                    <th>國家</th>
                    <th>上映年份</th>
                    <th>錄入時間</th>
                    <th>操作</th>

                </tr>
            </thead>
            <tbody>
                <%for(var i=0;i<movies.length;i++){ %>
                <tr>
                    <td><%=movies[i].title%></td>
                    <td><%=movies[i].director%></td>
                    <td><%=movies[i].country%></td>
                    <td><%=movies[i].year%></td>
                    <td></td>
                    <td><a href="#" class="btn btn-primary">查看</a>
                     <a href="#" class="btn btn-primary">更新</a>
                    <button class="btn btn-danger">刪除</button></td>
                </tr>
                <%}%>
            </tbody>
        </table>
    </div>
</div>
    <%include ../layout/footer.ejs %>

3.僞造數據

修改路由

在bower_components文件夾下創建images、mv文件夾，分別用來存放圖片資源和電影資源，在裏面放幾張圖片和一個小視頻

index.js

router.get('/', function(req, res, next) {
  res.render('index', {
    title: "首頁",
    movies:[
    {
        title:"國際教育學院校歌",
        _id:1,
        poster:"images/2.jpeg"
    },{
        title:"國際教育學院校歌",
        _id:2,
        poster:"images/2.jpeg"
    },
    {
        title:"國際教育學院校歌",
        _id:3,
        poster:"images/2.jpeg"
    }]
    });
});
router.get('/movie/:id', function(req, res, next) {
  res.render('detail', 
    { title: '詳情頁',
    movie:{
        title:"國際校歌",
        director:"melon",
        country:"中國",
        language:"中文",
        year:"2014",
        description:"國際教育學院是最棒的哈哈",
        source:"../../mv/合唱比賽.MOV"
    }
     });
});
router.get('/admin/movie', function(req, res, next) {
  res.render('admin', { title: '後臺錄入頁' });
});
router.get('/admin/list', function(req, res, next) {
  res.render('list',
         { title: '列表頁',
           movies:[{
            title:"我不是潘金蓮",
            director:'馮小剛',
            country:"中國",
            year:'2016年11月'
           },{
            title:"戰狼",
            director:'吳京',
            country:"中國",
            year:'2014年10月'
           }]
        });
});

4)更改視圖路徑和公共文件存放位置

app.js

app.set('views', path.join(__dirname, 'views/pages'));
app.use(express.static(path.join(__dirname, 'bower_components')));

5）測試流程

首頁

詳情頁

列表頁

假裝不感冒

發佈了40 篇原創文章 · 獲贊 87 · 訪問量 13萬+

私信關注