[筆記] Sequelize NodeJS 專案初始化筆記 @地瓜大的飛翔旅程

章節連結

一、專案規劃
二、實際操作
其他 AlphaCamp 相關文章

本篇記錄下 AlphaCamp 第四學期的重頭戲之一，與他人一同打造類 Twitter 專案的過程。同時，這也是記錄如何從無到有打造一個專案的過程。

一、專案規劃

提出規格(Spec)清單，內容包含以下：
1.使用角色：如一般使用者、管理員…等，到時會由於其角色不同，而切換不同的頁面或是不同的瀏覽權限。
2.設計稿：頁面呈現方式，內有頁面路由名稱，對應的連結和按鈕、連結到哪個頁面。
3.功能說明：也可以說是使用者故事(User Stories)，工程師站在使用者的角度，來設法串接前台和後台資料，以符合使用者的期待。
4.資料結構：若是使用關聯式資料庫(如SQL系列)，表單彼此之間的欄位是屬於一對多、多對多的關係要先設定好。同時，別忘記每個欄位項目的資料型態。
5.路由設計：為了符合 CRUD 原則，開放的路由動作為 GET, POST, PUT, DELETE，且對應的路由和使用者故事要列成表單以方便對照。

二、實際操作

// STEP 1. 先運用 npm 安裝所需的 package，如：
npm i bcrypt-nodejs body-parser connect-flash express express-handlebars express-session faker 
method-override mysql2 passport passport-local sequelize sequelize-cli
// STEP 2. 用指令新增 Model，如：
npx sequelize model:generate --name User --attributes name:string,email:string,password:string
// STEP 3. 運用操作介面(ex:MySQLWorkbench)，創造新的 Database
CREATE DATABASE your_database
// STEP 4. 在程式編輯器上，修改 config.json 的 development 的密碼、資料庫名稱等
// STEP 5. DB Migrate，產生 Model
npx sequelize db:migrate
// STEP 6. 簡易的註冊、登入頁面，含後端登入邏輯，認證的結果要記得載入到路由設定中，這樣才能取得 UserId
// STEP 7-1. 假資料文件產生
npx sequelize seed:generate --name my-seed-file
// STEP 7-2. 假資料規格撰寫，如：
'use strict'
const bcrypt = require('bcrypt-nodejs')
module.exports = {
  up: (queryInterface, Sequelize) => {
    return queryInterface.bulkInsert('Users', [{
      email: '123@example.com',
      password: bcrypt.hashSync('12345678', bcrypt.genSaltSync(10), null),
      isAdmin: true,
      name: 'root',
      createdAt: new Date(),
      updatedAt: new Date()
    }, {
      email: 'user1@example.com',
      password: bcrypt.hashSync('12345678', bcrypt.genSaltSync(10), null),
      isAdmin: false,
      name: 'user1',
      createdAt: new Date(),
      updatedAt: new Date()
    }, {
      email: 'user2@example.com',
      password: bcrypt.hashSync('12345678', bcrypt.genSaltSync(10), null),
      isAdmin: false,
      name: 'user2',
      createdAt: new Date(),
      updatedAt: new Date()
    }], {})
  },
  down: (queryInterface, Sequelize) => {
    return queryInterface.bulkDelete('Users', null, {})
  }
}
// STEP 7-3. 假資料規格生成：(先清空再生成)
npx sequelize db:seed:undo:all
npx sequelize db:seed:all

// STEP 8-1. 後台使用者故事打造
// STEP 8-2. 前台使用者故事打造
// STEP 9. 前端版型優化