1.開發(fā)框架的選用

開發(fā)框架.png

2、項目需求

實現(xiàn)一個簡單注冊頁面，保存用戶數(shù)據(jù)到mongondb數(shù)據(jù)庫中

3、項目框架搭建

方法1：自己創(chuàng)建一個工程目錄，然后到工程目錄執(zhí)行下面安裝命令

    npm install express  // 后臺開發(fā)第三方
    npm install mongoose //數(shù)據(jù)庫管理
    npm install moment   // 時間處理的js
    npm install bower -g  Bower是一個客戶端技術(shù)的軟件包管理器，它可用于搜索、安裝和卸載如JavaScript、HTML、CSS之類的網(wǎng)絡(luò)資源
    bower install bootstrap  // html第三方框架
    新版express4中，要獨立安裝static，npm install serve-static --save
    bodyParser 已經(jīng)不再與Express捆綁，需要獨立安裝。
    令行執(zhí)行：npm install body-parser

grunt相關(guān)安裝，注意需要在工程目錄使用npm init生產(chǎn)package.json

npm install grunt -g 
npm install grunt-cli -g

npm install grunt-contrib-watch --save-dev  //只有有文件修改，就會重新執(zhí)行注冊好的任務(wù)
npm install grunt-nodemon --save-dev   // 實時監(jiān)聽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

創(chuàng)建一個項目，我們用的ejs模板，創(chuàng)建命令如下

express -e loginWebApp

-e表示使用ejs模板，loginWebApp為項目的名字
3、到項目目錄中執(zhí)行npm install就把需要第三方依賴安裝好
另外需要安裝mongoose數(shù)據(jù)庫操作第三方和Promise第三方bluebird

npm install bluebird
npm install mongoose

4、項目結(jié)構(gòu)的簡單說明

項目結(jié)構(gòu).png

1、<strong>app.js</strong>:服務(wù)器啟動的入口文件，在這里編寫服務(wù)器的邏輯
2、<strong>models</strong>:數(shù)據(jù)庫操作的models
3、<strong>node_modules</strong>:依賴的第三方模塊
4、<strong>package.json</strong>: 此文件是項目的配置文件（可定義應(yīng)用程序名，版本，依賴項等等）
5、<strong>public</strong>:images、javascripts、stylesheets，存放一些靜態(tài)資源
6、<strong>routes</strong>:存放路由文件
7、<strong>schemas</strong>:存放數(shù)據(jù)庫抽象模式
8、<strong>views</strong>:存放視圖

5、編寫服務(wù)代碼

1、創(chuàng)建app對象和mogoose

創(chuàng)建一個app對象
var express = require('express');
var app = express();
// 數(shù)據(jù)庫相關(guān)
var mongoose = require('mongoose')
mongoose.Promise = require('bluebird');

2、設(shè)置views路徑和模板引擎

//設(shè)定視圖路徑主要清楚__dirname的意思就可以了，它是node.js中的全局變量，表示取當前執(zhí)行文件的路徑     
app.set('views', path.join(__dirname, 'views'));   
//設(shè)定視圖引擎模板
app.set('view engine', 'ejs');

3、使用app.use([path], function)方法來使用中間件path為路徑，function·為中間件

//這一句中可能要注意一下，express.static()是處理靜態(tài)請求的，
//設(shè)置了public文件，public下所有文件都會以靜態(tài)資料文件形式返回
//（如樣式、腳本、圖片素材等文件）
app.use(express.static(path.join(__dirname, 'public'))); 
//上面代碼表示當用戶使用/訪問時，調(diào)用routes，即routes目錄下的index.js文件，
//其中.js后綴省略，用/users訪問時，調(diào)用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、編寫數(shù)據(jù)庫的操作模式

var mongoose = require('mongoose')

var Schema = mongoose.Schema
var UserSchema = new Schema({

username:String,
password:String

})

module.exports = UserSchema

轉(zhuǎn)為User模型

var mongoose = require('mongoose')
var UserSchema = require('../schemas/UserSchema')

var User = mongoose.model('User',UserSchema)

module.exports = User;

6、注冊路由編寫，get為獲取注冊頁面，post處理表單的提交保存用戶數(shù)據(jù)到數(shù)據(jù)庫

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" >
<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="重復(fù)密碼" 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)