Vue.js項目開發實戰

內容簡介

本書以JavaScript語言為基礎，以Vue.js項目開發過程為主線，介紹了一整套面向Vue.js的項目開發技術。從NoSQL資料庫的搭建到Express項目API的編寫，最後再由Vue.js顯示在前端頁面中，讓讀宙備喇者可以非常迅速地掌握一門技術，提高項目開發的諒龍能力。

本書分為4篇。第1篇介紹了Vue.js基礎環境的搭建，是全書的基石；第2篇介紹了電影網站項目的設計重糊影凝，涵蓋ES 6、Webpack、工程化環境搭建等關鍵技術；第3篇介紹了電影網站項目前端和後端的實現，涵蓋Node.js後端技術、Vue.js各種組件和API等技術；第4篇介紹了頁面最佳化，通過講解一些Vue.js模板和框架的用法，帶領讀者製作更加美觀的UI界面。

本書適合Vue.js初學希匪懂者和進階者閱讀，也適合其他Web前端和後端開發愛好者閱讀；對於一些IT領域的產品經理而言，本書也有較高的參考價值；對於一些培訓機構和各類開設Web開發課程的學校來說，本書是一本很好的項目開發教程。

圖書目錄

第1篇背景知識

第1章初探網頁開發 2

1.1 網頁開發歷史 2

1.1.1 傳統網頁開發 3

1.1.2 新前端網頁開發 5

1.2 MVVM風格開發框架 6

1.2.1 為什麼會出現MVVM 6

1.2.2 MVVM架構的最佳實踐 7

1.2.3 MVC、MVP和MVVM開發模式對比 8

1.3 Vue.js來了 9

1.4 Vue.js的安裝 10

1.4.1 使用獨立版本 11

1.4.2 使用CDN安裝 13

1.4.3 “npm大法”安裝 15

1.4.4 使用Chrome瀏覽器測試Vue.js的雙向綁定 17

1.5 Vue.js的主要特性 19

1.5.1 組件 19

1.5.2 模板 22

1.5.3 回響式設計 22

1.5.4 過渡效果 22

1.5.5 單檔案組件 24

1.6 小結與練習 24

1.6.1 小結 24

1.6.2 練習 25

第2篇項目設計

第2章開啟Vue.js之旅的準備工作 28

2.1 JavaScript運行與開發環境 28

2.1.1 神奇的包管理器——榜芝葛npm 28

2.1.2 好用的瀏覽器——Chrome 31

2.1.3 Vue.js的調試神器——vue-devtools 34

2.1.4 非常榜仔地智慧型的IDE——WebStorm 36

2.2 認識ECMAScript 6（ES 6） 39

2.2.1 ES 6的前世今生 39

2.2.2 為什麼要使用ES 6 40

2.3 ES 6的一些常用語法 40

2.3.1 Default Parameters（默認參數） 40

2.3.2 Template Literals（模板文本） 41

2.3.3 Multi-line Strings（多行字元串） 41

2.3.4 Destructuring Assignment（解構賦值） 42

2.3.5 Enhanced Object Literals（增強的對象文本） 42

2.3.6 Arrow Functions（箭頭函式） 43

2.3.7 Promise實現 44

2.3.8 塊作用域構造let 45

2.3.9 Classes（類） 46

2.3.10 Modules（模組） 46

2.4 使用Babel進行ES 6的轉化棕嫌料料 47

2.4.1 安裝Babel 48

2.4.2 使用Babel 48

2.5 精簡壓縮生產環境的Webpack 51

2.5.1 Webpack是什麼 51

2.5.2 配置一個完整項目的Webpack 52

2.5.3 不得不說的新版Webpack 4 56

2.6 小結與練習 59

2.6.1 小結 59

2.6.2 練習 59

第3章從一個電影網站項目學習Vue.js 60

3.1 快速構建第一個Vue.js程式 60

3.1.1 通過CLI構建套用 60

3.1.2 輸出Hello world！ 63

3.1.3 開發環境與生產環境 66

3.2 電影網站的設計 70

3.2.1 網站的功能設計 70

3.2.2 網站的路由設計 71

3.2.3 網站的頁面設計 72

3.3 電影網站的技術選擇 73

3.3.1 服務的堅實後盾——資料庫 73

3.3.2 數據的搬運和加工——伺服器端 74

3.4 小結與練習 74

3.4.1 小結 74

3.4.2 練習 75

第4章電影網站資料庫的搭建 76

4.1 什麼是資料庫 76

4.1.1 什麼是SQL 76

4.1.2 什麼是NoSQL 78

4.1.3 兩種資料庫的對比分析 79

4.2 MongoDB基礎入門 80

4.2.1 為什麼選擇MongoDB 80

4.2.2 安裝MongoDB 81

4.2.3 啟動MongoDB 83

4.2.4 安裝MongoDB的可視化界面 87

4.2.5 MongoDB的基礎操作 90

4.3 電影網站資料庫的建立 92

4.3.1 資料庫的分析與設計 93

4.3.2 數據集的建立 94

4.4 小結與練習 96

4.4.1 小結 96

4.4.2 練習 97

第3篇 Vue.js套用開發

第5章電影網站伺服器端的設計 100

5.1 使用JavaScript開發後端服務 100

5.1.1 神奇的Node.js 100

5.1.2 什麼是Express 101

5.2 使用Express進行Web開發 102

5.2.1 安裝Express 102

5.2.2 設計後台服務API 105

5.2.3 設計路由 107

5.3 伺服器測試 108

5.3.1 一個測試HTTP請求的Postman外掛程式 108

5.3.2 在Chrome中安裝Postman外掛程式 109

5.3.3 使用Postman外掛程式進行數據測試 110

5.4 Express後台代碼編寫 112

5.4.1 新建工程 112

5.4.2 連線資料庫 115

5.4.3 使用Supervisor監控代碼的修改 118

5.5 用戶系統開發 119

5.5.1 註冊路由 122

5.5.2 登錄路由 125

5.5.3 找回密碼路由 128

5.5.4 提交評論路由 133

5.5.5 點讚路由 135

5.5.6 下載路由 137

5.5.7 傳送站內信路由 138

5.5.8 接收站內信路由 141

5.6 前台API開發 143

5.6.1 顯示排行榜 145

5.6.2 顯示文章列表 145

5.6.3 顯示文章內容 146

5.6.4 顯示用戶個人信息 147

5.7 後台API開發 148

5.7.1 添加電影 148

5.7.2 刪除電影 151

5.7.3 更新電影 152

5.7.4 獲取所有電影 153

5.7.5 獲取用戶評論 154

5.7.6 審核用戶評論 154

5.7.7 刪除用戶評論 156

5.7.8 封停用戶 157

5.7.9 更新用戶密碼 159

5.7.10 顯示所有用戶 160

5.7.11 管理用戶許可權 162

5.7.12 新增文章 163

5.7.13 刪除文章 165

5.7.14 新增主頁推薦 166

5.7.15 刪除熱點信息 168

5.8 小結與練習 169

5.8.1 小結 169

5.8.2 練習 170

第6章 Vue.js項目開發技術解析 171

6.1 Vue.js實例 171

6.1.1 何為構造器 171

6.1.2 實例的屬性和方法 172

6.1.3 生命周期 173

6.2 Vue.js路由 175

6.2.1 RESTful模式的路由 175

6.2.2 安裝vue-router 175

6.3 Vue.js路由配置vue-router 176

6.3.1 動態路由匹配 176

6.3.2 嵌套路由 179

6.3.3 編程式導航 181

6.3.4 命名路由 183

6.3.5 命名視圖 184

6.3.6 重定向和別名 186

6.3.7 路由組件傳遞參數 187

6.3.8 HTML 5 History模式 188

6.4 數據獲取 189

6.4.1 導航守衛 189

6.4.2 數據獲取 193

6.5 電影網站項目路由設計 195

6.5.1 新建Vue.js項目 195

6.5.2 前台路由頁面編寫 198

6.5.3 路由測試 200

6.6 小結與練習 201

6.6.1 小結 201

6.6.2 練習 201

第7章模板學習 202

7.1 Vue.js模板 202

7.1.1 什麼是模板 202

7.1.2 為什麼使用模板 203

7.2 Vue.js模板語法 203

7.2.1 文本輸出 204

7.2.2 純HTML輸出 205

7.2.3 JavaScript表達式 206

7.2.4 指令參數 208

7.3 計算屬性和觀察者屬性 209

7.3.1 計算屬性 209

7.3.2 計算屬性的快取與方法 210

7.3.3 計算屬性與被觀察的屬性 211

7.3.4 計算屬性的setter方法 212

7.3.5 觀察者 213

7.3.6 聊天機器人小實例 213

7.4 電影網站項目頁面編寫 219

7.4.1 主頁 219

7.4.2 電影列表頁 226

7.4.3 電影詳情頁 228

7.4.4 新聞詳情頁 231

7.4.5 用戶登錄頁 233

7.4.6 用戶註冊頁 234

7.4.7 用戶密碼找回頁 235

7.4.8 用戶詳情頁 237

7.4.9 站內信的傳送頁面 239

7.5 小結與練習 241

7.5.1 小結 241

7.5.2 練習 242

第8章讓頁面變成動態頁面 243

8.1 條件渲染 243

8.1.1 v-if套用 243

8.1.2 v-show套用 244

8.2 列表渲染 244

8.2.1 v-for列表渲染 245

8.2.2 使用of作為分隔設定 245

8.2.3 v-for與v-if同時使用 247

8.2.4 key關鍵字使用 250

8.3 事件處理器v-on 250

8.3.1 方法事件處理器 251

8.3.2 內聯處理器 252

8.3.3 事件修飾符 252

8.3.4 鍵值修飾符 253

8.3.5 修飾鍵 254

8.3.6 滑鼠的3個按鍵修飾符 254

8.4 互動的靈魂——表單 255

8.4.1 文本輸入 255

8.4.2 多行文本 256

8.4.3 複選框 257

8.4.4 單選按鈕 257

8.4.5 選擇按鈕 258

8.5 值的綁定 260

8.5.1 複選框值的綁定 260

8.5.2 單選按鈕值的綁定 260

8.5.3 選擇列表的設定和值的綁定 261

8.5.4 完整的表單實例 261

8.6 修飾符 264

8.6.1 修飾符.lazy的使用 264

8.6.2 修飾符.number的使用 264

8.6.3 修飾符.trim的使用 264

8.6.4 修飾符實例 264

8.7 電影網站項目功能編寫 266

8.7.1 主頁伺服器內容獲取 266

8.7.2 主頁獲取推薦內容顯示 267

8.7.3 主頁列表顯示 269

8.7.4 主頁用戶狀態顯示 272

8.7.5 電影列表頁 273

8.7.6 電影詳情頁 275

8.7.7 新聞頁面功能 280

8.7.8 用戶登錄功能 282

8.7.9 用戶註冊頁面功能 284

8.7.10 用戶密碼找回功能 286

8.7.11 用戶詳情頁邏輯 288

8.7.12 站內信邏輯 291

8.8 小結與練習 296

8.8.1 小結 296

8.8.2 練習 296

第4篇頁面最佳化

第9章讓頁面變得更加美麗 298

9.1 使用CSS美化Vue.js 298

9.1.1 什麼是CSS 298

9.1.2 如何在項目中使用CSS 299

9.2 動態綁定class，讓頁面變得美觀 300

9.2.1 綁定對象語法 300

9.2.2 綁定數組語法 302

9.2.3 自動添加前綴 304

9.2.4 綁定多重值 305

9.3 豐富多彩的模板和UI框架 306

9.3.1 常用的UI框架 306

9.3.2 如何使用專門為Vue.js準備的UI框架 309

9.4 使用Vue-iView建立精美的套用 309

9.4.1 安裝iView 310

9.4.2 iView的用法 312

9.4.3 套用iView主題 314

9.5 常用組件 315

9.5.1 柵格（Grid）組件 315

9.5.2 按鈕 318

9.5.3 表單組件 319

9.5.4 表格 325

9.6 使用iView美化項目 328

9.6.1 在項目中使用iView 328

9.6.2 主頁的樣式改造 330

9.6.3 登錄頁的樣式改造 333

9.7 小結與練習 335

9.7.1 小結 335

9.7.2 練習 336

附錄 iView組件默認樣式 337

作者簡介

張帆，資深全棧“碼農”。有多年的項目設計和Web開發經驗，熟悉各種主流前端和後端開發工具，長期從事新技術的研究與項目實踐。現專注於JavaScript全棧開發，以及微信小程式和小遊戲的開發實踐與探索。

Vue.js項目開發實戰

基本介紹

內容簡介

圖書目錄

作者簡介

作者簡介

相關詞條

熱門詞條