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

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

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

register

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

 
 

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

  1. 8 步搭建 Node.js + MongoDB 项目的自动化持续集成

    任何事情超过 90 秒就应该自动化,这是程序员的终极打开方式.Automating shapes smarter future. 这篇文章中,我们通过创建一个 Node.js + MongoDB 项目 ...

  2. 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想

    总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...

  3. Node.JS + MongoDB技术浅谈

    看到一个Node.JS + MongoDB的小样例,分享给大家.魔乐科技软件学院(www.mldnjava.cn)的讲座 Node.JS + MongoDB技术讲座          云计算 +大数据 ...

  4. AngularJS + Node.js + MongoDB开发

    AngularJS + Node.js + MongoDB开发的基于位置的通讯录(by vczero) 一.闲扯 有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包 ...

  5. 用Node.JS+MongoDB搭建个人博客(页面模板)(五)(结束)

    <差不多先生> 我是差不多先生,我的差不多是天生.也代表我很天真,也代表我是个闲人.这差不多的人生,总是见缝插针. 求学的道路上总是孤独的,即使别人不理解我,认为我是奇葩!但没关系,我会坚 ...

  6. node.js+mongodb 爬虫

    demo截图: 本demo爬瓜子二手车北京区的数据 (注:需要略懂 node.js / mongodb 不懂也没关系 因为我也不懂啊~~~) 之所以选择爬瓜子二手车网站有两点: 一.网站无需登录,少做 ...

  7. CentOS 7部署Node.js+MongoDB:在VPS上从安装到Hello world

    写好代码,花钱买了VPS,看着Charges一直上涨却无从下手?记一位新手司机从购买VPS到成功访问的过程 0.购买VPS 首先,选择VPS提供商,部署一个新的服务器(Deploy New Serve ...

  8. 用Node.JS+MongoDB搭建个人博客(安装环境)(一)

    Node.JS是什么? Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Nod ...

  9. 用Node.JS+MongoDB搭建个人博客(成品展示)

    在博客里可以随意畅写和分享自己喜欢的技术,和网友分享知识也是一种提升.根据自己所发表的博客也能更加加深印象. 与此同时写博客也可以提高自己的写作能力(虽然不咋地),但我相信博客只会越写越有质量的. 博 ...

随机推荐

  1. hdu 4965 Fast Matrix Calculation(矩阵高速幂)

    题目链接.hdu 4965 Fast Matrix Calculation 题目大意:给定两个矩阵A,B,分别为N*K和K*N. 矩阵C = A*B 矩阵M=CN∗N 将矩阵M中的全部元素取模6,得到 ...

  2. SWTBOK实践测试系列(2) --您将提交测试开发者版本号打回来了?

    开发商斗争非常多晚,提交测试的最终版本. 它们可以缓和.但噩耗传来很快,软件没有通过预测试测试团队(为了确保在测试过程,开发者提交的代码验证的基本功能或业务流程).开发王经理.快速找到负责预测试试验张 ...

  3. 更多RANK37

    By LTL 经过对BDG长期的观察得出的这套理论,希望能对大家学习OI有所帮助. 入门篇 首先在掌握一门语言时(P,C都无所谓的),假设不习惯指针能够直接无视.语言之中对于入门选手来说最重要的递归. ...

  4. emacs quick open and jump file (or buffer) which name is current word

    Sometime, we need to open a file or buffer which name begin with current word in emacs. Here I give ...

  5. HDU 3366 Passage (概率DP)

    Passage Problem Description Bill is a millionaire. But unfortunately he was trapped in a castle. The ...

  6. 2014年辛星全然解读html第八节

    经过前面七节的学习,我感觉大家的HTML的功底也差点儿相同了,并且我特别的删去了某些东西,比方框架,假设回到几年前,那么框架是很流行的,可是如今都到了2014年了,这些东西早就该被遗忘了,因此,我果断 ...

  7. 很酷的CSS3仿Facebook登录表单

    原文:很酷的CSS3仿Facebook登录表单 今天看到一款很不错的CSS3登录表单,外观是仿Facebook的登录表单,还挺不错的,另外也支持简单的表单输入框验证.下图是表单的效果图: 我们也可以在 ...

  8. Php面向对象 – 继承和重写

    Php面向对象 – 继承和重写 承受: php于,通过类.使用特殊的经营宗旨. 通过定义类,采用extends来表示当前的类对象继承该类的对象. 样例: class C { public  $p_c  ...

  9. 线程问题、异常处理、自定义URL

    线程问题.异常处理.自定义URL   本节又带了一些常用的,却很难理解的问题,本节从文件上传功能的实现引出了线程使用,介绍了线程饥饿的解决方法,异常处理方法,了解RouteTable自定义路径 . 系 ...

  10. FFmpeg 协议初步学习

    typedef struct URLContext { const AVClass *av_class; /**< information for av_log(). Set by url_op ...