express+vue+mongodb+session 實現註冊登陸

上個月寫了一篇文章是 express+mongodb+vue 實現增刪改查. 只是簡單的實現了增刪改查功能，那麼今天是在那個基礎之上作了擴展，首先實現的功能有以下：

1. 支持註冊，登陸功能，用戶能夠註冊完成後，進行登陸，登陸完成後會進入到列表增刪改查頁面。
2. 支持session會話，也就是說設置了多長時間登陸過時，若是用戶沒有登陸，直接進查詢列表頁面，會重定向到登陸頁面去，若是用戶登陸了後，把瀏覽器關掉，直接輸入列表查詢頁面，會直接進入列表頁面的。
3. 列表數據加入了分頁功能。
4. 對數據庫中的請求加入了日誌記錄。

該代碼和以前的實現增刪改查代碼，目錄有所調整，目的想文件目錄更加清晰。咱們在講解以前，仍是和以前同樣，先看下效果：
1. 首先服務器重啓後，在地址欄中輸入 http://localhost:8081/ 後，會重定向到登陸頁面來，以下圖所示：

2. 若是沒有帳號的話，咱們能夠註冊一個帳號，進入註冊頁面，以下圖所示：

3. 若是用戶名和密碼沒有輸入，或者輸入的格式不合法的話，會以下提示所示：

4. 當用戶註冊成功後，能夠看到以下頁面了

5. 咱們去登陸頁面，進行登陸，以下：

6. 登陸成功後，會跳轉到列表頁面，以下圖所示：

下面的增刪改查操做的流程，我就再也不介紹了，和我以前的 express+mongodb+vue 實現增刪改查中的演示是同樣的。

 7. 下面咱們來看看咱們的數據庫中是否增長了剛剛註冊的用戶帳號了，以下圖所示：

上面的四個帳號都是我註冊的，在數據庫中能夠看到，註冊成功了。

注意：若是某個用戶註冊過了，你再使用相同的帳號繼續註冊話，是不能註冊，會提示該帳號已經註冊過了，以下圖所示：

下面仍是來看下咱們項目的整個目錄架構以下：

### 目錄結構以下：
demo1                                       # 工程名
|   |--- dist                               # 打包後生成的目錄文件             
|   |--- node_modules                       # 全部的依賴包
|   |----database                           # 數據庫相關的文件目錄
|   | |---db.js                             # mongoose類庫的數據庫鏈接操做
|   | |---models                            # 存放全部模型表
|   | | |--- user.js                        # 增刪改查用戶數據表
|   | | |--- userTable.js                   # 用戶帳號表
|   |--- app
|   | |---index
|   | | |-- views                           # 存放全部vue頁面文件
|   | | | |-- list.vue                      # 列表數據
|   | | | |-- index.vue
|   | | | |-- login.vue                     # 用戶登陸頁面
|   | | | |-- regist.vue                    # 用戶註冊頁面
|   | | |-- components                      # 存放vue公用的組件
|   | | |-- js                              # 存放js文件的
|   | | |-- css                             # 存放css文件
|   | | |-- store                           # store倉庫
|   | | | |--- actions.js
|   | | | |--- mutations.js
|   | | | |--- state.js
|   | | | |--- mutations-types.js
|   | | | |--- index.js
|   | | | |
|   | | |-- app.js                          # vue入口配置文件
|   | | |-- router.js                       # 路由配置文件
|   |--- api                                # 保存全部接口操做的文件
|   | |--- addAndDelete.js                  # 增刪改查的接口
|   | |--- regAndLogin.js                   # 註冊登陸的接口
|   | |--- userSession.js                   # 用戶session有效的接口
|   |--- routes                             # 存放全部的路由文件
|   | |--- addAndDelete.js                  # 增刪改查路由
|   | |--- regAndLogin.js                   # 註冊和登陸路由
|   | |--- userSession.js                   # session路由
|   |--- views
|   | |-- index.html                        # html文件
|   |--- webpack.config.js                  # webpack配置文件 
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel轉碼文件
|   |--- app.js                             # express入口文件

首先咱們先看下 根目錄下的 app.js 文件代碼(服務器代碼)：

部分代碼以下：

// 引入express模塊
const express = require('express');
// 引入session
const session = require('express-session');
// 建立app對象
const app = express();

// 加載路由
const addAndDelete = require('./routes/addAndDelete');
const regAndLogin = require('./routes/regAndLogin');
const userSession = require('./routes/userSession');

const bodyParser = require("body-parser");

const fs = require('fs');
const path = require('path');

// mongoose-morgan
const morgan = require('mongoose-morgan');

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

app.use(session({
  secret: 'kongzhi', // 對 session id 相關的cookie 進行加密簽名
  cookie: {
    maxAge: 1000 * 60 * 10  // 設置 session的有效時間，單位爲毫秒，設置有效期爲10分鐘
  }
}));

// Logger 添加數據庫操做日誌記錄  https://www.npmjs.com/package/mongoose-morgan
app.use(morgan({
  connectionString: 'mongodb://localhost:27017/dataDb'
}));

// 使用
app.use('/user', addAndDelete);
app.use('/reglogin', regAndLogin);
app.use('/user', userSession);

如上代碼，加載路由後，而後使用 use了，對應的 routes文件下的js文件，代碼分別以下：

1. routes/addAndDelete.js 代碼以下：

// 引入express 模塊 
const express = require('express');

const router = express.Router();

// 引入user.js
const User = require('../api/addAndDelete');

router.post('/add', User.add);

router.post('/query', User.query);

router.post('/del', User.del);

router.post('/update', User.update);

module.exports = router;

2. routes/regAndLogin.js 代碼以下：

const express = require('express');

const router = express.Router();

const RegAndLogin = require('../api/regAndLogin');

router.post('/regist', RegAndLogin.registered);

router.post('/login', RegAndLogin.login);

// 註銷
router.post('/logout', RegAndLogin.logout);

module.exports = router;

3. routes/userSession.js 代碼以下：

const express = require('express');

const router = express.Router();

const userSession = require('../api/userSession');

router.post('/usersession', userSession.usersession);

module.exports = router;

所以對於 app.use('/user', addAndDelete); 的時候，會調用 routes/addAndDelete.js 下的請求方法，分別爲：

/add, /query, /update, /del, 所以在咱們列表頁面中使用接口方式如：相似於以下這樣的：

都是 /user/add, /user/query, /user/update, /user/del 這樣的接口，好比說咱們使用 /user/add post請求這樣的接口的時候，他們會調用到 routes/addAndDelete.js 中的router.post('/add', User.add); 這裏面的 User.add方法，因此它就會調用到 api/addAndDelete.js 中的add函數，以下代碼所示：

const User = require('../database/models/user');
// 新增信息
module.exports.add = function(req, res, next) {
  const user = new User({
    name: req.body.name,
    age: req.body.age,
    sex: req.body.sex
  });
  user.save((err, docs) => {
    if (err) {
      res.send({ 'code': 1, 'errorMsg': '新增失敗' });
    } else {
      res.send({ "code": 0, 'message': '新增成功' });
    }
  });
  next();
};

所以會調用數據庫的操做，會在數據庫中增長一條數據。如上代碼，會應用到 database/models/user 這個表中的代碼：

/*
 定義一個user的Schema
*/
const mongoose = require('../db.js');
const Schema = mongoose.Schema;

// 建立一個模型
const UserSchema = new Schema({
  name: { type: String}, // 屬性name，類型爲String
  age: { type: Number, default: 30 }, // 屬性age，類型爲Number，默認值爲30
  sex: { type: String }
});

// 導出model模塊
const User = module.exports = mongoose.model('User', UserSchema);

所以會建立user表，而且在表中插入對應的數據。

如上只是解釋下增長接口的調用方式，其餘的接口設計也是同樣的。就很少解釋了。對應 /user 這樣的，咱們在webpack中的devServer中會配置下，解決跨域問題，由於我如今是啓動兩個服務的，node端的端口是 3001, 而個人webpack的端口是8081， 會存在跨域的，所以webpack的 devServer 須要作以下配置的：

devServer: {
  port: 8081,
  // host: '0.0.0.0',
  headers: {
    'X-foo': '112233'
  },
  inline: true,
  overlay: true,
  stats: 'errors-only',
  proxy: {
    '/user': {
      target: 'http://127.0.0.1:3001',
      changeOrigin: true  // 是否跨域
    },
    '/combineFile': {
      target: 'http://127.0.0.1:3001',
      changeOrigin: true,  // 是否跨域,
      pathRewrite: {
        '^/combineFile' : ''  // 重寫路徑
      }
    },
    '/reglogin': {
      target: 'http://127.0.0.1:3001',
      changeOrigin: true  // 是否跨域
    }
  }
},

4. app.js 中使用了 mongoose-morgan 這個插件，爲了數據庫操做接口的時候，寫入日誌，好比報錯的時候能夠在服務器端看到報錯信息，該API的具體使用能夠
看下 npm庫（https://www.npmjs.com/package/mongoose-morgan）。

以下日誌記錄：

具體的代碼這邊就很少解釋，有興趣的話能夠去github上下載代碼查看下哦。

查看github上源碼