• 課程時長

    22 小時 15 分

  • 課程級別

    中級

  • 授課語言

    中文

這堂課你將會學到

  • HTML、CSS、JavaScript 網頁前端設計
  • 學會兩種 web 框架 Django & Flask 的運作流程與設計⽅法
  • 用Flask實作微型MVC網頁框架
  • 以 Django 為例熟悉 MVC 網⾴架構觀念與實作
  • 資料庫設計與資料存取
  • 前端與後台整合
  • 網頁後台設計
  • 網頁資料庫串接
  • Django 整合 Bootstrap 網頁立馬變美
  • 獨立完成一個屬於自己的部落格
  • 理解即時聊天系統原理並進行實作

章節目錄

  • 1

    第 1 章 nuxt.js 架站與佈署

    • 單元 1 - 請先讀我 - 課程使用手冊

    • 單元 2 - 1.1 環境準備 - node、git、gitlab

    • 單元 3 - 1.2 為什麼要用 nuxt - 淺談 web 開發

    • 單元 4 - 1.3 建立 nuxt 專案 - 版控環境建立

    • 單元 7 - 1.6 使用 pm2 架設 nuxt 站台

    • 單元 5 - 1.4 linux server 建立 - 使用 google gcp

    • 單元 6 - 1.5 登入 linux 主機 - linux 基本指令介紹

    • 單元 8 - 1.7 伺服器環境安裝 node.js、pm2、nginx、git

    • 單元 9 - 1.8 linux 使用 git 佈署 nuxt 網站

    • 單元 10 - 1.9 網域註冊與設定DNS A 記錄

    • 單元 11 - 1.10 Nginx 反向代理設定

    • 單元 12 - 1.11 https ssl 憑證設定 - nuxt.js 網站上線
  • 2

    第 2 章 nuxt.js 開發準備工作

    • 單元 1 - 2.1 nuxt 開箱 - vue 重點整理

    • 單元 2 - 2.2 scss 安裝與引用

    • 單元 3 - 2.3 nuxt.config.js 設定

    • 單元 4 - 2.4 nuxt 圖片處理 - webpack 相關設定

    • 單元 5 - 2.5 nuxt 頁面架構 - layout 與 page 介紹

    • 單元 6 - 2.6 nuxt-link 與 頁面轉換

    • 單元 7 - 2.7 nuxt components 介紹

    • 單元 8 - 2.8 nuxt router 介紹

    • 單元 9 - 2.9 nuxt plugins 介紹 - axios 安裝

    • 單元 10 - 2.10 nuxt ssr 運作原理 - universal 模式
  • 3

    第 3 章 nuxt.js 頁面佈局與開發

    • 單元 1 - 3.1 wayne1894 設計稿介紹

    • 單元 2 - 3.2 bulma ui 框架

    • 單元 3 - 3.3 header、footer 組件開發

    • 單元 4 - 3.4 course 列表組件開發

    • 單元 5 - 3.5 modal、login組件開發

    • 單元 6 - 3.6 course 內容頁面開發

    • 單元 7 - 3.7 pages 各頁面組裝

    • 單元 8 - 3.8 loading 進度條與頁面過渡處理
  • 4

    第 4 章 nuxt.js 資料處理

    • 單元 1 - 4.1 nuxt ssr 實作 - asyncData

    • 單元 2 - 4.2 nuxt 生命週期探討

    • 單元 3 - 4.3 nuxt vuex 用法 - state、getters、mutations

    • 單元 4 - 4.4 nuxt vuex 用法 - actions

    • 單元 5 - 4.5 nuxt ssr 實作 - fetch

    • 單元 6 - 4.6 nuxt 錯誤機制處理 - validate 頁面校驗
  • 5

    第 5 章 從實作一個 mock server 了解 node.js 運作原理

    • 單元 1 - 5.1 node 介紹 - 後端工作原理

    • 單元 2 - 5.2 node 介紹 - node express

    • 單元 3 - 5.3 了解 CORS 原理

    • 單元 4 - 5.4 了解 http 協議規範

    • 單元 5 - 5.5 了解 rest api 原理

    • 單元 6 - 5.6 前端開發 mock server 建立
  • 6

    第 6 章 nuxt.js 前端開發 - 註冊與登入頁面實作

    • 單元 1 - 6.1 firebase 簡介 - 建立 firebase 專案

    • 單元 2 - 6.2 firebase rest api 用法

    • 單元 3 - 6.3 firebase 帳號密碼註冊與登入

    • 單元 4 - 6.4 firebase google 登入 - oauth 運作原理

    • 單元 5 - 6.5 nuxt serverMiddleware - 實作 google 登入機制

    • 單元 6 - 6.6 cookie 原理 與 登入機制設定

    • 單元 7 - 6.7 nuxtServerInit - nuxt 重整時保存登入狀態

    • 單元 8 - 6.8 nuxt Middleware - 驗證頁面登入
  • 7

    第 7 章 nuxt.js 前端開發 - 串接 mock server

    • 單元 1 - 7.1 前端開發職場合作方式探討 - 經驗分享

    • 單元 2 - 7.2 前端開發資料處理 - mock server 實作

    • 單元 3 - 7.3 axios.js 開發設定 - 設定 axios plguin

    • 單元 4 - 7.4 axios.js 開發設定 - 開發環境切換

    • 單元 5 - 7.5 登入註冊機制串接

    • 單元 6 - 7.6 課程列表頁串接

    • 單元 7 - 7.7 課程內容頁串接
  • 8

    第 8 章 nuxt.js 串接 firebase 資料庫

    • 單元 1 - 8.1 了解資料庫系統 - firebase realtime Database 介紹

    • 單元 2 - 8.2 操作 firebase 資料表 - 讀取、寫入

    • 單元 3 - 8.3 操作 firebase 資料表 - 寫入、刪除

    • 單元 4 - 8.4 課程收藏頁實作 - 規劃 firebase 資料庫

    • 單元 5 - 8.5 firebase 規則權限設定 - 串接 prod 資料
  • 9

    第 9 章 gitlab CICD - 自動化佈署

    • 單元 1 - 9.1 使用 ssh 透過終端機登入 linux - 了解 ssh 原理

    • 單元 2 - 9.2 gitlab 透過 ssh 連線

    • 單元 3 - 9.3 本機 pm2 佈署檔案設定

    • 單元 4 - 9.4 本機透過 pm2 指令佈署

    • 單元 5 - 9.5 gitlab CICD 流程實作 - yml 檔撰寫、合併分支佈署
  • 10

    第 10 章 補充章節

    • 單元 1 - 10.1 nuxt 建置的檔案自動佈署到雲端 - google cloud storage

    • 單元 2 - 10.2 nuxt 的負載平衡機制 - google Cloud Load Balancing

    • 單元 3 - 10.3 nuxt fetch 新用法整理 - 2.12 版後的 fetch

    • 單元 4 - 10.4 nuxt client-only、動態加載組件