node.js + mongodb 作項目的詳解（二）

時間 2019-12-11

標籤 node.js node mongodb 項目詳解欄目 Node.js 简体版

原文原文鏈接

此次內容是結合bootstrap把登錄註冊作好，還有就是express的中間件等問題。javascript

看這篇博客以前建議先看我上篇寫的那篇博客
http://www.cnblogs.com/hubwiz/p/4118083.htmlcss

第一步html

固然仍是準備工做了，在bootstrap官網下載好須要的東西了，怎麼用官網已經寫的很詳細，在這就不細說了。
下載地址：http://v3.bootcss.com/getting-started/java

直接上代碼吧。jquery

index.html

<!DOCTYPE html>
<html>
<head>
    <title>吃貨</title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<header class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">
                <!--<img alt="Brand" src="...">-->
                <p>吃貨</p>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="login">登陸</a></li>
                <li><a href="register">註冊</a></li>
            </ul>
            <form class="navbar-form left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
</header>

<script src="/javascripts/jquery-2.1.1.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
</body>
</html>

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title><%= title %></title>
 5     <link rel='stylesheet' href='/stylesheets/style.css'/>
 6     <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
 7     <style type="text/css">
 8         .row {
 9             margin-top: 110px;
10             margin-bottom: 40px;
11         }
12 
13         #login-user {
14             margin-top: 20px;
15         }
16 
17         .footer {
18             margin-top: 60px;
19             border-top: 1px solid #CCCCCC;
20             background-color: #f5f5f5;
21         }
22     </style>
23 </head>
24 <body>
25 <header class="navbar navbar-default navbar-fixed-top" role="navigation">
26     <div class="container">
27         <div class="navbar-header">
28             <a class="navbar-brand" href="/">
29                 <!--<img alt="Brand" src="...">-->
30                 <p>吃貨</p>
31             </a>
32         </div>
33         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
34             <ul class="nav navbar-nav navbar-right">
35                 <li class="action"><a href="login">登陸</a></li>
36                 <li><a href="register">註冊</a></li>
37             </ul>
38             <form class="navbar-form left" role="search">
39                 <div class="form-group">
40                     <input type="text" class="form-control" placeholder="Search">
41                 </div>
42                 <button type="submit" class="btn btn-default">Submit</button>
43             </form>
44         </div>
45     </div>
46 </header>
47 
48 <div class="container">
49     <div class="row">
50         <div class="col-md-3 col-md-offset-2">
51             <img src="/images/login.png"/>
52         </div>
53         <div class="panel panel-default col-md-4 col-md-offset-2">
54             <div class="panel-body" id="login-user">
55                 <form class="form-horizontal" role="form" action="ucenter/login" method="post">
56                     <p>帳號登陸</p>
57                     <div class="form-group">
58                         <input type="text" class="form-control" id="name" name="name" placeholder="Email">
59                     </div>
60                     <div class="form-group">
61                         <input type="password" class="form-control" id="password" name="password"
62                                placeholder="Password">
63                     </div>
64                     <div class="form-group">
65                         <div class="checkbox">
66                             <label>
67                                 <input type="checkbox"> 記住我
68                             </label>
69                         </div>
70                     </div>
71                     <div class="form-group">
72                         <input type="submit" class="btn btn-success btn-lg btn-block" value="登陸">
73                     </div>
74                 </form>
75             </div>
76         </div>
77     </div>
78 </div>
79 
80 <script src="/javascripts/jquery-2.1.1.min.js"></script>
81 <script src="/javascripts/bootstrap.min.js"></script>
82 </body>
83 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title><%= title %></title>
 5     <link rel='stylesheet' href='/stylesheets/style.css'/>
 6     <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
 7     <style type="text/css">
 8         .row {
 9             margin-top: 110px;
10             margin-bottom: 40px;
11         }
12 
13         #login-user {
14             margin-top: 20px;
15         }
16 
17         .footer {
18             margin-top: 60px;
19             border-top: 1px solid #CCCCCC;
20             background-color: #f5f5f5;
21         }
22     </style>
23 </head>
24 <body>
25 <header class="navbar navbar-default navbar-fixed-top" role="navigation">
26     <div class="container">
27         <div class="navbar-header">
28             <a class="navbar-brand" href="/">
29                 <!--<img alt="Brand" src="...">-->
30                 <p>吃貨</p>
31             </a>
32         </div>
33         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
34             <ul class="nav navbar-nav navbar-right">
35                 <li><a href="login">登陸</a></li>
36                 <li class="action"><a href="register">註冊</a></li>
37             </ul>
38             <form class="navbar-form left" role="search">
39                 <div class="form-group">
40                     <input type="text" class="form-control" placeholder="Search">
41                 </div>
42                 <button type="submit" class="btn btn-default">Submit</button>
43             </form>
44         </div>
45     </div>
46 </header>
47 
48 <div class="container">
49     <div class="row">
50         <div class="col-md-3 col-md-offset-2">
51             <img src="/images/login.png"/>
52         </div>
53         <div class="panel panel-default col-md-4 col-md-offset-2">
54             <div class="panel-body" id="login-user">
55                 <form class="form-horizontal" role="form" action="ucenter/register" method="post">
56                     <p>帳號註冊</p>
57                     <div class="form-group">
58                         <input type="text" class="form-control" id="name" name="name" placeholder="Email">
59                     </div>
60                     <div class="form-group">
61                         <input type="password" class="form-control" id="password" name="password"
62                                placeholder="Password">
63                     </div>
64                     <div class="form-group">
65                         <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
66                                placeholder="Password">
67                     </div>
68                     <div class="form-group">
69                         <div class="checkbox">
70                             <label>
71                                 <input type="checkbox"> 記住我
72                             </label>
73                         </div>
74                     </div>
75                     <div class="form-group">
76                         <input type="submit" class="btn btn-success btn-lg btn-block" value="註冊">
77                     </div>
78                 </form>
79             </div>
80         </div>
81     </div>
82 </div>
83 
84 <script src="/javascripts/jquery-2.1.1.min.js"></script>
85 <script src="/javascripts/bootstrap.min.js"></script>
86 </body>
87 </html>

靜態資源引用對就沒有什麼問題了。git

截個圖看看效果：github

第二步
就是登錄和註冊了mongodb

寫在router文件中
index.jsexpress

/*ucenter-登陸*/
router.post('/ucenter/login', function (req, res) {
    user.findOne({name: req.body.name}, function (err, data) {
        if (data.name === req.body.name && data.password ===  req.body.password) {
             console.log(req.body.name + '登錄成功' + new Date());
             res.render('ucenter', {title: 'ucenter'});
        } else {
             console.log(err);
             res.send(500);
        }
   });
});

/*ucenter-註冊*/
router.post('/ucenter/register', function (req, res) {
    user.findOne({name: req.body.name}, function (err, docs) {
        if (err)
            console.log(err);
        else if (!docs) {
            user.create({
                name: req.body.name,
                password: req.body.password
            }, function (err, doc) {
                if (err)
                    console.log(err);
                else
                    console.log(doc);
            });
            res.render('ucenter', {title: 'ucenter'});
        }
    })
});

頁面中表單提交就用的action，沒有用Ajax，這裏爲了方便講解，若是你寫用Ajax請求的寫法
請看：http://***/coursecenter 中的express課程
其中有詳細的作法。bootstrap

第三步

就是express的session問題了

在express 4.0以前的版本，像session之類的中間件是伴隨express自動安裝的，
網上有的教程使用的express版本正是4.0以前的版本，因此在使用4.0及其以後版本的時候必定要注意這點。

這是在實現mongodb回話組建connect-mongo時須要的。

With express4:

var session    = require('express-session');
var MongoStore = require('connect-mongo')(session);

app.use(session({
    secret: settings.cookie_secret,
    store: new MongoStore({
      db : settings.db,
    })
  }));
With express<4:

var express = require('express');
var MongoStore = require('connect-mongo')(express);

app.use(express.session({
    secret: settings.cookie_secret,
    store: new MongoStore({
      db: settings.db
    })
  }));
With connect:

var connect = require('connect');
var MongoStore = require('connect-mongo')(connect);