node.js + mongodb 做项目的详解（二）
这次内容是结合bootstrap把登陆注册做好，还有就是express的中间件等问题。
看这篇博客之前建议先看我上篇写的那篇博客
http://www.cnblogs.com/hubwiz/p/4118083.html
第一步
当然还是准备工作了，在bootstrap官网下载好需要的东西了，怎么用官网已经写的很详细，在这就不细说了。
下载地址：http://v3.bootcss.com/getting-started/
直接上代码吧。
<!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
<!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
静态资源引用对就没有什么问题了。
截个图看看效果：
第二步
就是登陆和注册了
写在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 ...
随机推荐
- centos7系统nginx下phalcon环境搭建
之前我们采用的是Apache服务器,可是每秒响应只能达到2000,听说nginx可以轻易破万, 于是换成nginx试试. phalcon的官网有nginx重写规则的示例,可是却与apache的不一致, ...
- hive 和Hbase的pom文件
<hadoop-common></hadoop-common> <hadoop-hdfs></hadoop-hdfs> <dependency&g ...
- 记一次线上Kafka消息堆积踩坑总结
2018年05月31日 13:26:59 xiaoguozi0218 阅读数:2018更多 个人分类: 大数据 年后上线的系统,与其他业务系统的通信方式采用了第三代消息系统中间件Kafka.由于是 ...
- easyui datagrid columns 如何取得json 内嵌对象（many-to-one POJO class）
http://www.iteye.com/problems/44119 http://hi.baidu.com/lapson_85/item/7733586e60b08500a1cf0f8d ———— ...
- jQuery 插件设置cookie
对cookies的操作在当访问一个网站就无时无刻的都伴随着我们,记录着我们的一举一动,并将不危害用户隐私的信息,将以保存,这样用户就不用去从新再次操作重复的步骤,这样大大方便了客户,也增加了客户对网站 ...
- jenkins环境搭建&配置（二）
Jenkins介绍: Jenkins用于监控持续重复的工作,功能包括: 1.持续的软件版本发布/测试项目. 2.监控外部调用执行的工作. 安装环境: 操作系统:linux(centOS) 软件:jdk ...
- 003很好的网络博客（TCP/IP）-很全
http://www.cnblogs.com/obama/p/3292335.html 很全的计算机网络方面的资料.
- 小结：STL
概要: c++的stl是个神奇的东西,需要好好学习. 技巧及注意: lower_bound是第一个大于等于要查找值 upper_bound是第一个大于要查找的值 stl中的容器中的比较几乎全都用< ...
- VC++ Splash Window封装类CSplash
Splash.h 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 ...
- 探索PowerShell----函数
http://marui.blog.51cto.com/1034148/294775/