《Vue.js项目开发实战》以JavaScript語言为基本,以Vue.js项目开发全过程主导线,介绍了一整套朝向Vue.js的项目开发技术性。
从NoSQL数据库查询的搭建到Express项目API的撰写,后再由Vue.js显示信息在前端开发的网页页面中,让阅读者能够十分快速地把握这种技术性,提升项目开发的工作能力。这书分成4篇。第1篇介绍了Vue.js基本自然环境搭建,是本书的根基;第二篇介绍了免费电影网站项目的设计方案,涵盖ES6、Webpack和产品化自然环境搭建等核心技术;第三篇介绍了免费电影网站项目的前端和后端的完成,涵盖Node.js后端开发技术性、Vue.js各种各样部件和API等技术性;第四篇介绍了页面优化,通过学习一些Vue.js模版和架构,进而制做更为美观大方的操作界面(UI)。
这书合适Vue.js新手和升阶者阅读文章,也合适别的Web前端和后端开发发烧友阅读文章。针对一些产品运营,这书也一样合适阅读文章。此外,针对培训学校和各种设立Web开发课程内容的学校,这书是一本非常好的项目开发实例教程。
目录
- 前言
- 第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 前台