作者 |
张帆 |
丛书名 |
出版社 |
机械工业出版社 |
ISBN |
9782101141555 |
简要 |
简介 |
内容简介书籍计算机书籍 ---------------------------Vue.js+Node.js开发实战:从入门到项目上线--------------------------- 本书以JavaScript语言为基础,以一个完整的网站开发过程为主线,介绍了一整套面向Web项目的开发技术,如使用Node.js搭建服务端,使用NoSQL数据库管理数据,使用Vue.js搭建前端UI,使用Nginx部署代码,使用Git管理版本等。通过阅读本书,读者可以掌握从网站开发到网站上线的全过程。本书分为10章,涵盖的主要内容有购买域名、网站备案、Node.js安装、Express安装、Vue.js安装、前后端分离设计、网站需求设计、网站模块规划、网站服务器端开发、网站客户端UI开发、服务器端部署和网站上线等内容。本书通俗易懂,图文并茂,适合所有初级和中级Web开发人员阅读,尤其适合一些想自学网站开发的非专业人员阅读。另外,对于相关院校的学生和培训机构的学员而言,本书也是一本不可多得的实战指导书。 ---------------------------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”编程基础的爱好者或者是产品经理也同样适用。 |
目录 |
---------------------------Vue.js+Node.js开发实战:从入门到项目上线--------------------------- 前言 第1章 开发一个网站的准备 1 1.1 如何从零开始建设一个网站 1 1.1.1 网站建设流程 1 1.1.2 网站开发技术和工具 2 1.2 第一步:购买一个域名 3 1.2.1 域名简介 4 1.2.2 如何通过阿里云购买域名 5 1.3 第二步:域名的备案和解析 8 1.3.1 域名的实名认证和备案 8 1.3.2 域名相关解析 9 1.4 第三步:购买一台服务器 10 1.4.1 云服务器 10 1.4.2 服务器的后台管理 11 1.5 小结与练习 13 1.5.1 小结 13 1.5.2 练习 13 第2章 Node.js+Vue.js项目开发基础 14 2.1 Node.js简介 14 2.1.1 Node.js的前世今生 14 2.1.2 在Windows中安装Node.js 15 2.1.3 在Linux中安装Node.js 18 2.1.4 第一个Node.js示例——Hello World 20 2.2 Node.js后端框架Express 21 2.2.1 Express的发展 21 2.2.2 Express的安装 23 2.2.3 Express项目示例——Hello World 25 2.2.4 RESTful API规范 25 2.3 页面显示框架Vue.js 27 2.3.1 Vue.js简介 27 2.3.2 Vue.js的安装 28 2.3.3 用Vue.js编写Hello World——CDN方式 29 2.3.4 用Vue.js编写Hello World——Webpack方式 30 2.3.5 其他页面显示框架 34 2.4 JavaScript代码编写——IDE的选择 35 2.4.1 编写基础的JavaScript代码 35 2.4.2 JavaScript开发利器——WebStorm 37 2.5 小结与练习 38 2.5.1 小结 38 2.5.2 练习 38 第3章 项目开发准备 39 3.1 初识数据库 39 3.1.1 数据库简介 39 3.1.2 SQL数据库和NoSQL数据库 40 3.2 MongoDB介绍 41 3.2.1 为什么选择MongoDB 42 3.2.2 在Windows中安装MongoDB 43 3.2.3 在Linux中安装MongoDB 44 3.3 Redis简介 46 3.3.1 为什么选择Redis 46 3.3.2 在Windows中安装Redis 47 3.3.3 在Linux中安装Redis 49 3.4 版本控制 51 3.4.1 版本控制简介 51 3.4.2 Git和GitHub简介 51 3.4.3 安装和使用Git 54 3.5 测试工具 57 3.5.1 浏览器自带的开发者工具 57 3.5.2 Postman插件 59 3.6 小结与练习 61 3.6.1 小结 61 3.6.2 练习 62 第4章 项目后台技术Express 63 4.1 开发Express应用程序 63 4.1.1 Express应用程序生成器 63 4.1.2 Express提供的路由 66 4.1.3 使用Express托管静态文件 68 4.2 Express和数据库交互 70 4.2.1 连接MongoDB数据库 70 4.2.2 使用对象模型驱动连接MongoDB 72 4.2.3 如何定义模型 73 4.2.4 Node.js和Redis集成 74 4.3 Express高级应用 75 4.3.1 Express中的中间件 75 4.3.2 Express错误处理 79 4.4 小结与练习 81 4.4.1 小结 81 4.4.2 练习 81 第5章 项目前端开发之Vue.js基础知识 82 5.1 Vue.js开发基础 82 5.1.1 安装Vue.js与Webpack 82 5.1.2 Webpack常用配置详解 85 5.1.3 Vue.js条件渲染 89 5.1.4 Vue.js列表渲染 90 5.1.5 Vue.js输入监听 91 5.1.6 Vue.js事件处理——v-on绑定 94 5.2 Vue.js的生命周期 97 5.2.1 生命周期与钩子函数 97 5.2.2 演示Vue.js的生命周期 99 5.3 Vue.js的模板语法 100 5.3.1 文本 101 5.3.2 JavaScript表达式 103 5.3.3 v-bind绑定动态属性 104 5.4 Vue.js的组件化 105 5.4.1 组件化简介 105 5.4.2 组件的创建 106 5.4.3 组件的注册 106 5.4.4 组件间的数据传递 109 5.4.5 监听子组件事件 111 5.4.6 通过插槽分发内容 114 5.5 小结与练习 116 5.5.1 小结 116 5.5.2 练习 116 第6章 Vue.js高级应用 117 6.1 Vue.js的vue-router库 117 6.1.1 Vue.js的页面路由实现 117 6.1.2 使用vue-cli初始化Vue.js项目 118 6.1.3 安装和配置vue-router 122 6.1.4 动态路由匹配 123 6.1.5 路由嵌套 126 6.1.6 路由跳转 128 6.1.7 导航守卫 131 6.2 Vue.js的状态管理库Vuex 132 6.2.1 状态管理与store模式 133 6.2.2 使用Vuex的情形 133 6.2.3 在Vue.js组件中获取Vuex状态和Getter对象 135 6.2.4 更新Vuex中的store 138 6.2.5 Vuex模块的划分 142 6.3 Vue UI库 143 6.3.1 Element UI库 143 6.3.2 Ant Design of Vue UI库 144 6.3.3 iView UI库 145 6.4 小结与练习 146 6.4.1 小结 146 6.4.2 练习 146 第7章 项目需求分析和功能说明 147 7.1 内容发布网站的需求分析 147 7.1.1 系统设计需求和技术说明 147 7.1.2 后端接口需求 148 7.1.3 前端页面需求 149 7.2 项目策划和功能设计 150 7.2.1 项目功能策划 150 7.2.2 项目模块划分 150 7.2.3 项目后端API路由定义 151 7.2.4 项目前端页面路由定义 152 7.3 项目原型图和流程图 153 7.4 小结与练习 154 7.4.1 小结 154 7.4.2 练习 154 第8章 项目后端API开发 155 8.1 开发前的准备工作 155 8.1.1 初始化项目 155 8.1.2 连接数据库 156 8.1.3 配置服务应用列表 161 8.2 通用API开发 164 8.2.1 获取页面导航栏的API开发 164 8.2.2 获取底部详细内容的API开发 167 8.2.3 获取友情链接的API开发 168 8.2.4 获取首页轮播图的API开发 169 8.2.5 获取热点文章列表内容的API开发 171 8.2.6 获取文章列表的API开发 173 8.2.7 获取文章详情的API开发 175 8.2.8 获取文章评论的API开发 177 8.2.9 获取分类内容的API开发 178 8.2.10 记录文章浏览量的API开发 180 8.3 用户权限相关API开发 182 8.3.1 用户模块开发前的准备工作 182 8.3.2 用户评论文章的API开发 183 8.3.3 获取用户资料的API开发 185 8.3.4 修改用户资料的API开发 187 8.3.5 发送私信的API开发 189 8.3.6 获取私信列表的API开发 191 8.3.7 获取私信的API开发 192 8.3.8 用户注册的API开发 194 8.3.9 用户登录的API开发 196 8.3.10 文章分类列表的API开发 199 8.3.11 文章“点赞”和“踩”功能的API开发 201 8.3.12 文章收藏功能的API开发 202 8.3.13 获取收藏文章列表的API开发 203 8.4 后台管理相关API开发 204 8.4.1 文章添加和修改的API开发 205 8.4.2 文章发布和删除的API开发 208 8.4.3 添加和修改分类的API开发 210 8.4.4 获取全部用户列表的API开发 211 8.4.5 封停用户的API开发 213 8.4.6 修改首页轮播内容的API开发 214 8.4.7 修改导航内容的API开发 216 8.4.8 修改底部内容的API开发 217 8.4.9 修改友情链接内容的API开发 218 8.4.10 其他权限判断 220 8.5 小结与练习 221 8.5.1 小结 221 8.5.2 练习 222 第9章 前端页面开发 223 9.1 项目前期准备 223 9.1.1 创建新项目 223 9.1.2 选择UI库 224 9.1.3 安装HTTP请求库 225 9.2 主要页面的开发 228 9.2.1 主页 228 9.2.2 文章总列表页 235 9.2.3 文章分类结果页 237 9.2.4 文章详情页 239 9.3 用户相关页面及权限的开发 244 9.3.1 登录页 244 9.3.2 注册页 247 9.3.3 用户信息页 251 9.3.4 在导航栏中增加用户信息 256 9.3.5 私信功能 258 9.3.6 文章评论功能 262 9.3.7 文章的收藏和点赞功能 265 9.3.8 查看所有收藏 267 9.4 管理员页面的开发 269 9.4.1 管理员页面路由设置 269 9.4.2 文章编辑页 271 9.4.3 文章管理页 275 9.4.4 用户管理页 278 9.5 小结与练习 280 9.5.1 小结 280 9.5.2 练习 280 第10章 网站的部署和上线 281 10.1 远程连接服务器 281 10.1.1 虚拟机简介 281 10.1.2 虚拟机的安装 282 10.1.3 远程连接云服务器或虚拟机 288 10.2 搭建服务器部署环境 290 10.2.1 配置pm2 290 10.2.2 构建用于发布的Vue.js程序 293 10.2.3 使用Nginx部署静态文件 294 10.3 在服务器端部署代码 295 10.3.1 服务器的防火墙设置 295 10.3.2 使用Git部署代码 296 10.4 网站优化常用方法 299 10.4.1 优化应用 299 10.4.2 使用nw.js打包项目 300 10.5 小结与练习 302 10.5.1 小结 302 10.5.2 练习 303 附录A 检测Node.js是否支持ES 6的语法 304 附录B npm安装过慢的解决方法 306 ---------------------------Vue.js项目开发实战--------------------------- 前言 第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 |