極速全端開發 - Vue.js + Express.js 建構全能美觀應用

王鴻盛

一個從四線小縣城走出來的程式師、全棧開發工程師、網路工程師。主攻前端方向。阿里雲社區博客專家，CSDN論壇知名前端領域博主，BiliBili平臺前端領域優秀創作者。長期擔任中大型專案設計與研發顧問，曾參與設計與開發廣東省興寧市政府集約化平臺、興寧市檢察院門戶網站等市政專案。

Node.js 篇

第1 章 數位管理時代

▍1.1 資料管理

1.1.1 人工管理階段

1.1.2 檔案管理階段

1.1.3 資料庫管理階段

▍1.2 複雜多樣的資料

1.2.1 資料的複雜化

1.2.2 資料的多樣化

1.2.3 如何處理資料

 

第2 章 資料庫系統的出現

▍2.1 資料庫系統的發展

2.1.1 資料模型

2.1.2 後關聯式階段

2.1.3 主流資料庫管理系統

▍2.2 MySQL 簡述

2.2.1 為什麼選擇MySQL

2.2.2 SQL 基本語法

▍2.3 建立第1 個資料庫

2.3.1 使用MySQL 社區版建立資料庫

2.3.2 使用小皮面板建立資料庫

▍2.4 視覺化的資料庫管理工具

 

第3 章 從0 到1 設計系統

▍3.1 功能模組是如何討論出來的

3.1.1 從設想到專案成立

3.1.2 使用者端的多端設計

3.1.3 常見功能模組及操作

▍3.2 如何設計資料庫欄位

3.2.1 欄位的命名

3.2.2 欄位的資料型態

3.2.3 約束

3.2.4 功能的判斷

3.2.5 資料表的id

▍3.3 從0 設計一張使用者資料表

3.3.1 使用者模組

3.3.2 使用者資料表欄位

3.3.3 建立使用者資料表

 

第4 章 開始我們的後端之旅

▍4.1 後起之秀Node.js

4.1.1 V8 引擎的最佳化機制

4.1.2 非阻塞I/O 和事件驅動

4.1.3 豐富的生態系統

▍4.2 套件管理工具

4.2.1 常用npm 命令

4.2.2 配置npm

4.2.3 Yarn 介紹及常用命令

4.2.4 Pnpm 介紹及常用命令

4.2.5 建構一個Node 應用

▍4.3 輕量的Express.js 框架

4.3.1 Express.js 介紹

4.3.2 在Node 中使用Express.js

▍4.4 中介軟體

4.4.1 不同的中介軟體

4.4.2 使用中介軟體

▍4.5 路由和處理常式

4.5.1 什麼是路由

4.5.2 專心處理業務的handler

4.5.3 GET、POST 及其兄弟

▍4.6 測試的好幫手

4.6.1 Postman

4.6.2 試著輸出一下資料

▍4.7 小試鋒芒

4.7.1 註冊和登入需要考慮什麼

4.7.2 業務邏輯程式實現

4.7.3 最終效果

 

第5 章 實現更複雜的功能

▍5.1 使用者

5.1.1 修改使用者資訊

5.1.2 實現帳號狀態邏輯

▍5.2 實現上傳功能

5.2.1 Multer 中介軟體

5.2.2 實現上傳圖片

5.2.3 檔案系統

5.2.4 資料表多了筆URL 位址

▍5.3 展現資料

5.3.1 分頁的邏輯

5.3.2 實現分頁

 

第6 章 行業百寶庫

▍6.1 從入庫到出庫

▍6.2 如何考慮產品的欄位

▍6.3 實現產品管理的邏輯

6.3.1 進入百寶庫

6.3.2 清點寶物

6.3.3 鎖好庫門

6.3.4 獲得寶物

 

第7 章 給系統裝個監控

▍7.1 什麼是埋點

▍7.2 設計並實現埋點

7.2.1 登入模組埋點

7.2.2 使用者模組和產品模組埋點

 

第8 章 介面文件

▍8.1 使用Postman 生成介面文件

▍8.2 使用Apifox 生成介面文件

▍8.3 使用Swagger 模組生成介面文件

 

第9 章 程式上傳至倉庫

▍9.1 程式倉庫

9.1.1 GitHub

9.1.2 Gitee

▍9.2 Git 介紹

9.2.1 Git 安裝

9.2.2 建立Gitee 倉庫

9.2.3 上傳程式

▍9.3 視覺化的Sourcetree

9.3.1 下載Sourcetree

9.3.2 配置本地倉庫

9.3.3 修改程式並提交

 

Vue.js 篇

第10 章 前端的變革

▍10.1 HTML

10.1.1 定義標題

10.1.2 段落

10.1.3 超連結

10.1.4 圖片、視訊、音訊

10.1.5 表格

10.1.6 輸入框

10.1.7 按鈕

10.1.8 單選按鈕、核取方塊

10.1.9 標籤、換行、表單

10.1.10 列表

10.1.11 區塊級元素、行內元素

10.1.12 標識元素

▍10.2 CSS

10.2.1 選擇器

10.2.2 字型、對齊、顏色

10.2.3 背景、寬和高

10.2.4 定位

10.2.5 顯示

10.2.6 盒子模型

10.2.7 外部樣式、內部樣式、行內樣式

10.2.8 響應式

▍10.3 JavaScript

10.3.1 執行、輸出

10.3.2 var、let、const 及作用域

10.3.3 資料型態

10.3.4 條件陳述式

10.3.5 迴圈敘述

10.3.6 DOM 及其事件

10.3.7 BOM

▍10.4 框架的出現

10.4.1 jQuery

10.4.2 Bootstrap

10.4.3 Sass

▍10.5 真正的變革

 

第11 章 初識Vue

▍11.1 Vue.js 的介紹

11.1.1 漸進式

11.1.2 宣告式程式

11.1.3 組件化

11.1.4 選項式API 與組合式API

11.1.5 生命週期

11.1.6 響應式

▍11.2 第1 個demo

11.2.1 安裝Vue.js 專案

11.2.2 分析框架

11.2.3 去除初始檔案

 

第12 章 再接再勵

▍12.1 Vue Router

12.1.1 配置路由

12.1.2 建立一個Vue 元件

▍12.2 Element Plus

12.2.1 如虎添翼的UI 函數庫

12.2.2 安裝Element Plus

12.2.3 引入第1 個UI 組件

12.2.4 定義一個表單

▍12.3 給JavaScript 加上緊箍咒

12.3.1 TypeScript 是什麼

12.3.2 基礎類型定義

12.3.3 常用的TypeScript 配置

12.3.4 給表單資料加上TypeScript

 

第13 章 頁面設計想法

▍13.1 版面配置

13.1.1 彈性版面配置

13.1.2 選單

13.1.3 表格頁面

▍13.2 樣式

▍13.3 顏色

▍13.4 完成登入頁面

13.4.1 卡片位置

13.4.2 卡片樣式

 

第14 章 互動

▍14.1 Axios

14.1.1 AJAX

14.1.2 Promise

14.1.3 async await

14.1.4 Axios 的二次封裝

▍14.2 撰寫前端介面

▍14.3 完成登入與註冊功能

 

第15 章 登堂入室

▍15.1 建構系統基本版面配置

15.1.1 容器版面配置

15.1.2 封裝全域麵包屑

▍15.2 個人設置模組

15.2.1 內容區基礎版面配置

15.2.2 封裝公共類別

15.2.3 Pinia

▍15.3 使用者清單模組

15.3.1 使用者模組基礎架構

15.3.2 使用者資訊框

▍15.4 完善使用者列表功能

15.4.1 實現分頁功能

15.4.2 實現凍結與解凍功能

15.4.3 實現搜尋與篩選功能

15.4.4 實現使用者資訊框功能

▍15.5 實現日誌記錄

15.5.1 登入日誌

15.5.2 操作日誌

▍15.6 hooks

 

第16 章 爐火純青

▍16.1 產品的入庫

16.1.1 獲取產品清單

16.1.2 實現增加產品功能

16.1.3 實現編輯產品功能

16.1.4 實現申請出庫功能

16.1.5 實現刪除產品功能

▍16.2 產品的審核

16.2.1 獲取審核列表

16.2.2 實現審核產品

16.2.3 實現撤回和再次申請出庫

▍16.3 產品的出庫

16.3.1 搜尋出庫記錄

16.3.2 清空出庫列表

▍16.4 ECharts

16.4.1 實現資料邏輯

16.4.2 實現圖表

▍16.5 許可權管理

16.5.1 動態生成路由表

16.5.2 部門內許可權

▍16.6 路由守衛

 

上線篇

第17 章 伺服器與域名

▍17.1 伺服器

17.1.1 伺服器參數

17.1.2 雲端服務器

17.1.3 購買雲端服務器

▍17.2 域名

17.2.1 購買域名

17.2.2 備案域名

17.2.3 域名解析

17.2.4 SSL 證書

▍17.3 寶塔面板

17.3.1 安裝寶塔面板 .

17.3.2 安裝Node 版本管理器

 

第18 章 上線專案

▍18.1 增加Node 專案

18.1.1 上傳後端程式

18.1.2 增加Node 專案

18.1.3 配置SSL 證書

18.1.4 增加資料庫

18.1.5 測試

▍18.2 增加Vue 專案

18.2.1 Vite 配置

18.2.2 生成dist 資料夾並配置