Vue.js + Node.js 開發實戰：從入門到項目上線

張帆

產品經理，互聯網創業者。
曾在巨人網絡等互聯網企業擔任Web工程師和目經理等職務。
長期從事Web開發，有豐富的項目經驗，擅長Python、PHP及Node.js後端服務構建技術，
以及JavaScript客戶端開發、微信客戶端開發及網站前端開發等技術。
長期研究如何利用各種新技術提升開發效率，解決實際問題。

前言
第1章開發一個網站的準備1
1.1如何從零開始建設一個網站1
1.1.1網站建設流程1
1.1.2網站開發技術和工具2
1.2第一步：購買一個域名3
1.2.1域名簡介4
1.2.2如何通過阿里雲購買域名5
1.3第二步：域名的備案和解析8
1.3.1域名的實名認證和備案8
1.3.2域名相關解析9
1.4第三步：購買一台服務器10
1.4. 1雲服務器10
1.4.2服務器的後台管理11
1.5小結與練習13
1.5.1小結13
1.5.2練習13

第2章Node.js+Vue.js項目開發基礎14
2.1 Node.js簡介14
2.1.1 Node.js的前世今生14
2.1.2在Windows中安裝Node.js 15
2.1.3在Linux中安裝Node.js 18
2.1.4第一個Node.js示例——Hello World 20
2.2 Node.js後端框架Express 21
2.2.1 Express的發展21
2.2.2 Express的安裝23
2.2.3 Express項目示例——Hello World 25
2.2.4 RESTful API規範25
2.3頁面顯示框架Vue.js 27
2.3.1 Vue.js簡介27
2.3.2 Vue.js的安裝28
2.3.3用Vue.js編寫Hello World——CDN方式29
2.3.4用Vue.js編寫Hello World——Webpack方式30
2.3.5其他頁面顯示框架34
2.4 JavaScript代碼編寫——IDE的選擇35
2.4.1編寫基礎的JavaScript代碼35
2.4.2 JavaScript開發利器——WebStorm 37
2.5小結與練習38
2.5.1小結38
2.5.2練習38

第3章項目開發準備39
3.1初識數據庫39
3.1.1數據庫簡介39
3.1.2 SQL數據庫和NoSQL數據庫40
3.2 MongoDB介紹41
3.2.1為什麼選擇MongoDB 42
3.2.2在Windows中安裝MongoDB 43
3.2.3在Linux中安裝MongoDB 44
3.3 Redis簡介46
3.3.1為什麼選擇Redis 46
3.3.2在Windows中安裝Redis 47
3.3.3在Linux中安裝Redis 49
3.4版本控制51
3.4.1版本控制簡介51
3.4.2 Git和GitHub簡介51
3.4.3安裝和使用Git 54
3.5測試工具57
3.5.1瀏覽器自帶的開發者工具57
3.5.2 Postman插件59
3.6小結與練習61
3.6.1小結61
3.6.2練習62

第4章項目後台技術Express 63
4.1開發Express應用程序63
4.1.1 Express應用程序生成器63
4.1.2 Express提供的路由66
4.1.3使用Express託管靜態文件68
4.2 Express和數據庫交互70
4.2.1連接MongoDB數據庫70
4.2.2使用對像模型驅動連接MongoDB 72
4.2.3如何定義模型73
4.2.4 Node.js和Redis集成74
4.3 Express高級應用75
4.3.1 Express中的中間件75
4.3.2 Express錯誤處理79
4.4小結與練習81
4.4.1小結81
4.4.2練習81

第5章項目前端開發之Vue.js基礎知識82
5.1 Vue.js開發基礎82
5.1.1安裝Vue.js與Webpack 82
5.1.2 Webpack常用配置詳解85
5.1.3 Vue.js條件渲染89
5.1.4 Vue.js列表渲染90
5.1.5 Vue.js輸入監聽91
5.1.6 Vue.js事件處理——v-on綁定94
5.2 Vue.js的生命週期97
5.2.1生命週期與鉤子函數97
5.2.2演示Vue.js的生命週期99
5.3 Vue.js的模板語法100
5.3.1文本101
5.3.2 JavaScript表達式103
5.3.3 v-bind綁定動態屬性104
5.4 Vue.js的組件化105
5.4.1組件化簡介105
5.4.2組件的創建106
5.4.3組件的註冊106
5.4.4組件間的數據傳遞109
5.4.5監聽子組件事件111
5.4.6通過插槽分發內容114
5.5小結與練習116
5.5.1小結116
5.5.2練習116

第6章Vue.js高級應用117
6.1 Vue.js的vue-router庫117
6.1.1 Vue.js的頁面路由實現117
6.1.2使用vue-cli初始化Vue.js項目118
6.1.3安裝和配置vue-router 122
6.1.4動態路由匹配123
6.1.5路由嵌套126
6.1.6路由跳轉128
6.1. 7導航守衛131
6.2 Vue.js的狀態管理庫Vuex 132
6.2.1狀態管理與store模式133
6.2.2使用Vuex的情形133
6.2.3在Vue.js組件中獲取Vuex狀態和Getter對象135
6.2.4更新Vuex中的store 138
6.2.5 Vuex模塊的劃分142
6.3 Vue UI庫143
6.3.1 Element UI庫143
6.3.2 Ant Design of Vue UI庫144
6.3.3 iView UI庫145
6.4小結與練習146
6.4.1小結146
6.4.2練習146

第7章項目需求分析和功能說明147
7.1內容髮佈網站的需求分析147
7.1.1系統設計需求和技術說明147
7.1.2後端接口需求148
7.1.3前端頁面需求149
7.2項目策劃和功能設計150
7.2.1項目功能策劃150
7.2.2項目模塊劃分150
7.2.3項目後端API路由定義151
7.2.4項目前端頁面路由定義152
7.3項目原型圖和流程圖153
7.4小結與練習154
7.4.1小結154
7.4.2練習154

第8章項目後端API開發155
8.1開發前的準備工作155
8.1.1初始化項目155
8.1.2連接數據庫156
8.1.3配置服務應用列表161
8.2通用API開發164
8.2.1獲取頁面導航欄的API開發164
8.2.2獲取底部詳細內容的API開發167
8.2.3獲取友情鏈接的API開發168
8.2.4獲取首頁輪播圖的API開發169
8.2.5獲取熱點文章列表內容的API開發171
8.2.6獲取文章列表的API開發173
8.2.7獲取文章詳情的API開發175
8.2.8獲取文章評論的API開發177
8.2.9獲取分類內容的API開發178
8.2.10記錄文章瀏覽量的API開發180
8.3用戶權限相關API開發182
8.3.1用戶模塊開發前的準備工作182
8.3.2用戶評論文章的API開發183
8.3.3獲取用戶資料的API開發185
8.3.4修改用戶資料的API開發187
8.3.5發送私信的API開發189
8.3.6獲取私信列表的API開發191
8.3.7獲取私信的API開發192
8.3.8用戶註冊的API開發194
8.3. 9用戶登錄的API開發196
8.3.10文章分類列表的API開發199
8.3.11文章“點贊”和“踩”功能的API開發201
8.3.12文章收藏功能的API開發202
8.3.13獲取收藏文章列表的API開發203
8.4後台管理相關API開發204
8.4.1文章添加和修改的API開發205
8.4.2文章發布和刪除的API開發208
8.4.3添加和修改分類的API開發210
8.4.4獲取全部用戶列表的API開發211
8.4.5封停用戶的API開發213
8.4.6修改首頁輪播內容的API開發214
8.4.7修改導航內容的API開發216
8.4.8修改底部內容的API開發217
8.4.9修改友情鏈接內容的API開發218
8.4.10其他權限判斷220
8.5小結與練習221
8.5.1小結221
8.5.2練習222

第9章前端頁面開發223
9.1項目前期準備223
9.1.1創建新項目223
9.1.2選擇UI庫224
9.1.3安裝HTTP請求庫225
9.2主要頁面的開發228
9.2.1主頁228
9.2.2文章總列表頁235
9.2.3文章分類結果頁237
9.2.4文章詳情頁239
9.3用戶相關頁面及權限的開發244
9.3.1登錄頁244
9.3.2註冊頁247
9.3.3用戶信息頁251
9.3.4在導航欄中增加用戶信息256
9.3.5私信功能258
9.3.6文章評論功能262
9.3.7文章的收藏和點贊功能265
9.3.8查看所有收藏267
9.4管理員頁面的開發269
9.4.1管理員頁面路由設置269
9.4.2文章編輯頁271
9.4.3文章管理頁275
9.4.4用戶管理頁278
9.5小結與練習280
9.5.1小結280
9.5.2練習280

第10章網站的部署和上線281
10.1遠程連接服務器281
10.1.1虛擬機簡介281
10.1.2虛擬機的安裝282
10.1.3遠程連接雲服務器或虛擬機288
10.2搭建服務器部署環境290
10.2.1配置pm2 290
10.2.2構建用於發布的Vue.js程序293
10.2. 3使用Nginx部署靜態文件294
10.3在服務器端部署代碼295
10.3.1服務器的防火牆設置295
10.3.2使用Git部署代碼296
10.4網站優化常用方法299
10.4.1優化應用299
10.4.2使用nw.js打包項目300
10.5小結與練習302
10.5.1小結302
10.5.2練習303
附錄A檢測Node.js是否支持ES 6的語法304
附錄B npm安裝過慢的解決方法306