Vue.js项目开发实战

本书以JavaScript语言为基础，以Vue.js项目开发过程为主线，介绍了一整套面向Vue.js的项目开发技术。从NoSQL数据库的搭建到Express项目API的编写，后再由Vue.js显示在前端的页面中，让读者可以非常迅速地掌握这些技术，提高项目开发的能力。本书分为4篇。第1篇介绍了Vue.js基础环境搭建，是全书的基石；第2篇介绍了电影网站项目的设计，涵盖ES6、Webpack和工程化环境搭建等关键技术；第3篇介绍了电影网站项目的前端和后端的实现，涵盖Node.js后端技术、Vue.js各种组件和API等技术；第4篇介绍了页面优化，通过学习一些Vue.js模板和框架，从而制作更加美观的用户界面（UI）。本书适合Vue.js初学者和进阶者阅读，也适合其他Web前端和后端开发爱好者阅读。对于一些产品经理，本书也同样适合阅读。另外，对于培训机构和各类开设Web开发课程的院校，本书是一本很好的项目开发教程。

张帆，资深全栈“码农”。有多年的项目设计和Web开发经验，熟悉各种主流前端和后端开发工具，长期从事新技术的研究与项目实践。现专注于JavaScript全栈开发，以及微信小程序和小游戏的开发实践与探索。

前言　　　　随着手机和移动互联网市场的日益成熟，移动App领域也从如何开发，发展到如何更高效、更低成本地开发阶段。传统的原生平台（PC、iOS和Android）开发技术虽然比较成熟，但由于其开发效率和成本的限制，已经无法满足移动互联网App的开发需求。
　　跨平台技术横空出世，大量的JavaScript框架和工具得以迅速流行，而Vue.js跃升为其中的佼佼者，成为构建用户界面的绝佳实践技术之一。
　　Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue.js的核心库只关注视图层，并且采用自底向上增量开发的设计，非常容易学习。
　　Vue.js完全有能力驱动采用单文件组件和Vue.js生态系统支持的库来开发复杂的单页应用，它本身也非常容易与其他库或已有项目进行整合。
　　目前，市面上有关Vue.js的书甚是驳杂，大多数是对专业文档的复述和非常难懂的底层知识的介绍。很难想象一个编程的初学者，或者只是一个初期尝试Web开发的学生该如何阅读这样的书。
　　而本书是一本专注于Vue.js项目实战的书，内容涵盖应用广泛的前端和后端技术，可以指导读者构建自身的知识框架。Vue.js主要擅长前端视图层的开发，本书不但介绍了Vue.js的一些开发技巧，而且用大量篇幅介绍了如何构建一个合格的工程项目，以及如何用Vue.js在一个项目中开发出所需要的效果。
　　本书以实战为主旨，从一个由Node.js开发的完整后台开始，去制作一个电影网站，完成这项工程的每一个步骤，从而提高读者的整体技术水平。本书涵盖了Vue.js中常用的组件、API、布局、第三方UI组件库、请求和数据更新等内容，可以让读者全面、深入、透彻地理解Vue.js主流开发技术和整个项目工程的设计方法，从而提升实际开发水平和项目实战能力。
　　本书涉及的知识点较多，如图1的词云图所示。即便是一个对Vue.js一无所知的“小白”，通过阅读本书，也可以一点一滴地积累知识，完成整个Vue.js的学习。
图1 词云图　　本书的学习流程如图2所示。
图2 本书学习流程本书特色　　1．涵盖Web开发的常用技术　　本书不仅是一本介绍Vue.js框架技术的图书，更是一本JavaScript全栈技术图书。书中不仅涵盖从HTML 5、CSS 3到JavaScript脚本编程等Web开发的基础知识，而且也涵盖NoSQL数据库技术、Node.js服务器端开发技术及页面优化技术等高级开发知识。
　　2．注重实战，通过一个完整的项目带领读者学习　　本书通过一个完整的Web工程项目案例贯穿全书，带领读者全流程参与该项目的整个开发过程，让读者可以掌握Web开发的完整技术链，从而提升实际项目开发水平。
　　3．对项目案例的核心源代码做了详细注释和讲解　　为了便于读者理解本书内容，提高学习效率，本书在讲解时给出了书中项目案例的核心源代码，并对源代码做了详细注释，对实现方法和思路做了详细讲解。
　　4．展现项目设计思路和项目管理流程　　笔者认为，一个优秀的程序员不仅要有良好的代码编写能力，更要有对整个项目的设计思路和把控能力，这对于编写业务逻辑的程序员尤其重要。本书从第2章开始就逐步渗透了项目管理的相关知识，展现了从项目设计到项目开发的整个流程。
本书内容　　第1篇 背景知识（第1章）　　本篇主要介绍了网页开发的相关背景知识和Vue.js的背景知识，并通过Hello World标准入门示例带领读者体验如何简单地使用Vue.js。通过对本篇内容的学习，读者可以掌握Vue.js的安装方法，并对Vue.js的主要特性有个大概的了解，从而给后续学习打好基础。
　　第2篇 项目设计（第2～4章）　　本篇主要介绍了一个电影网站的项目设计，包括整个项目的UI设计、路由设计和数据库设计等。通过对本篇内容的学习，读者可以了解一个完整的项目应该如何去构思和设计，应该包含哪些内容，从而提高自己的项目设计能力。
　　第3篇 Vue.js应用开发（第5~8章）　　本篇主要介绍了电影网站前端和后端的实现，涵盖Node.js技术、Vue.js组件和API等技术。本篇通过大量的代码展示了Vue.js的强大功能，并比较了当前流行的前端技术和传统的Web开发技术的差异。通过对本篇内容的学习，读者可以系统地掌握Vue.js应用开发所需要掌握的各种技术。
　　第4篇 页面优化（第9章）　　本篇主要介绍了如何使用网络中已有的UI库或其他造好的“车轮”，去优化自己的页面。通过应用这些流行的UI组件库，开发人员可以快速地将一个页面制作得非常精美。通过对本章内容的学习，读者可以掌握页面优化的各种“武器”，从而开发出更加美观的页面。
本书配套资源获取方式　　本书涉及的源代码文件等配套资源需要读者自行下载。请在华章公司的网站www.hzbook.com上搜索到本书，然后在本书页面上找到资料下载模块即可下载。
本书读者对象* Vue.js初学人员；* Vue.js进阶人员；* JavaScript全栈开发者；* Web前端开发工程师；* Web服务器端开发工程师；* Node.js服务端开发工程师；* 软件开发项目经理；* 各大院校的学生；* 相关培训机构的学员。
致谢　　感谢本书编辑，让我有机会和本书结缘！感谢在本书写

目录
前言
第1篇 背景知识
第1章 初探网页开发2
1.1 网页开发历史2
1.1.1 传统网页开发3
1.1.2 新前端网页开发5
1.2 MVVM风格开发框架6
1.2.1 为什么会出现MVVM6
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 神奇的包管理器——npm28
2.1.2 好用的浏览器——Chrome31
2.1.3 Vue.js的调试神器——vue-devtools34
2.1.4 非常智能的IDE——WebStorm36
2.2 认识ECMAScript 6（ES 6）39
2.2.1 ES 6的前世今生39
2.2.2 为什么要使用ES 640
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 块作用域构造let45
2.3.9 Classes（类）46
2.3.10 Modules（模块）46
2.4 使用Babel进行ES 6的转化47
2.4.1 安装Babel48
2.4.2 使用Babel48
2.5 精简压缩生产环境的Webpack51
2.5.1 Webpack是什么51
2.5.2 配置一个完整项目的Webpack52
2.5.3 不得不说的新版Webpack 456
2.6 小结与练习59
2.6.1 小结59
2.6.2 练习59
第3章 从一个电影网站项目学习Vue.js60
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 什么是SQL76
4.1.2 什么是NoSQL78
4.1.3 两种数据库的对比分析79
4.2 MongoDB基础入门80
4.2.1 为什么选择MongoDB80
4.2.2 安装MongoDB81
4.2.3 启动MongoDB83
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.js100
5.1.2 什么是Express101
5.2 使用Express进行Web开发102
5.2.1 安装Express102
5.2.2 设计后台服务API105
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-router175
6.3 Vue.js路由配置vue-router176
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 前台

全栈开发