[全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt @地瓜大的飛翔旅程

章節連結

規格開設 (SPEC)
資料夾結構
事前準備
建置和測試步驟
專案預覽
參考資料

這回實際演練來打造一個即時聊天室來練功，使用者可以分為管理員和一般資格。其中使用到的主力套件和技術有：Vue.js, MySQL, Socket.io, passwort & passport-jwt, JavaScript, CSS, Bootstrap。

規格開設 (SPEC)

使用者需要登入留言
使用者可以註冊帳號
使用者可以即時看到自己和他人的訊息，無需刷新
訊息需要有會員名稱、時間和訊息內容
管理員和使用者都需要登入才能使用功能
管理員有後台可以看到所有的會員資料
管理員可以針對會員資料做新增
管理員可以刪除會員資料

資料夾結構

—chatroom
  —client
     —node_modules // client 的套件本體
     —public
     —src
     —package.json // client 的套件安裝資料-1  
     —package-lock.json // client 的套件安裝資料-2
     —.gitignore
     —vue.config.js // vue 設定檔
  —node_modules // server 的套件本體
  —server
      —config
      —modal
      —controller
      —seeder
      —router
         —index.js // app.js的路徑入口，裡頭再細分各種不同的路徑類型
         —apis.js
      —app.js
      —.gitignore
  —.sequelizerc // 種子資料和Model的所在位置若沒有和 node_modules，要在裡頭設置路徑
  —package.json // server 的套件安裝資料-1
  —package-lock.json // server 的套件安裝資料-2
  —.gitignore
  —.env
  —README.md

—chatroom

—client

—node_modules // client 的套件本體

—public

—src

—package.json // client 的套件安裝資料-1

—package-lock.json // client 的套件安裝資料-2

—.gitignore

—vue.config.js // vue 設定檔

—node_modules // server 的套件本體

—server

—config

—modal

—controller

—seeder

—router

—index.js // app.js的路徑入口，裡頭再細分各種不同的路徑類型

—apis.js

—app.js

—.gitignore

—.sequelizerc // 種子資料和Model的所在位置若沒有和 node_modules，要在裡頭設置路徑

—package.json // server 的套件安裝資料-1

—package-lock.json // server 的套件安裝資料-2

—.gitignore

—.env

—README.md

事前準備

請先安裝好 git, heroku, nodejs, vue 的指令，並可以回傳對應的版本號。（表示安裝成功）

建置和測試步驟

1.建立初始資料夾

/* 預設在 desktop 資料夾下，也就是 cd desktop*/
mkdir chatroom //建立 chatroom 資料夾
cd chatroom
mkdir server // 建立 server 資料夾
npm init // 產生 server 端的 package.json
git init //產生 git

/* 預設在 desktop 資料夾下，也就是 cd desktop*/

mkdir chatroom //建立 chatroom 資料夾

cd chatroom

mkdir server // 建立 server 資料夾

npm init // 產生 server 端的 package.json

git init //產生 git

2.編輯 server 的 package.json

// 中間的 scripts 加上，start, dev 的啟動模式
// 最後用 npm run dev 來啟動開發模式
"scripts": {
    "start": "node server/app.js",
    "dev": "nodemon server/app.js"
}

// 中間的 scripts 加上，start, dev 的啟動模式

// 最後用 npm run dev 來啟動開發模式

"scripts": {

"start": "node server/app.js",

"dev": "nodemon server/app.js"

}

3.在 /server 下新增 .sequelizerc，並編輯之

const path = require('path');

module.exports = {
  'config': path.resolve('server/config', 'config.json'),
  'models-path': path.resolve('server', 'models'),
  'seeders-path': path.resolve('server', 'seeders'),
  'migrations-path': path.resolve('server', 'migrations')
}

const path = require('path');

module.exports = {

'config': path.resolve('server/config', 'config.json'),

'models-path': path.resolve('server', 'models'),

'seeders-path': path.resolve('server', 'seeders'),

'migrations-path': path.resolve('server', 'migrations')

}

4.安裝 server 所需套件
5.在 /chatroom 內新增並編輯 app.js，並修改存取前端頁面的資料夾。當為 production mode的時候，讀取 server 目錄下的 dict 資料夾。換言之，到時候前端頁面打包的輸出資料夾就得在這個指定位置裡。完整設定請看 Github 裡的內容，這邊只摘要部分。

const express = require('express')
const app = express()

// production mode 前端路由
if (process.env.NODE_ENV === 'production') {
  // static folder
  app.use(express.static(__dirname + '/public/'))
  app.get(/.*/, (req, res) => res.sendFile(__dirname + '/public/index.html'))
}

const express = require('express')

const app = express()

// production mode 前端路由

if (process.env.NODE_ENV === 'production') {

// static folder

app.use(express.static(__dirname + '/public/'))

app.get(/.*/, (req, res) => res.sendFile(__dirname + '/public/index.html'))

}

6.執行 npx sequelize dB:generate 類的指令，產生 model, seeder 資料等，將內容依照 ERD 修改。因為有 .sequelizerc 了，所以產生的資料夾和檔案會在 /server 內，並能成功讀取。
7.打開 MySQL Workbench 之類的工具，在本機端建立資料庫，名稱要和你在 server 的 package.json 的名稱是一樣的
8.執行 npx sequelize db:migrate & npx sequelize db:seed:all
9.在 /server/router 資料夾內設置對應的 api 路徑
10.將記載者要如何跟後端資料庫做互動的方法獨立寫在 /server/controller 內，再載入到 api 路徑中

// /server/routes/apis
const express = require('express')
const router = express.Router()
const userController = require('../controller/api/userController')

router.post('/signIn', userController.signIn)
module.exports = router

// /server/routes/apis

const express = require('express')

const router = express.Router()

const userController = require('../controller/api/userController')

router.post('/signIn', userController.signIn)

module.exports = router

11.運用 Postman 工具，測試一下 api 能否正確回傳 .json 檔案
12.在 /chatroom 下，使用 vue create client，並採用預設的 ESLInt , 不使用 history mode
13.cd client，並安裝前端所需的套件。( axios, bootstrap, vuex, vue-router)

// /chatroom/client
vue add router
npm install bootstrap
npm install --save jquery popper.js

// /chatroom/client

vue add router

npm install bootstrap

npm install --save jquery popper.js

14.在 /chatroom/client 下新增 vue.config.js，設定輸出資料夾和代理伺服器位置，將前端發出的 http://localhost:8080 對應到後端的 http://localhost:3000

const path = require('path')

module.exports = {
  outputDir: path.resolve(__dirname, '../server/public'),
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000'
      }
    },
  }
}

const path = require('path')

module.exports = {

outputDir: path.resolve(__dirname, '../server/public'),

devServer: {

proxy: {

'/api': {

target: 'http://localhost:3000'

}

15.新增登入頁面，並測試後端是否可以接收到，這時多半會跑出 CORS 錯誤
16.將 Server 內的 app.js，新增 app.use(cors())，小心不要忘記()
17.再測試是否可以回傳 json 訊息
18.後端 server 設置 passport-jwt
19.在前端頁面測試可否傳回對應的使用者 json，權限設置正確
20.用 vuex 向後端取得設定檔，並在每個 view 內以 …mapState 的方法取得 vuex 內的狀態，詳情參見：[筆記] Vue 的狀態管理 Vuex 實作心得
21.開發非 socket.io 即時聊天的部分
22.開發需 socket.io 協助的部份
23.調整 css 版型，優惠使用者體驗
24.撰寫測試
25.進行heroku 佈署前作業，取得子目錄網址

// 取得網址，並推上第一版以建立資料庫
heroku create <your_app_name>
git push heroku master

// 設置資料庫、啟動 db:migrate 和種子資料
heroku ps:scale web=1
heroku addons:create heroku-postgresql:hobby-dev
heroku run npx sequelize db:migrate
heroku run npx sequelize db:seed:all
heroku config:set <something in your .env>

// 取得網址，並推上第一版以建立資料庫

heroku create <your_app_name>

git push heroku master

// 設置資料庫、啟動 db:migrate 和種子資料

heroku ps:scale web=1

heroku addons:create heroku-postgresql:hobby-dev

heroku run npx sequelize db:migrate

heroku run npx sequelize db:seed:all

heroku config:set <something in your .env>

26.修正後台資料庫網址成發佈版本(也就是上一步取得的 heroku 網址)
27.在 /chatroom/client 資料夾下執行 npm run build，會發覺生成一個 public 資料夾就在 server 資料夾內
28.將後端 server 的 api 網址的 app.use(‘/’) 給取消掉，否則會無法顯示首頁
29.推到 heroku 上，測試可否正常運作
30.編寫 README.md 檔案