node.js + mongodb 做项目的详解（二）

这次内容是结合bootstrap把登陆注册做好，还有就是express的中间件等问题。

看这篇博客之前建议先看我上篇写的那篇博客
http://www.cnblogs.com/hubwiz/p/4118083.html

第一步

当然还是准备工作了，在bootstrap官网下载好需要的东西了，怎么用官网已经写的很详细，在这就不细说了。
下载地址：http://v3.bootcss.com/getting-started/

直接上代码吧。

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>

 <!DOCTYPE html>

 <html>

 <head>

     <title><%= title %></title>

     <link rel='stylesheet' href='/stylesheets/style.css'/>

     <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

     <style type="text/css">

         .row {

             margin-top: 110px;

             margin-bottom: 40px;

         }

         #login-user {

             margin-top: 20px;

         }

         .footer {

             margin-top: 60px;

             border-top: 1px solid #CCCCCC;

             background-color: #f5f5f5;

         }

     </style>

 </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 class="action"><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>

 <div class="container">

     <div class="row">

         <div class="col-md-3 col-md-offset-2">

             <img src="/images/login.png"/>

         </div>

         <div class="panel panel-default col-md-4 col-md-offset-2">

             <div class="panel-body" id="login-user">

                 <form class="form-horizontal" role="form" action="ucenter/login" method="post">

                     <p>账号登录</p>

                     <div class="form-group">

                         <input type="text" class="form-control" id="name" name="name" placeholder="Email">

                     </div>

                     <div class="form-group">

                         <input type="password" class="form-control" id="password" name="password"

                                placeholder="Password">

                     </div>

                     <div class="form-group">

                         <div class="checkbox">

                             <label>

                                 <input type="checkbox"> 记住我

                             </label>

                         </div>

                     </div>

                     <div class="form-group">

                         <input type="submit" class="btn btn-success btn-lg btn-block" value="登录">

                     </div>

                 </form>

             </div>

         </div>

     </div>

 </div>

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

 <script src="/javascripts/bootstrap.min.js"></script>

 </body>

 </html>

 <!DOCTYPE html>

 <html>

 <head>

     <title><%= title %></title>

     <link rel='stylesheet' href='/stylesheets/style.css'/>

     <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

     <style type="text/css">

         .row {

             margin-top: 110px;

             margin-bottom: 40px;

         }

         #login-user {

             margin-top: 20px;

         }

         .footer {

             margin-top: 60px;

             border-top: 1px solid #CCCCCC;

             background-color: #f5f5f5;

         }

     </style>

 </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 class="action"><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>

 <div class="container">

     <div class="row">

         <div class="col-md-3 col-md-offset-2">

             <img src="/images/login.png"/>

         </div>

         <div class="panel panel-default col-md-4 col-md-offset-2">

             <div class="panel-body" id="login-user">

                 <form class="form-horizontal" role="form" action="ucenter/register" method="post">

                     <p>账号注册</p>

                     <div class="form-group">

                         <input type="text" class="form-control" id="name" name="name" placeholder="Email">

                     </div>

                     <div class="form-group">

                         <input type="password" class="form-control" id="password" name="password"

                                placeholder="Password">

                     </div>

                     <div class="form-group">

                         <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"

                                placeholder="Password">

                     </div>

                     <div class="form-group">

                         <div class="checkbox">

                             <label>

                                 <input type="checkbox"> 记住我

                             </label>

                         </div>

                     </div>

                     <div class="form-group">

                         <input type="submit" class="btn btn-success btn-lg btn-block" value="注册">

                     </div>

                 </form>

             </div>

         </div>

     </div>

 </div>

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

 <script src="/javascripts/bootstrap.min.js"></script>

 </body>

 </html>

静态资源引用对就没有什么问题了。

截个图看看效果：

第二步
就是登陆和注册了

写在router文件中
index.js

/*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://www.hubwiz.com/coursecenter 中的express课程
其中有详细的做法。

第三步

就是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);

这段代码可以再connect-mongo github中看到。

代码还没有整理好，就没有传到github上，请随时关注我的博客。
好了，结束。

node.js + mongodb 做项目的详解（二）的更多相关文章

node.js + mongodb 做项目的详解（一）
想写博客很长时间了,因为一直身患懒癌,所以一直拖到了现在.markdown的语法也是刚刚学,试验一下效果好了不说了,直接上干货了.----------------------------------- ...
8 步搭建 Node.js + MongoDB 项目的自动化持续集成
任何事情超过 90 秒就应该自动化,这是程序员的终极打开方式.Automating shapes smarter future. 这篇文章中,我们通过创建一个 Node.js + MongoDB 项目 ...
Node.JS + MongoDB技术浅谈
看到一个Node.JS + MongoDB的小样例,分享给大家.魔乐科技软件学院(www.mldnjava.cn)的讲座 Node.JS + MongoDB技术讲座云计算 +大数据 ...
AngularJS + Node.js + MongoDB开发
AngularJS + Node.js + MongoDB开发的基于位置的通讯录(by vczero) 一.闲扯有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包 ...
node.js+mongodb 爬虫
demo截图: 本demo爬瓜子二手车北京区的数据 (注:需要略懂 node.js / mongodb 不懂也没关系因为我也不懂啊~~~) 之所以选择爬瓜子二手车网站有两点: 一.网站无需登录,少做 ...
MongoDB各种查询操作详解
这篇文章主要介绍了MongoDB各种查询操作详解,包括比较查询.关联查询.数组查询等,需要的朋友可以参考下一.find操作 MongoDB中使用find来进行查询,通过指定find的第一个参数可 ...
《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想
总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...
用Node.JS+MongoDB搭建个人博客（页面模板）（五）（结束）
<差不多先生> 我是差不多先生,我的差不多是天生.也代表我很天真,也代表我是个闲人.这差不多的人生,总是见缝插针. 求学的道路上总是孤独的,即使别人不理解我,认为我是奇葩!但没关系,我会坚 ...
开源项目MultiChoiceAdapter详解（三）——MulitChoiceNormalArrayAdapter的使用
MulitChoiceNormalArrayAdapter是我自己定义的一个类,其实就是实现了MulitChoiceArrayAdapter,为什么做这个简单的实现类呢,因为这样我们在不用Action ...

随机推荐

【手把手教你全文检索】Apache Lucene初探 (zhuan)
http://www.cnblogs.com/xing901022/p/3933675.html *************************************************** ...
httpclient 4种关闭连接
因此这样的配置就会导致每个链接至少要过180S才会被释放,这样在大量请求访问时就必然会造成链接被占满,请求等待的情况. 在通过DEBUH后发现HttpClient在method.releaseConn ...
FreeRTOS 消息队列
以下基础内容转载自安富莱电子: http://forum.armfly.com/forum.php 本章节为大家讲解 FreeRTOS 的一个重要的通信机制----消息队列,初学者要熟练掌握,因为消息 ...
python操作word
python教程(百度经验) Python 操作Word(Excel.PPT等通用) import win32comfrom win32com.client import Dispatch, co ...
HeadFisrt 设计模式03 装饰者
类应该对扩展开放, 对修改关闭. 所谓装饰者模式, 是指用其他的类来装饰某个类, 装饰者说白了就是使用 has-a 来代替 is-a 隐喻咖啡店, 有很多种咖啡, 咖啡里还要增加一些 milk, 面 ...
ComBoFuzzySearch.js
/** * combobox和combotree模糊查询 */(function () { //combobox可编辑,自定义模糊查询 $.fn.combobox.defaults.editable ...
关于SQL高量问题
一工作今天在用DataTable.Table.Select("字段 like")查询时候老是碰到格式不正确 dtrFoundRow = dtvOOView.Table.Select ...
linux -- Ubuntu14.04及之后版本重启网卡不生效
Ubuntu14.04修改配置,重启网卡没有生效,出现如下问题: service networking restart //重启网络服务 stop: Job failed while stopping ...
【BZOJ】1635: [Usaco2007 Jan]Tallest Cow 最高的牛（差分序列）
http://www.lydsy.com/JudgeOnline/problem.php?id=1635 差分序列是个好东西啊....很多地方都用了啊,,, 线性的进行区间操作orz 有题可知 h[a ...
sdut 2158:Hello World!（第一届山东省省赛原题，水题，穷举）
Hello World! Time Limit: 1000MS Memory limit: 65536K 题目描述 We know that Ivan gives Saya three problem ...

node.js + mongodb 做项目的详解（二）

node.js + mongodb 做项目的详解（二）的更多相关文章

随机推荐

热门专题