第 1篇 基礎(chǔ)準(zhǔn)備篇 第 1章 關(guān)于前端開(kāi)發(fā)你需要知道的事.. 02 1.1 網(wǎng)頁(yè)開(kāi)發(fā)的前世今生. 02 1.1.1 是否還記得曾經(jīng)的前端開(kāi)發(fā) . 02 1.1.2 大前端時(shí)代的來(lái)臨. 03 1.2 MVC、MVP、MVVM 傻傻分不清楚.. 05 1.2.1 MVC 小解. 05 1.2.2 MVP 小解. 06 1.2.3 MVVM 小解 06 1.2.4 三者的區(qū)別和優(yōu)劣. 08 1.3 工欲善其事，必先利其器 08 1.3.1 開(kāi)發(fā)者的眼——Chrome 08 1.3.2 開(kāi)發(fā)者的手——VS Code.. 10 1.3.3 開(kāi)發(fā)者的心——Terminal. 11 1.4 小結(jié) 12 第 2章 關(guān)于Vue.js 的一些小事. 14 2.1 從安裝開(kāi)始 14 2.1.1 直接引入 14 2.1.2 腳手架的配置.. 15 2.1.3 腳手架的使用.. 16 2.2 Vue.js 初體驗(yàn). 21 2.2.1 項(xiàng)目文件內(nèi)容介紹. 21 2.2.2 必不可少的Helle World.. 23 2.2.3 經(jīng)典的TodoList 25 2.3 了解一些特性. 31 2.3.1 新建實(shí)例 31 2.3.2 生命周期 32 2.3.3 模板語(yǔ)法. 34 2.3.4 計(jì)算屬性與過(guò)濾器.. 34 2.3.5 樣式的修改.. 36 2.3.6 條件與列表渲染. 40 2.3.7 事件的處理.. 43 2.3.8 雙向綁定. 46 2.4 小結(jié) 49 第3章 組件詳解.. 51 3.1 組件概念.. 51 3.1.1 什么是組件.. 51 3.1.2 為什么要使用組件.. 52 3.2 組件創(chuàng)建.. 53 3.2.1 組件基礎(chǔ). 53 3.2.2 組件注冊(cè). 55 3.3 組件通信.. 55 3.3.1 父組件與子組件通信 56 3.3.2 子組件與父組件通信 58 3.3.3 子組件之間的通信.. 59 3.4 插槽 60 3.5 特殊情況.. 62 3.6 小結(jié) 65 第4章 ES6 的日常使用 66 4.1 關(guān)于ES6 你需要知道的事 66 4.1.1 ES 的發(fā)展歷史 66 4.1.2 ES6 和JS 的關(guān)系. 67 4.1.3 為什么要使用ES6 68 4.2 ES6 常用語(yǔ)法簡(jiǎn)介. 70 4.2.1 Demo 的分析.. 70 4.2.2 用戶獲取數(shù)據(jù)的方法 72 4.2.3 輸出用戶輸入信息的方法.. 73 4.2.4 判斷最喜歡地點(diǎn)的方法. 74 4.2.5 判斷支出類型的方法 75 4.2.6 保存數(shù)據(jù). 76 4.3 Babel 的支持.. 76 4.3.1 Babel 是什么. 76 4.3.2 Babel 文件配置.. 78 4.3.3 Babel 的實(shí)際調(diào)用 80 4.4 小結(jié) 81 第5章 項(xiàng)目的構(gòu)建 82 5.1 前端項(xiàng)目構(gòu)建——Webpack.. 82 5.1.1 Webpack 是什么.. 82 5.1.2 Webpack 的特點(diǎn).. 83 5.1.3 Webpack 配置規(guī)范 83 5.1.4 Webpack 整體配置一覽.. 87 5.1.5 Webpack 使用. 88 5.1.6 Webpack4.X 的新特性 89 5.2 前端常用插件的介紹. 90 5.2.1 Axios. 90 5.2.2 Element.. 93 5.2.3 Sass.. 97 5.2.4 Esl int.. 100 5.3 后端項(xiàng)目構(gòu)建——Koa.. 102 5.3.1 為什么選擇Koa. 102 5.3.2 構(gòu)建Koa 項(xiàng)目.. 105 5.3.3 koa-router 的優(yōu)化. 106 5.4 數(shù)據(jù)庫(kù)——MySQL 108 5.4.1 MySQL 簡(jiǎn)介.. 108 5.4.2 MySQL 的安裝 109 5.4.3 Sequelize 的使用.. 111 5.5 小結(jié).. 114 第 2篇 項(xiàng)目實(shí)戰(zhàn)篇 第6章 項(xiàng)目分析與設(shè)計(jì). 118 6.1 我們要做一個(gè)什么項(xiàng)目. 118 6.2 實(shí)現(xiàn)哪些功能，需要哪些頁(yè)面. 121 6.2.1 需求分析 121 6.2.2 頁(yè)面設(shè)計(jì) 121 6.2.3 提取公用插件.. 123 6.3 路由的分配.. 123 6.3.1 一級(jí)路由的確定 123 6.3.2 二級(jí)路由的確定 124 6.4 數(shù)據(jù)庫(kù)內(nèi)容的確定.. 125 6.4.1 根據(jù)需求確定數(shù)據(jù)表結(jié)構(gòu). 125 6.4.2 主要字段的配置 126 6.5 小結(jié).. 128 第7章 基礎(chǔ)頁(yè)面的開(kāi)發(fā). 129 7.1 主頁(yè)的開(kāi)發(fā).. 129 7.1.1 頁(yè)面主體header 框架開(kāi)發(fā) 129 7.1.2 主頁(yè)路由配置.. 131 7.1.3 主頁(yè)header 剩余內(nèi)容開(kāi)發(fā) 132 7.1.4 第三方ICON 庫(kù)的引入. 133 7.1.5 首頁(yè)主體框架開(kāi)發(fā). 134 7.1.6 首頁(yè)右側(cè)側(cè)邊欄次組件開(kāi)發(fā).. 136 7.1.7 首頁(yè)右側(cè)側(cè)邊欄主組件開(kāi)發(fā).. 138 7.1.8 主頁(yè)列表外內(nèi)容效果展示. 140 7.1.9 內(nèi)容列表表頭開(kāi)發(fā). 140 7.1.10 模擬數(shù)據(jù)獲取. 142 7.1.11 列表元素開(kāi)發(fā). 143 7.1.12 列表操作按鈕開(kāi)發(fā) 145 7.1.13 列表系列組件的調(diào)用. 147 7.1.14 首頁(yè)列表效果展示 149 7.2 登錄注冊(cè)頁(yè)面的開(kāi)發(fā) 150 7.2.1 確定登錄頁(yè)背景框架.. 150 7.2.2 登錄頁(yè)靜態(tài)內(nèi)容 152 7.2.3 登錄頁(yè)表單驗(yàn)證等相關(guān)內(nèi)容.. 154 7.2.4 登錄頁(yè)信息提示及整體效果.. 157 7.3 注冊(cè)登錄功能實(shí)現(xiàn).. 158 7.3.1 數(shù)據(jù)表的確定.. 158 7.3.2 用戶注冊(cè)功能實(shí)現(xiàn). 161 7.3.3 用戶登錄登出與信息存儲(chǔ). 164 7.4 小結(jié).. 169 第8章 文章和問(wèn)題的日常操作. 170 8.1 圖片和富文本的處理 170 8.1.1 富文本插件的使用. 170 8.1.2 文章編輯頁(yè)header 組件開(kāi)發(fā). 172 8.1.3 文章編輯頁(yè)主組件開(kāi)發(fā) 174 8.1.4 文章編輯頁(yè)路由注冊(cè)與效果展示. 175 8.1.5 文章編輯頁(yè)發(fā)布文章方法. 176 8.1.6 圖片的上傳接口開(kāi)發(fā).. 177 8.1.7 圖片上傳前端開(kāi)發(fā). 179 8.1.8 富文本組件中的圖片上傳. 180 8.2 文章的增、刪、改、查. 182 8.2.1 文章新增頁(yè)面的跳轉(zhuǎn).. 182 8.2.2 文章相關(guān)數(shù)據(jù)表配置.. 182 8.2.3 文章增加刪除接口的開(kāi)發(fā). 185 8.2.4 文章查詢更新接口開(kāi)發(fā) 188 8.2.5 文章列表開(kāi)發(fā).. 190 8.2.6 文章詳情頁(yè)面開(kāi)發(fā). 192 8.2.7 文章跳轉(zhuǎn)鏈接修改. 195 8.3 問(wèn)題的增、改 195 8.3.1 問(wèn)題增加更新前端模塊開(kāi)發(fā).. 196 8.3.2 問(wèn)題增加修改與header 部分修改 198 8.3.3 問(wèn)題數(shù)據(jù)表新建 200 8.3.4 問(wèn)題增加更新接口開(kāi)發(fā) 201 8.4 小結(jié).. 203 第9章 評(píng)論、回答和狀態(tài)的操作.. 204 9.1 問(wèn)題回答的相關(guān)操作 204 9.1.1 問(wèn)題詳情前端頁(yè)面開(kāi)發(fā) 204 9.1.2 問(wèn)題詳情前端邏輯開(kāi)發(fā) 207 9.1.3 新建回答數(shù)據(jù)表 210 9.1.4 回答查找、刪除和更新接口.. 211 9.1.5 問(wèn)題答案的查詢接口.. 214 9.1.6 問(wèn)題回答的前端展示.. 216 9.2 評(píng)論的相關(guān)操作. 219 9.2.1 評(píng)論新建前端開(kāi)發(fā). 219 9.2.2 新建評(píng)論數(shù)據(jù)表 222 9.2.3 評(píng)論新建查找刪除接口開(kāi)發(fā).. 223 9.2.4 新建評(píng)論效果展示. 226 9.2.5 評(píng)論展示前端開(kāi)發(fā). 227 9.2.6 評(píng)論功能組件開(kāi)發(fā). 228 9.2.7 評(píng)論功能組件調(diào)用. 231 9.2.8 一級(jí)評(píng)論效果展示. 233 9.2.9 評(píng)論列表的循環(huán)調(diào)用.. 234 9.2.10 多級(jí)評(píng)論效果展示 236 9.2.11 評(píng)論個(gè)數(shù)展示. 236 9.3 狀態(tài)的相關(guān)操作. 238 9.3.1 狀態(tài)的更新. 238 9.3.2 狀態(tài)中特殊情況的處理 242 9.4 小結(jié).. 243 第 10章 個(gè)人主頁(yè)的開(kāi)發(fā). 245 10.1 個(gè)人信息的修改 245 10.1.1 個(gè)人信息頁(yè)面的新建. 245 10.1.2 個(gè)人信息頁(yè)面查看修改接口開(kāi)發(fā) 248 10.1.3 個(gè)人信息頁(yè)面的跳轉(zhuǎn). 249 10.1.4 個(gè)人座右銘的修改 252 10.1.5 用戶頭像修改. 254 10.2 個(gè)人主頁(yè)列表開(kāi)發(fā). 258 10.2.1 列表框架的構(gòu)建.. 258 10.2.2 作者回答查詢接口開(kāi)發(fā).. 261 10.2.3 作者回答查詢接口調(diào)用.. 262 10.2.4 作者回答刪除功能開(kāi)發(fā).. 264 10.2.5 作者回答編輯功能開(kāi)發(fā).. 267 10.2.6 作者文章的查看功能開(kāi)發(fā) 270 10.2.7 作者文章的刪除功能開(kāi)發(fā) 272 10.2.8 作者文章的編輯功能開(kāi)發(fā) 273 10.2.9 提問(wèn)的列表 275 10.3 小結(jié). 278 第 11章 項(xiàng)目的部署.. 279 11.1 服務(wù)器的購(gòu)買(mǎi)與配置.. 279 11.2 服務(wù)器的連接與配置.. 280 11.2.1 服務(wù)器連接的兩種方法.. 281 11.2.2 服務(wù)器環(huán)境安裝.. 282 11.2.3 服務(wù)器數(shù)據(jù)庫(kù)詳細(xì)配置.. 283 11.2.4 服務(wù)器項(xiàng)目文件夾創(chuàng)建.. 286 11.3 服務(wù)部署 286 11.3.1 前端項(xiàng)目部署. 286 11.3.2 后端項(xiàng)目部署. 289 11.4 小結(jié). 291 第 12章 總結(jié).. 293 12.1 第 1 篇內(nèi)容回顧 293 12.2 第 2 篇內(nèi)容回顧 294 12.3 小結(jié). 295