規格開設 (SPEC)
- 使用者需要登入留言
- 使用者可以註冊帳號
- 使用者可以即時看到自己和他人的訊息，無需刷新
- 訊息需要有會員名稱、時間和訊息內容
- 管理員和使用者都需要登入才能使用功能
- 管理員有後台可以看到所有的會員資料
- 管理員可以針對會員資料做新增
- 管理員可以刪除會員資料
資料夾結構
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
—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 |
事前準備
建置和測試步驟
1.建立初始資料夾
|
1 2 3 4 5 6 |
/* 預設在 desktop 資料夾下，也就是 cd desktop*/ mkdir chatroom //建立 chatroom 資料夾 cd chatroom mkdir server // 建立 server 資料夾 npm init // 產生 server 端的 package.json git init //產生 git |
2.編輯 server 的 package.json
|
1 2 3 4 5 6 |
// 中間的 scripts 加上，start, dev 的啟動模式 // 最後用 npm run dev 來啟動開發模式 "scripts": { "start": "node server/app.js", "dev": "nodemon server/app.js" } |
3.在 /server 下新增 .sequelizerc，並編輯之
|
1 2 3 4 5 6 7 8 |
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 裡的內容，這邊只摘要部分。
|
1 2 3 4 5 6 7 8 9 |
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 路徑中
|
1 2 3 4 5 6 7 |
// /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)
|
1 2 3 4 |
// /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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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 佈署前作業，取得子目錄網址
|
1 2 3 4 5 6 7 8 9 10 |
// 取得網址，並推上第一版以建立資料庫 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 檔案
專案預覽
[Github]：https://github.com/andy922200/chatroom-nodejs-vue
[Heroku]：https://chatroom-sml.herokuapp.com/
參考資料
1.node.js搭建接口（七）：Node-使用passport-jwt验证token
2.Node.js 實作 The F2E_ChatRoom (1) 環境建置
3.[Node.js]Socket.io
4.Vue-Socket.io DEMO
5.express 搭配 mongodb 建立聊天室
6.Socket.IO使用技巧（一）
7.Vue-Socket.io的使用
8.vuex+socket.io实现实时私聊功能
9.Node.js + Web Socket 打造即时聊天程序
10.使用socket.io遇到的一些坑
11.vue中使用 vue-socket.io
