node+mongodb 简单注册页面
1.开发框架的选用
开发框架.png
2、项目需求
实现一个简单注册页面，保存用户数据到mongondb数据库中
3、项目框架搭建
方法1：自己创建一个工程目录，然后到工程目录执行下面安装命令
npm install express // 后台开发第三方
npm install mongoose //数据库管理
npm install moment // 时间处理的js
npm install bower -g Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源
bower install bootstrap // html第三方框架
新版express4中，要独立安装static，npm install serve-static --save
bodyParser 已经不再与Express捆绑，需要独立安装。
令行执行：npm install body-parser
grunt相关安装，注意需要在工程目录使用npm init生产package.json
npm install grunt -g
npm install grunt-cli -g
npm install grunt-contrib-watch --save-dev //只有有文件修改，就会重新执行注册好的任务
npm install grunt-nodemon --save-dev // 实时监听app.js 自动重启
npm install grunt-concurrent --save-dev
2、使用express-generator来初始化项目
首先安装node.js
brew install node
然后全局安装express
npm install -g express
安装express-generator，全局安装-g
npm install -g express-generator
创建一个项目，我们用的ejs模板，创建命令如下
express -e loginWebApp
-e表示使用ejs模板，loginWebApp为项目的名字
3、到项目目录中执行npm install就把需要第三方依赖安装好
另外需要安装mongoose数据库操作第三方和Promise第三方bluebird
npm install bluebird
npm install mongoose
4、项目结构的简单说明
项目结构.png
1、<strong>app.js</strong>:服务器启动的入口文件，在这里编写服务器的逻辑
2、<strong>models</strong>:数据库操作的models
3、<strong>node_modules</strong>:依赖的第三方模块
4、<strong>package.json</strong>: 此文件是项目的配置文件（可定义应用程序名，版本，依赖项等等）
5、<strong>public</strong>:images、javascripts、stylesheets，存放一些静态资源
6、<strong>routes</strong>:存放路由文件
7、<strong>schemas</strong>:存放数据库抽象模式
8、<strong>views</strong>:存放视图
5、编写服务代码
1、创建app对象和mogoose
创建一个app对象
var express = require('express');
var app = express();
// 数据库相关
var mongoose = require('mongoose')
mongoose.Promise = require('bluebird');
2、设置views路径和模板引擎
//设定视图路径主要清楚__dirname的意思就可以了，它是node.js中的全局变量，表示取当前执行文件的路径
app.set('views', path.join(__dirname, 'views'));
//设定视图引擎模板
app.set('view engine', 'ejs');
3、使用app.use([path], function)方法来使用中间件path为路径，function·为中间件
//这一句中可能要注意一下，express.static()是处理静态请求的，
//设置了public文件，public下所有文件都会以静态资料文件形式返回
//（如样式、脚本、图片素材等文件）
app.use(express.static(path.join(__dirname, 'public')));
//上面代码表示当用户使用/访问时，调用routes，即routes目录下的index.js文件，
//其中.js后缀省略，用/users访问时，调用routes目录下users.js文件
var routes = require('./routes/index');
var users = require('./routes/users');
app.use('/', routes);
app.use('/users', users);
4、看下index.js主要的路由代码
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;```
5、编写数据库的操作模式
var mongoose = require('mongoose')
var Schema = mongoose.Schema
var UserSchema = new Schema({
username:String,
password:String
})
module.exports = UserSchema
转为User模型
var mongoose = require('mongoose')
var UserSchema = require('../schemas/UserSchema')
var User = mongoose.model('User',UserSchema)
module.exports = User;
6、注册路由编写，get为获取注册页面，post处理表单的提交保存用户数据到数据库
var express = require('express')
var router = express.Router()
var User = require('../models/User')
var crypto = require('crypto')
router.get('/',function(req,res){
res.render('register')
})
router.post('/',function(req,res){
console.log(req.body.username);
console.log(req.body.password);
var password = req.body.password
//加密
var md5 = crypto.createHash('md5')
var md5_pwd = md5.update(password).digest('hex')
var user = new User({
username:req.body.username,
password: md5_pwd
});
// 检查是否有用户存在
User.find({'username':req.body.username},function(err,result){
if(err){
res.locals.error=err;
res.render('register')
return;
}
if(result.length>0){
res.locals.error='用户已存在';
console.log('test is result ' + res)
res.render('register')
}
else {
user.save(function(err,result){
if(err){
res.locals.error=err;
res.render('register')
}else {
res.locals.success = '注册成功,请点击 <a class="btn btn-link" href="/login" role="button"> 登录 </a>' ;
res.render('register')
}
});
}
})
})
})
module.exports = router
注册页面的ejs，注意这里用到`bootstrap`和`jquery`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function () {
});
</script>
</head>
<body>
<h1 class="text-center">注册页面</h1>
<div id="container" class="container">
<% if (locals.success) { %>
<div id="alt_sucess" class="alert alert-success">
<%- success %>
</div>
<% } %>
<% if (locals.error) { %>
<div id="alt_warning" class="alert alert-warning">
<%= error %>
</div>
<% } %>
<div class="col-md-offset-3 col-md-6">
<form class="form-signin" role="form" method="post">
<div class = "form-group">
<input id="txtUserName" name="username" type="text" class="form-control" placeholder="用户名" required autofocus />
</div>
<div class="form-group">
<input id="txtUserPwd" name="password" type="password" class="form-control" placeholder="密码" required/>
</div>
<div class="form-group">
<input id="txtUserRePwd" name="repassword" type="password" class="form-control" placeholder="重复密码" required/>
</div>
<div class="form-group">
<button id="btnSub" class="btn btn-lg btn-primary" type="submit">注 册</button>
<a class="btn btn-link" href="/login" role="button">登 录</a>
</div>
</form>
</div>
</div>
</body>
</html>
7、运行项目进行测试
node app.js
在浏览其中http://localhost:3000/register进行注册页面
[bower的使用方法](https://segmentfault.com/a/1190000002971135)
