Node.js-Backend見聞錄(12)：實作-會員系統(一)-會員註冊(一)

前言

終於進入了實作階段，從這篇章節開始筆者會先敘述要實作的功能及需求，並會依照功能而去貼出相對應的程式碼。

關於會員系統

會員系統我們會分三部分來進行實作：

1. 會員註冊
2. 會員登入
3. 修改會員資料

會員註冊需求

• 不允許相同帳號(email)重複註冊
• email 格式要檢查是否為 email 格式
• 密碼要加密再存，不可逆。

套件

在此次的功能中，我們需要使用到些套件。套件的安裝方式則是開啟terminal並移動到專案資料夾底下，並輸入下列指令即可：

• mysql：跟MySQL資料庫做聯動。

$ npm install mysql

• dotenv：可用來隱藏些敏感性資料。

$ npm install dotenv

開發環境生成

先藉由Express提供的應用程式產生器來生成，若還沒安裝該產生器的讀者們可參考以下指令：

$ npm install express-generator -g

待安裝完成後，輸入下列指令來生成開發環境：

$ express --view=ejs member

待環境生成後，記得先輸入npm install指令來讓應用程式產生器所提供的些套件都有安裝進去：

$ npm install

測試工具

測試工具的部分我們會使用Postman來進行，透過它能讓我們測試所開發的API其運行是否正常。

資料結構

.
├── app.js
├── bin
│   └── www
├── config
│   └── development_config.js
├── controllers
│   └── modify_controller.js
├── models
│   ├── connection_db.js
│   └── register_model.js
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── member.js
│   └── users.js
├── sevice
│   └── member_check.js
├── views
    ├── error.ejs
    └── index.ejs
├── .env
└── .gitignore

開始開發

從開發的需求中發現，我們的API會是使用POST method的API，也就是說該API會夾帶從client端的使用者所輸入的資料。這時，我們先嘗試寫個API來接收使用者資料看看。

請將routes資料夾中member.js的程式碼改成：

var express = require('express');
var router = express.Router();

router.post('/', function(req, res, next) {
  console.log(req.body.test)
    
});

module.exports = router;

並在app.js中，添加兩行程式碼，分別是：

• 添加一

var member = require('./routes/member');

添加在下述程式碼的前面。

var users = require('./routes/users');

• 添加二

app.use('/', member);

添加在下述程式碼的前面。

app.use('/users', users);

輸入完成後，使用指令npm start開啟專案：

$ npm start

之後，開啟Postman並將參數設置成：

• HTTP method: POST
• HTTP url : localhost:3000/
• Body中選擇x-www-form-urlencoded
  • Key: test
  • Value: 1

按出Send之後，應該會看到console.log出來的結果是1。確定能夠接收到來自client端的資料庫後，我們就來準備接收會從client端那邊接過來的參數：

const memberData = {
	name: req.body.name,
	email: req.body.email,
	password: req.body.password,
	create_date: onTime()
}

當初我們在資料庫有設定create_date，其用意在於為了取得建立資料的時間。所以，我們額外寫個function來產生它：

//取得現在時間，並將格式轉成YYYY-MM-DD HH:MM:SS
const onTime = () => {
    const date = new Date();
    const mm = date.getMonth() + 1;
    const dd = date.getDate();
    const hh = date.getHours();
    const mi = date.getMinutes();
    const ss = date.getSeconds();

    return [date.getFullYear(), "-" +
        (mm > 9 ? '' : '0') + mm, "-" +
        (dd > 9 ? '' : '0') + dd, " " +
        (hh > 9 ? '' : '0') + hh, ":" +
        (mi > 9 ? '' : '0') + mi, ":" +
        (ss > 9 ? '' : '0') + ss
    ].join('');
}

連接資料庫

這時我們就可以開始連接到我們的資料庫了。首先，我們在.env的檔案中，先將我們昨天的給予member資料庫的權限的帳號、密碼進去。

HOST = 'localhost'
DATABASE_USER = 'test'
DATABASE_PASSWORD = '1234'
DATABASE = 'member'

註記：這部分請將自行設定的帳號密碼輸入。

完成後，我們在另外到config資料夾中的development_config.js中做一個聯動的設定。而這邊我們會使用到其中一個套件dotenv，它的好處在於我們可以額外搭配.gitignore來做使用。

試想著，假設今天如果要跟將自己的專案上傳到github上，而我們沒將自己的敏感性資料進行處理就直接上傳，這等同於赤裸裸的告訴別人自己的帳號密碼。

require('dotenv').config()

module.exports = {
    mysql: {
      host: process.env.HOST,
      user: process.env.DATABASE_USER,
      password: process.env.DATABASE_PASSWORD,
      database: process.env.DATABASE
    }
}

接著在.gitignore檔案中加入：

# dotenv environment variables file
.env

來讓.env檔案不會被git給追蹤。等同於不會跟著被push到remote repository。最後，我們在models資料夾中的connection_db.js來設定連接資料庫：

// DataBase
const config = require('../config/development_config');
const mysqlt = require("mysql");

const connection = mysqlt.createConnection({
  host: config.mysql.host,
  user: config.mysql.user,
  password: config.mysql.password,
  database: config.mysql.database
});

connection.connect(err => {
  if (err) {
    console.log('connecting error');
  } else {
    console.log('connecting success');
  }
});

module.exports = connection;

小結

設定到這階段後，我們就算是成功將專案跟資料庫做聯動了。而下個章節將進入到把資料寫入資料庫的部分。