《Vue.js项目开发实战》源代码文件

本书以实战开发为原则，以Vue.js的项目开发过程为主线，以JavaScript语言为基础，介绍了一整套面向Vue.js的项目开发技术。从NoSQL数据库的搭建到Express项目API的编写，最后由Vue.js显示在前端的页面中，使得读者可以非常迅速地掌握一门技术甚至是一个项目的开发能力。

本书分为4篇，第一篇是Vue.js基础环境的搭建，是全书的基石；第二篇是电影项目的设计，涵盖ES6、webpack、工程化环境搭建等关键技术；第三篇是电影项目的前、后端实现，涵盖Node.js后端技术、Vue.js各种组件和API等技术；最后一篇美化项目，通过学习一些Vue.js模板和框架，制作更美观的UI界面。本书不仅仅适合想学习Vue.js的读者，甚至对于一些“0”编程基础的爱好者或者是产品经理也同样适用。

封面图

目录

• 前言
• 第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 前台路由页面编写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-on250
• 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.js298
• 9.1.1 什么是CSS298
• 9.1.2 如何在项目中使用CSS299
• 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 安装iView310
• 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 在项目中使用iView328
• 9.6.2 主页的样式改造330
• 9.6.3 登录页的样式改造333
• 9.7 小结与练习335
• 9.7.1 小结335
• 9.7.2 练习336
• 附录 iView组件默认样式337