node.js + mongodb

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

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

第一步

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

直接上代码吧。

index.html

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

<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>

<!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="/">

<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>

 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>

#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="/">

<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>

 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>

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

截个图看看效果：

第二步
就是登陆和注册了

写在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上，请随时关注我的博客。
好了，结束。

标签: Nodejs, mongodb, mongoose, node, node.js, express

node.js + mongodb的更多相关文章

8 步搭建 Node.js + MongoDB 项目的自动化持续集成
任何事情超过 90 秒就应该自动化,这是程序员的终极打开方式.Automating shapes smarter future. 这篇文章中,我们通过创建一个 Node.js + MongoDB 项目 ...
《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想
总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...
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搭建个人博客（页面模板）（五）（结束）
<差不多先生> 我是差不多先生,我的差不多是天生.也代表我很天真,也代表我是个闲人.这差不多的人生,总是见缝插针. 求学的道路上总是孤独的,即使别人不理解我,认为我是奇葩!但没关系,我会坚 ...
node.js+mongodb 爬虫
demo截图: 本demo爬瓜子二手车北京区的数据 (注:需要略懂 node.js / mongodb 不懂也没关系因为我也不懂啊~~~) 之所以选择爬瓜子二手车网站有两点: 一.网站无需登录,少做 ...
CentOS 7部署Node.js+MongoDB：在VPS上从安装到Hello world
写好代码,花钱买了VPS,看着Charges一直上涨却无从下手?记一位新手司机从购买VPS到成功访问的过程 0.购买VPS 首先,选择VPS提供商,部署一个新的服务器(Deploy New Serve ...
用Node.JS+MongoDB搭建个人博客（安装环境）（一）
Node.JS是什么? Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Nod ...
用Node.JS+MongoDB搭建个人博客（成品展示）
在博客里可以随意畅写和分享自己喜欢的技术,和网友分享知识也是一种提升.根据自己所发表的博客也能更加加深印象. 与此同时写博客也可以提高自己的写作能力(虽然不咋地),但我相信博客只会越写越有质量的. 博 ...

随机推荐

n每个计数的概率和发生骰子--动态规划
称号:该n骰子在地板上.所有点骰子的向上一面和一个S.进入n,打印S所有可能的值的概率. 声明思想非原创!仅仅因动态规划思想的使用非常好,记下. 分析:动态规划就是分阶段考虑问题.给出变量.找出相邻阶 ...
C++虚函数表分析
在<<反C++>>文中提到的 VC6.0 上的编译器支持一个d1reportAllClassLayout的开关, 能够输出全部对象的内存布局信息, 我自己经常使用vs2005来 ...
atitit.无损传输二进制数据串传输网络
atitit.无损传输二进制数据串传输网络 1. gbk的网络传输问题,为什么gbk不能使用来传输二进制数据 1 2. base64 2 3. iso-8859-1 (推荐) 2 4. utf-8 ...
HTC T328W刷机包仿三星S5 UI美化精简 S5落下
ROM介绍 1.三星移植TouchWiz接口; 2.三星增加S4壁纸和图标美化; 3.正确ROM呈流线型; 4.正确ROM优化; 5.完成ROOT权限; 6.短信支持来信息亮屏功能(在短信设置里设置) ...
krpano漫游加方向性3D声音（这篇文章已被移到krpano中国网站 krpano360.com）
需求: 在场景转换视角时.会出现不同方位的声音以及对应的音量变化,也即是将声音视作hotspot.当视角转到该声音热点时,也随之听到声音.官方样例:点击打开链接本文已经搬迁到下述网址.请点 ...
Chromium Graphics Update in 2014（滑动）
原创文章,转载请注明为链接原始来源对于http://blog.csdn.net/hongbomin/article/details/40897433. 摘要:Chromium图形栈在2014年有多项改 ...
Poj 3517 And Then There Was One Joseph核心问题
基本上纯Joseph核心问题,只是第一步多一件.m. 然后你就可以用获得的递推公式: Win(n) 代表n当个人的中奖号码, 然后,Win(n)必须相等Win(n-1).当一个人将在下一次删除队列. ...
ReactJs入门思路
ReactJs入门思路小指南原文 http://segmentfault.com/blog/fakefish/1190000002449277 React是怎么搞的? React中,把一切东西都看 ...
WCF中的数据契约（DataContract）
服务契约定义了远程访问对象和可供调用的方法,数据契约则是服务端和客户端之间要传送的自定义数据类型. 一旦声明一个类型为DataContract,那么该类型就可以被序列化在服务端和客户端之间传送,如下所 ...
Android开发之控制Toast的开启与关闭
开发这个程序之前先解释一下,为什么Toast信息提示框在显示一定时间后会自己主动消失?由于在Android系统中有一个Toast队列,系统会依次从这个队列中取出一个Toast,并显示它.在显示了指定时 ...

node.js + mongodb

node.js + mongodb

node.js + mongodb的更多相关文章

随机推荐

热门专题