Vue.js+Node.js開(kāi)發(fā)實(shí)戰(zhàn)：從入門(mén)到項(xiàng)目上線

第1章  開(kāi)發(fā)一個(gè)網(wǎng)站的準(zhǔn)備  1
1.1  如何從零開(kāi)始建設(shè)一個(gè)網(wǎng)站     1
1.1.1  網(wǎng)站建設(shè)流程  1
1.1.2  網(wǎng)站開(kāi)發(fā)技術(shù)和工具      2
1.2  步：購(gòu)買(mǎi)一個(gè)域名     3
1.2.1  域名簡(jiǎn)介   4
1.2.2  如何通過(guò)阿里云購(gòu)買(mǎi)域名     5
1.3  第二步：域名的備案和解析     8
1.3.1  域名的實(shí)名認(rèn)證和備案  8
1.3.2  域名相關(guān)解析  9
1.4  第三步：購(gòu)買(mǎi)一臺(tái)服務(wù)器 10
1.4.1  云服務(wù)器   10
1.4.2  服務(wù)器的后臺(tái)管理  11
1.5  小結(jié)與練習(xí)  13
1.5.1  小結(jié)   13
1.5.2  練習(xí)   13
第2章  Node.js Vue.js項(xiàng)目開(kāi)發(fā)基礎(chǔ)    14
2.1  Node.js簡(jiǎn)介 14
2.1.1  Node.js的前世今生 14
2.1.2  在Windows中安裝Node.js   15
2.1.3  在Linux中安裝Node.js 18
2.1.4  個(gè)Node.js示例——Hello World   20
2.2  Node.js后端框架Express  21
2.2.1  Express的發(fā)展 21
2.2.2  Express的安裝 23
2.2.3  Express項(xiàng)目示例——Hello World       25
2.2.4  RESTful API規(guī)范    25
2.3  頁(yè)面顯示框架Vue.js  27
2.3.1  Vue.js簡(jiǎn)介       27
2.3.2  Vue.js的安裝   28
2.3.3  用Vue.js編寫(xiě)Hello World——CDN方式   29
2.3.4  用Vue.js編寫(xiě)Hello World——Webpack方式    30
2.3.5  其他頁(yè)面顯示框架  34
2.4  JavaScript代碼編寫(xiě)——IDE的選擇       35
2.4.1  編寫(xiě)基礎(chǔ)的JavaScript代碼   35
2.4.2  JavaScript開(kāi)發(fā)利器——WebStorm      37
2.5  小結(jié)與練習(xí)  38
2.5.1  小結(jié)   38
2.5.2  練習(xí)   38
第3章  項(xiàng)目開(kāi)發(fā)準(zhǔn)備      39
3.1  初識(shí)數(shù)據(jù)庫(kù)  39
3.1.1  數(shù)據(jù)庫(kù)簡(jiǎn)介      39
3.1.2  SQL數(shù)據(jù)庫(kù)和NoSQL數(shù)據(jù)庫(kù)      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簡(jiǎn)介    46
3.3.1  為什么選擇Redis    46
3.3.2  在Windows中安裝Redis      47
3.3.3  在Linux中安裝Redis    49
3.4  版本控制     51
3.4.1  版本控制簡(jiǎn)介  51
3.4.2  Git和GitHub簡(jiǎn)介  51
3.4.3  安裝和使用Git 54
3.5  測(cè)試工具     57
3.5.1  瀏覽器自帶的開(kāi)發(fā)者工具     57
3.5.2  Postman插件    59
3.6  小結(jié)與練習(xí)  61
3.6.1  小結(jié)   61
3.6.2  練習(xí)   62
第4章  項(xiàng)目后臺(tái)技術(shù)Express 63
4.1  開(kāi)發(fā)Express應(yīng)用程序      63
4.1.1  Express應(yīng)用程序生成器 63
4.1.2  Express提供的路由 66
4.1.3  使用Express托管靜態(tài)文件   68
4.2  Express和數(shù)據(jù)庫(kù)交互       70
4.2.1  連接MongoDB數(shù)據(jù)庫(kù)   70
4.2.2  使用對(duì)象模型驅(qū)動(dòng)連接MongoDB       72
4.2.3  如何定義模型  73
4.2.4  Node.js和Redis集成     74
4.3  Express高級(jí)應(yīng)用       75
4.3.1  Express中的中間件 75
4.3.2  Express錯(cuò)誤處理    79
4.4  小結(jié)與練習(xí)  81
4.4.1  小結(jié)   81
4.4.2  練習(xí)   81
第5章  項(xiàng)目前端開(kāi)發(fā)之Vue.js基礎(chǔ)知識(shí)     82
5.1  Vue.js開(kāi)發(fā)基礎(chǔ)  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輸入監(jiān)聽(tīng)       91
5.1.6  Vue.js事件處理——v-on綁定      94
5.2  Vue.js的生命周期      97
5.2.1  生命周期與鉤子函數(shù)      97
5.2.2  演示Vue.js的生命周期  99
5.3  Vue.js的模板語(yǔ)法      100
5.3.1  文本   101
5.3.2  JavaScript表達(dá)式    103
5.3.3  v-bind綁定動(dòng)態(tài)屬性      104
5.4  Vue.js的組件化  105
5.4.1  組件化簡(jiǎn)介      105
5.4.2  組件的創(chuàng)建      106
5.4.3  組件的注冊(cè)      106
5.4.4  組件間的數(shù)據(jù)傳遞  109
5.4.5  監(jiān)聽(tīng)子組件事件      111
5.4.6  通過(guò)插槽分發(fā)內(nèi)容  114
5.5  小結(jié)與練習(xí)  116
5.5.1  小結(jié)   116
5.5.2  練習(xí)   116
第6章  Vue.js高級(jí)應(yīng)用   117
6.1  Vue.js的vue-router庫(kù)       117
6.1.1  Vue.js的頁(yè)面路由實(shí)現(xiàn)   117
6.1.2  使用vue-cli初始化Vue.js項(xiàng)目    118
6.1.3  安裝和配置vue-router    122
6.1.4  動(dòng)態(tài)路由匹配  123
6.1.5  路由嵌套   126
6.1.6  路由跳轉(zhuǎn)   128
6.1.7  導(dǎo)航守衛(wèi)   131
6.2  Vue.js的狀態(tài)管理庫(kù)Vuex 132
6.2.1  狀態(tài)管理與store模式    133
6.2.2  使用Vuex的情形    133
6.2.3  在Vue.js組件中獲取Vuex狀態(tài)和Getter對(duì)象   135
6.2.4  更新Vuex中的store       138
6.2.5  Vuex模塊的劃分     142
6.3  Vue UI庫(kù)     143
6.3.1  Element UI庫(kù)   143
6.3.2  Ant Design of Vue UI庫(kù) 144
6.3.3  iView UI庫(kù)      145
6.4  小結(jié)與練習(xí)  146
6.4.1  小結(jié)   146
6.4.2  練習(xí)   146
第7章  項(xiàng)目需求分析和功能說(shuō)明  147
7.1  內(nèi)容發(fā)布網(wǎng)站的需求分析 147
7.1.1  系統(tǒng)設(shè)計(jì)需求和技術(shù)說(shuō)明     147
7.1.2  后端接口需求  148
7.1.3  前端頁(yè)面需求  149
7.2  項(xiàng)目策劃和功能設(shè)計(jì) 150
7.2.1  項(xiàng)目功能策劃  150
7.2.2  項(xiàng)目模塊劃分  150
7.2.3  項(xiàng)目后端API路由定義  151
7.2.4  項(xiàng)目前端頁(yè)面路由定義  152
7.3  項(xiàng)目原型圖和流程圖 153
7.4  小結(jié)與練習(xí)  154
7.4.1  小結(jié)   154
7.4.2  練習(xí)   154
第8章  項(xiàng)目后端API開(kāi)發(fā)      155
8.1  開(kāi)發(fā)前的準(zhǔn)備工作     155
8.1.1  初始化項(xiàng)目      155
8.1.2  連接數(shù)據(jù)庫(kù)      156
8.1.3  配置服務(wù)應(yīng)用列表  161
8.2  通用API開(kāi)發(fā)     164
8.2.1  獲取頁(yè)面導(dǎo)航欄的API開(kāi)發(fā)  164
8.2.2  獲取底部詳細(xì)內(nèi)容的API開(kāi)發(fā)     167
8.2.3  獲取友情鏈接的API開(kāi)發(fā)     168
8.2.4  獲取首頁(yè)輪播圖的API開(kāi)發(fā)  169
8.2.5  獲取熱點(diǎn)文章列表內(nèi)容的API開(kāi)發(fā)     171
8.2.6  獲取文章列表的API開(kāi)發(fā)     173
8.2.7  獲取文章詳情的API開(kāi)發(fā)     175
8.2.8  獲取文章評(píng)論的API開(kāi)發(fā)     177
8.2.9  獲取分類(lèi)內(nèi)容的API開(kāi)發(fā)     178
8.2.10  記錄文章瀏覽量的API開(kāi)發(fā)       180
8.3  用戶權(quán)限相關(guān)API開(kāi)發(fā)     182
8.3.1  用戶模塊開(kāi)發(fā)前的準(zhǔn)備工作  182
8.3.2  用戶評(píng)論文章的API開(kāi)發(fā)     183
8.3.3  獲取用戶資料的API開(kāi)發(fā)     185
8.3.4  修改用戶資料的API開(kāi)發(fā)     187
8.3.5  發(fā)送私信的API開(kāi)發(fā)     189
8.3.6  獲取私信列表的API開(kāi)發(fā)     191
8.3.7  獲取私信的API開(kāi)發(fā)     192
8.3.8  用戶注冊(cè)的API開(kāi)發(fā)     194
8.3.9  用戶登錄的API開(kāi)發(fā)     196
8.3.10  文章分類(lèi)列表的API開(kāi)發(fā)   199
8.3.11  文章“點(diǎn)贊”和“踩”功能的API開(kāi)發(fā)   201
8.3.12  文章收藏功能的API開(kāi)發(fā)   202
8.3.13  獲取收藏文章列表的API開(kāi)發(fā)   203
8.4  后臺(tái)管理相關(guān)API開(kāi)發(fā)     204
8.4.1  文章添加和修改的API開(kāi)發(fā)  205
8.4.2  文章發(fā)布和刪除的API開(kāi)發(fā)  208
8.4.3  添加和修改分類(lèi)的API開(kāi)發(fā)  210
8.4.4  獲取全部用戶列表的API開(kāi)發(fā)     211
8.4.5  封停用戶的API開(kāi)發(fā)     213
8.4.6  修改首頁(yè)輪播內(nèi)容的API開(kāi)發(fā)     214
8.4.7  修改導(dǎo)航內(nèi)容的API開(kāi)發(fā)     216
8.4.8  修改底部?jī)?nèi)容的API開(kāi)發(fā)     217
8.4.9  修改友情鏈接內(nèi)容的API開(kāi)發(fā)     218
8.4.10  其他權(quán)限判斷 220
8.5  小結(jié)與練習(xí)  221
8.5.1  小結(jié)   221
8.5.2  練習(xí)   222
第9章  前端頁(yè)面開(kāi)發(fā)      223
9.1  項(xiàng)目前期準(zhǔn)備     223
9.1.1  創(chuàng)建新項(xiàng)目      223
9.1.2  選擇UI庫(kù) 224
9.1.3  安裝HTTP請(qǐng)求庫(kù)  225
9.2  主要頁(yè)面的開(kāi)發(fā)  228
9.2.1  主頁(yè)   228
9.2.2  文章總列表頁(yè)  235
9.2.3  文章分類(lèi)結(jié)果頁(yè)      237
9.2.4  文章詳情頁(yè)      239
9.3  用戶相關(guān)頁(yè)面及權(quán)限的開(kāi)發(fā)     244
9.3.1  登錄頁(yè)      244
9.3.2  注冊(cè)頁(yè)      247
9.3.3  用戶信息頁(yè)      251
9.3.4  在導(dǎo)航欄中增加用戶信息     256
9.3.5  私信功能   258
9.3.6  文章評(píng)論功能  262
9.3.7  文章的收藏和點(diǎn)贊功能  265
9.3.8  查看所有收藏  267
9.4  管理員頁(yè)面的開(kāi)發(fā)     269
9.4.1  管理員頁(yè)面路由設(shè)置      269
9.4.2  文章編輯頁(yè)      271
9.4.3  文章管理頁(yè)      275
9.4.4  用戶管理頁(yè)      278
9.5  小結(jié)與練習(xí)  280
9.5.1  小結(jié)   280
9.5.2  練習(xí)   280
第10章  網(wǎng)站的部署和上線    281
10.1  遠(yuǎn)程連接服務(wù)器       281
10.1.1  虛擬機(jī)簡(jiǎn)介    281
10.1.2  虛擬機(jī)的安裝 282
10.1.3  遠(yuǎn)程連接云服務(wù)器或虛擬機(jī)       288
10.2  搭建服務(wù)器部署環(huán)境       290
10.2.1  配置pm2 290
10.2.2  構(gòu)建用于發(fā)布的Vue.js程序       293
10.2.3  使用Nginx部署靜態(tài)文件    294
10.3  在服務(wù)器端部署代碼       295
10.3.1  服務(wù)器的防火墻設(shè)置    295
10.3.2  使用Git部署代碼 296
10.4  網(wǎng)站優(yōu)化常用方法   299
10.4.1  優(yōu)化應(yīng)用 299
10.4.2  使用nw.js打包項(xiàng)目     300
10.5  小結(jié)與練習(xí)       302
10.5.1  小結(jié) 302
10.5.2  練習(xí) 303
附錄A  檢測(cè)Node.js是否支持ES 6的語(yǔ)法  304
附錄B  npm安裝過(guò)慢的解決方法  306