AlphaCamp 的課程進入到第三學期後期，趁機整理一下如何運用 Node.js 來建立一個簡單網站的步驟(包含前端畫面、後端資料庫、登入頁面、串接API以及除錯)。
第一部分
1.Wireframe
畫面的設計草稿，每個頁面需思考其連結關係並遵循 CRUD 概念。
Create (新增 – get & post method)；Read (讀取 – get method)；Update (更新 – put method)； Delete (刪除 – delete method)
2.安裝 NVM (Node Version Manager) & Node.js
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// 安裝在根目錄下 $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash //請上 Github 確定安裝的是最新版本，撰寫時為 version 0.34 // 當然，你也可以使用 homebrew 來安裝 $ brew install nvm //除錯步驟 /* 1. 於根目錄下新增 .bash_profile*/ touch .bash_profile /* 2. 打開 .bash_profile*/ open ~/.bash_profile /* 3. 新增以下內容到 .bash_profile 中並存檔*/ if [ -f $HOME/.bashrc ]; then source $HOME/.bashrc fi /* 4. 在根目錄下新增 .bashrc*/ touch ~/.bashrc /* 5. 打開 .bashrc*/ open ~/.bashrc /* 6. 確認含有以下內容並存檔*/ export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion /* 若你是使用 on my zsh，那需將環境變數加入設定中*/ /* 1. 於根目錄下，開啟 .zshrc*/ open .zshrc /* 2. 找到 “# User configuration” ，加入 .bash_profile*/ source ~/.bash_profile /* 3. 執行 .zshrc*/ source .zshrc // 安裝 Node.js /* 1. 查看可安裝版本*/ $ nvm ls-remote /* 2-1. 指定特定版本*/ $ nvm install <version> /* 2-2. 直接安裝穩定版*/ $ nvm install stable /* 3-1. 切換到某版本*/ $ nvm use <version> /* 3-2. 查看已安裝的版本*/ $ nvm ls /* 4.查看目前使用的版本*/ $ node -v |
3.用 npm 安裝所需要的各種套件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 初始化某專案 npm init -y 以下都可在 "https://www.npmjs.com" NPM 官網找到，或者直接輸入 "npm i <套件名稱1> <套件名稱2> " * [bcryptjs] - 加密資料 * [body-parser] - 取得 post method 後傳輸的值 * [connect-flash] - 製作回應警告、提示訊息 * [dotenv] - 打造環境變數 * [Express] - Express 架構 * [Express-Handlebars] - Express 顯示引擎 * [express-session] - Express 的 Session 客戶端憑證 * [express-validator] - Express 表格驗證 * [method-override] - 解決前端表格只能用 get / post method 的問題 * [mongoose] - 與 mongodb 搭配使用 * [passport] - 應用程式認證功能(主)，需搭配其他應用方法 * [passport-local] - Passport.js 的本機端應用方法 |
4.新增以下的資料夾目錄
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// models 1. /models 2. /models/seeds // public 1. /public 2. /public/img 3. /public/javascripts 4. /public/stylesheets // routes 1. /routes // views 1. /views 2. /views/layouts 3. /views/partials |
5.在本機端連線資料庫
|
1 2 3 4 5 6 7 8 9 10 |
// 本例子是使用 mongodb Database，port 預設為 27017 // 請將 mongodb & mongodb-data 放在同一資料夾下，例子預設為根目錄 /* 1. 輸入以下指令*/ cd "mongodb/bin" ./mongod --dbpath ~/Dropbox/Code/mongodb-data --bind_ip 127.0.0.1 // 當看到類似字樣 [initandlisten] waiting for connections on port 27017，表示已連線 /* 2. 運用圖形化介面如 Robo3T 建立資料庫*/ /* 3. 於 models 內撰寫 js檔，搭配 Mongoose 來取用資料庫資料*/ |
第二部分
1. 建立種子資料
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
// 依照資料庫內容，產生對應的檔案 // models/seeds/seeder.js const mongoose = require('mongoose') const Record = require('../record') const User = require('../user') const bcrypt = require('bcryptjs') //connect with database mongoose.connect('mongodb://localhost/record', { useNewUrlParser: true, useCreateIndex: true }) const db = mongoose.connection db.on('error', () => { console.log('db error!') }) db.once('open', () => { console.log('db connected!') let users = [{ name: 'Andy', email: '[email protected]', password: '12345678' }, { name: 'Wendy', email: '[email protected]', password: '12345678' }] users.forEach((user, index) => { name = user.name email = user.email password = user.password GenerateUser(name, email, password, index) }) function GenerateUser(name, email, password, index) { let newUser = new User({ name, email, password }) bcrypt.genSalt(10, (err, salt) => { bcrypt.hash(newUser.password, salt, (err, hash) => { if (err) throw err newUser.password = hash newUser .save((err, user) => { GenerateRecord(index, user) }) }) }) } function GenerateRecord(index, user) { for (let i = 3 * index + 1; i <= 3 * (index + 1); i++) { Record.create({ name: 'Title' + i, category: 'ABC', date: new Date(), amount: 1000 + i * 10, userID: user._id }) } console.log('seed data ' + (index + 1) + ' is generated!') } }) |
2. 編輯首頁路由設定
3. 依照 Wireflame 設計首頁頁面，並渲染對應的 CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// routes/home.js // initialize router const express = require('express') const router = express.Router() const Record = require('../models/record.js') // index router router.get('/', (req, res) => { Record.find((err, records) => { if (err) return console.log(error) return res.render('index', { css: ['index.css'], records: records }) }) }) module.exports = router |
當執行完以上步驟後，就可以盡情的享受後續的調整和開發過程了。
按讚加入粉絲團
