本文算是本人第一次完成一個(gè)全棧式開發(fā)，后端基于Node.js，數(shù)據(jù)庫(kù)基于MongoDB，前端主要基于Angular來(lái)實(shí)現(xiàn)的一個(gè)Web開發(fā)。本文算是第一個(gè)跑通的程序，本人也是通過(guò)學(xué)習(xí)JS全棧開發(fā)的過(guò)程，慢慢的積累，踩坑的過(guò)程。在web技術(shù)快速發(fā)展的現(xiàn)在，采用的依賴也越來(lái)越多，版本的更迭導(dǎo)致網(wǎng)上的教程過(guò)時(shí)，本文采用的庫(kù)和node版本都是當(dāng)前最新的，可以讓大家少踩坑啦。

本文只是實(shí)現(xiàn)了簡(jiǎn)單的登入的后端邏輯和簡(jiǎn)單的前端界面，簡(jiǎn)單又容易上手。功能上支持用戶注冊(cè)，用戶登錄，用戶注銷，刪除用戶等基本功能。并且支持免密碼登錄一定時(shí)間的功能。

后端

后端依賴項(xiàng)

本程序采用當(dāng)前最新的node版本6.7.0，主要采用如下的依賴項(xiàng)

   "body-parser": "~1.15.2",
    "connect-mongo": "^1.3.2",
    "cookie-parser": "~1.4.3",
    "ejs": "~2.5.2",
    "express": "~4.14.0",
    "express-session": "^1.14.2",
    "mongoose": "^4.7.1",

后端主程序

這節(jié)主要介紹配置后端主程序，主要包括設(shè)置中間件，建立session連接，數(shù)據(jù)庫(kù)配置等。下面是一些主要的代碼，完整的代碼可以查看文末的連接。

// auth_server
var expressSession = require('express-session');
var mongoStore = require('connect-mongo')({session:expressSession});
var conn =mongoose.connect('mongodb://localhost/myapp');
// 當(dāng)前版本mongoose已經(jīng)取消了Promise，需要自己設(shè)置
mongoose.Promise = require('bluebird');
app.use(expressSession({
  secret: 'SECRET',
  cookie: {maxAge:60*60*1000},
  resave:true,
  saveUninitialized: true,
    store: new  mongoStore({
      mongooseConnection: conn.connection,
    collection: 'sessions'
  })
}));
require('./routes')(app);
app.listen(3030);

后端路由

路由是后端程序重要的一個(gè)環(huán)節(jié)，本文采用RESTful API 設(shè)計(jì),處理登入，注冊(cè)，詳細(xì)頁(yè)面的所有頁(yè)面的接口。借助于express強(qiáng)大的功能，能夠很簡(jiǎn)單的設(shè)置接口。具體可以參考完整的代碼routes.js。需要注意的是在登錄之后，后臺(tái)后保存這次session，并且這個(gè)過(guò)程被寫進(jìn)中間件中去了，那么以后用戶每次訪問(wèn)，就會(huì)獲取信息。然后就可以免密碼登錄了。主要就是根據(jù)req.session.user是否已經(jīng)存在。

后端業(yè)務(wù)邏輯處理

后端業(yè)務(wù)，包括登錄，注冊(cè)，獲取用戶詳情，更新用戶信息，刪除用戶。本文處理簡(jiǎn)單的業(yè)務(wù)邏輯。

1. 登錄邏輯：首先根據(jù)mongoose查找是否存在用戶，如果存在并且密碼正確，將用戶保存在session里面，存進(jìn)數(shù)據(jù)庫(kù)里面去。下次就可以免密碼訪問(wèn)了。
2. 注冊(cè)邏輯：首先根據(jù)模型生成一個(gè)用戶，從請(qǐng)求體重獲取需要的信息，存入到數(shù)據(jù)庫(kù)。保存完成后，保存session，并返回到注冊(cè)界面。
3. 更新用戶信息：在數(shù)據(jù)庫(kù)中設(shè)置了用戶名為主鍵，所以設(shè)置了用戶名無(wú)法修改。修改完成返回到主界面
4. 刪除用戶：從數(shù)據(jù)庫(kù)中刪除，返回到登錄界面。

數(shù)據(jù)庫(kù)

數(shù)據(jù)庫(kù)采用MongoDB，通過(guò)mongoose建模，在新建用戶和登錄等操作中，實(shí)現(xiàn)了增刪查改等基本操作，如下簡(jiǎn)單代碼

// 建模
var userSchema = new schema({
  username:{type:String, unique:true},
  password:String,
  email:String,
  color:String,
  hashed_password:String
}); 
mongoose.model('User',userSchema);

// 添加一條記錄
var user = new User({username:req.body.username});
  user.set('email',req.body.email);
  user.set('hashed_password',hashPW(req.body.password));
  user.save(function (err) {
    // to do something
  });
  // 查找，修改
   User.findOne({_id:req.session.user}).exec(function (err,user) {
    if (user) {
    // 修改 
      user.set('email',req.body.email);
      user.set('color',req.body.color);
      // 保存
      user.save(function (err) {
       // to do something
      });
    }
  });
  
  // 刪除
    User.findOne({ _id: req.session.user })
      .exec(function (err,user) {
    if (user) {
      user.remove(function (err) {
       // to do something
      });
    } 
  });

實(shí)際代碼可以參考文章后面鏈接。

前端

前端簡(jiǎn)單的寫了四個(gè)界面。采用AngularJS進(jìn)行前端開發(fā)。只用了ng-model用來(lái)動(dòng)態(tài)綁定數(shù)據(jù)。具體代碼可以參考文后代碼。

結(jié)尾

本文代碼放在Github上，有需要的可以下載下來(lái)，開啟mongoDB，然后切換到auth_server.js目錄下運(yùn)行node auth_server.js即可（其實(shí)是我上傳前忘記添加.gitignore，導(dǎo)致都上傳了，哈哈）。

學(xué)生時(shí)代對(duì)于GitHub,沒(méi)有什么特別深的感覺(jué)，覺(jué)得star太做，現(xiàn)在才發(fā)現(xiàn)，求賜star。感謝，希望大家能有收獲。加油??

demo地址