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)