张晨光老师的播客

英文官网:中文官网:Vue 是一套用来动态构建用户界面的渐进式JavaScript框架构建用户界面：把数据通过某种办法变成用户界面渐进式：Vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件作者: 尤雨溪2013年，受到angular框架的启发，尤雨溪开发出了一款轻量框架一SEED。同年12月，SEED更名为VUE，版本号0.6.0。2014年，VUE正式对外发布，版本号0.8.0。

Cookie 并不是它的原意“甜饼”的意思，而是一个保存在客户机中的简单的文本文件，这个文件与特定的 Web 文档关联在一起，保存了该客户机访问这个Web 文档时的信息，当客户机再次访问这个 Web 文档时这些信息可供该文档使用。在HTML5之前，我们通常使用Cookie进行数据存储，例如在本地设备上存储历史活动的信息，但这种方式的缺点是存储的空间大小只有4KB左右，存储的数据解析起来比较复杂。对于前端来讲，Cookie可以存储一些临时数据，在页面之间共享，并且可以在页面关闭后，再开打开，还可以继续获取。

【代码】11_博客管理系统_实现过程。

用户管理：包括用户登录、用户退出和管理用户的功能。用户登录时填写邮箱、密码，单击“登录”按钮，即可进行登录。登录成功后会进入到后台首页，后台管理员可以对用户进行添加和删除等操作。文章管理：文章管理模块包括对文章的添加、修改和删除等功能，添加文章时需要支持文件上传功能，文章列表页实现分页和检索功能，并可根据文章标题和分类等条件筛选文章。在文章管理模块中，普通用户只能对自己的文章进行管理，管理员可以对所有用户的文章进行管理。评论管理：主要包括评论列表页和删除评论等功能。

Webpack打包工具对项目中的复杂文件进行打包处理，可以实现项目的自动化构建，并且给前端开发人员带来了极大的便利。目前，企业中的绝大多数前端项目是基于Webpack打包工具来进行开发的。

Express是目前流行的基于Node.js运行环境的Web应用程序开发框架，它简洁且灵活，为Web应用程序提供了强大的功能。Express提供了一个轻量级模块，类似于jQuery（封装的工具库），它把Node.js的HTTP模块的功能封装在一个简单易用的接口中，用于扩展HTTP模块的功能，能够轻松地处理服务器的路由、响应、Cookie和HTTP请求的状态。Express通过中间件接收客户端发来的请求，并对请求做出响应，也可以将请求交给下一个中间件继续处理。

主要功能包括添加用户信息、修改用户信息、删除用户信息、查询用户信息。搭建网站服务器，实现客户端与服务器端的通信。连接数据库，创建用户集合，向集合中插入文档。查询用户信息：当用户访问“/list”路由时，将所有用户信息查询出来。将用户信息和表格HTML进行拼接并将拼接结果响应回客户端。添加用户信息：当用户访问“/add”路由时，呈现表单页面，并实现添加用户信息功能。修改用户信息：当用户访问“/modify”路由时，呈现修改页面，并实现修改用户信息功能。

异步API不能通过返回值的方式获取执行结果，异步API也不会阻塞后续代码的执行。如果异步API后面代码的执行依赖当前异步API的执行结果，这就需要把代码写在回调函数中。一旦回调函数的嵌套层次过多，就会导致代码不易维护，我们将这种代码形象地称为。

模板引擎可以让将数据和HTML模板更加友好的结合，省去繁琐的字符串拼接，使代码更加易于维护。

MongoDB是为快速开发互联网Web应用设计的数据库系统MongoDB设计目标是极简、灵活、作为Web应用栈的一部分MongoDB的数据模型是面向文档的，文档是一种类似于JSON的结构简单来说就是MongoDB数据库存储的是各种各样的JSON增强版的JSON，叫做BSON，可以存储二进制数据，可以认为就是JSON。

第三方模块就是别人写好的、具有特定功能的、可以直接拿来使用的模块。由于第三方模块通常都是由多个文件组成并且被放置在一个目录中，所以又称之为包。第1种是以js文件的形式存在，通常都是封装了一些特定的功能，并向外提供实现项目具体功能的API接口供开发者去调用，类似于jQuery。第2种是以命令行工具形式存在，提供了一些命令用于快速的安装和管理模块，辅助项目开发。

模块化是软件的一种开发方式，利用模块化可以把一个非常复杂的系统结构细化到具体的功能点，每个功能点看作一个模块，然后通过某种规则把这些小的模块组合到一起，构成模块化系统。Node.js为开发者提供了一个简单的模块系统，exports是模块公开的接口，require()用于从外部获取一个模块的接口，即获取模块的exports对象。在使用ES5的时候，在多层嵌套回调时，写完的代码层次过多，很难进行维护和二次开发，ES6认识到了这点问题，现在promise的使用，完美解决了这个问题。

剩余参数是程序员自定义的一个普通标识符，接收剩余参数的变量是一个数组（Array的实例），能够直接使用所有的数组方法，如 sort()、map()、forEach()或pop()方法等。箭头函数是ES6中新增的函数，它用于简化函数的定义语法，有自己的特殊语法，接收一定数量的参数，并在其封闭的作用域的上下文（即定义它们的函数或其他代码）中操作。let是ES6中新增的用于声明变量的关键字。使用另外一种形式去实现对象的解构赋值，该形式支持变量的名字和对象中属性的名字不一样的情况，等号左边的大括号代表对象解构。

它是一个开源的JavaScript类库。常见的JavaScript类库：jQuery、Prototype、ExtJS、Mootools和YUI等。jQuery的核心理念：write less，do more（写的更少，做的更多）。jQuery是一个轻量级的脚本，其代码非常小巧。语法简洁易懂，学习速度快，文档丰富。支持CSS1~CSS3定义的属性和选择器。跨浏览器，支持的浏览器包括IE6~IE11和Chrome等。实现了JavaScript脚本和HTML代码的分离，便于后期编辑和维护。

msg | 返回结果信息 | string | 是 | 返回的结果提示信息 || username | 用户名 | string | 是 | 用户账户名称 || password | 密码 | string | 是 | 用户账户密码 || code | 返回结果码 | int | 是 | 返回的结果码 || data | 返回数据 | json | 是 | || 参数 | 名称 | 类型 | 必选 | 说明 || 参数 | 名称 | 类型 | 必选 | 说明 |

在常规情况下，Node.js安装过程中，安装包会自动把Node.js的安装目录放入到系统的环境变量Path中，若是出现上图错误表明操作失败。首先找到Node.js的安装目录，本机的Node.js安装目录是C:\Program Files\nodejs，将该目录地址进行复制。在cmd命令提示符界面中，输入命令“node -v”，按“Enter”键，显示当前安装的Node.js版本。右击“此电脑”图标，选择“属性”命令，进入“系统”界面，执行如下操作。安装失败的原因：Node.js安装目录写入环境变量失败。

Ajax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。描述：不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。功能：用于实现与服务器进行异步交互的功能。传统Web工作流程Ajax工作流程相较于传统网页，使用Ajax技术的优势具体有以下几个方面。减轻服务器的负担节省带宽用户体验更好。

正则表达式（Regular Expression，简称regexp）是一种描述字符串结构的语法规则。是一个特定的格式化模式，用于验证各种字符串是否匹配这个特征，进而实现高级的文本查找、替换、截取内容等操作。在项目开发中，手机号码指定位数的隐藏、数据采集、敏感词的过滤以及表单的验证等功能，都可以利用正则表达式来实现。适用领域：在操作系统（Unix、Linux等）、编程语言（C、C++、Java、PHP、Python、JavaScript等）。

事件事件处理程序事件驱动式事件流。

DOM：Document Object Model，文档对象模型。作用：是一套规范文档内容的通用型标准。1998年10月，DOM正式成为W3C的推荐标准。第1级DOM（DOM Level 1，或DOM1）。为XML和HTML文档中的元素、节点、属性等提供了必备的属性和方法。结合了Netscape及微软公司开发的DHTML（动态HTML）思想。2000年11月，发布了第2级DOM（DOM Level 2，或DOM2）。在DOM1的基础上增加了样式表对象模型。

BOM：Brower Object Model，指的是浏览器对象模型。BOM 用来操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。浏览器对象：浏览器提供的一系列内置对象的统称。BOM 浏览器对象模型：各内置对象之间按照某种层次组织起来的模型的统称。window 对象是 BOM 的顶层（核心）对象。其他的对象都是以属性的方式添加到 window 对象下，也可称为 window 的子对象。

面向过程：注重的是事情完成的具体的步骤，只有按照步骤一步一步的执行，才能够完成这件事情。对于面向过程思想，我们扮演的是执行者，凡事都要靠自己完成。面向过程思想的劣势，编写的代码都是一些变量和函数，随着程序功能的不断增加，变量和函数就会越来越多，此时容易遇到命名冲突的问题，由于各种功能的代码交织在一起，导致代码结构混乱，变得难以理解、维护和复用。面向对象：注重的是一个个对象，这些对象各司其职，我们只要发号施令，即可指挥这些对象帮我们完成任务。

函数是用于封装一段完成特定功能的代码。相当于将一条或多条语句组成的代码块包裹起来，在使用时只需关心参数和返回值，就能完成特定的功能，而不用了解具体的实现。// 内置函数// 返回解析后的浮点数：0.0726// 判断是否是NaN：false// 返回解析后的整数值：15parseFloat() 用于返回解析字符串后的浮点数。isNaN() 判断给定参数是否为NaN，判断结果为是，返回true，否则返回false。parseInt() 用于返回解析字符串后的整数值。

实现原理：通过构建有序数组元素的存储，对于未排序的数组元素，在已排序的数组中从最后一个元素向第一个元素遍历，找到相应位置并插入。保存一个班级学生信息，每个数组元素都代表一个学生，而每个学生都使用一个一维数组分别表示其姓名、学号、年龄等信息，这样通过一个变量即可有规律的保存一个班级的所有学生信息，方便开发时进行处理。JavaScript 中，除了前面讲解的添加与删除数组元素的方式外，还可以利用 Array 对象提供的方法，模拟栈和队列的操作。在这一点，最后的元素应该会是最大的数。

可以理解为在脚本运行过程中值始终不变的量。数学中的圆周率 π 就是一个常量，其值就是固定且不能被改变的。特点：一旦被定义就不能被修改或重新定义。语法：ES6 中新增了 const 关键字，用于实现常量的定义常量命名规则：遵循标识符命名规则，习惯上常量名称总是使用大写字母表示。常量的值：常量在赋值时可以是具体的数据，也可以是表达式的值或变量。var r = 6;// 输出结果：P=37.68常量一旦被赋值就不能被改变。常量在声明时必须为其指定某个值。

JavaScript 是 Web 开发领域中的一种功能强大的编程语言。主要用于开发交互式的 Web 页面，使网页的互动性更强，用户体验更好。JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）。脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行Web页面是由多个网页组成的。网页制作涉及的技术：HTML、CSS 和 JavaScript。HTML 代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。

为了解决 CSS 在实际开发过程中存在的问题，我们可以使用 Sass（CSS预处理器） 来实现页面的样式。Sass 是一款成熟、稳定、强大的专业级 CSS 扩展语言。它是一款强化 CSS 的辅助工具。在 CSS 语法的基础上增加了变量（variables）、嵌套（nestedrules）、混合（mixins）、导入（inline imports）等高级功能，让 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

如：一个 200×300(CSS pixel)的 img 标签，对于 dpr=2 的屏幕，用 400×600 的图片，如此一来，位图像素点个数就是原来的4 倍，在高清屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例，图片自然就清晰了。可缩放矢量图形（Scalable Vector Graphics，SVG）是一种开放标准的描述矢量图形的语言，它基于XML（可扩展标记语言）的，SVG 矢量图形是可伸缩的，可在任何的分辨率下被高质量地打印，可在图像质量不下降的情况下被放大。

首先需要明确一点的是：并不存在某一个方案完美适用于移动端的所有场景，也并不是每一个方案到现在已经毫无用处首推的布局方案为：弹性盒布局（如果实在不嫌麻烦大的分块布局使用 vw,vh 也可以，甚至使用 rem 也行）对于上述的各种移动端web页面自适应方案来说，都存在着一些优势和不足国内的一些互联网站，通过查看网页源代码发现，它可能不是某一种方案的单独使用，而是几种方案的结合一个页面上，元素的宽度设置上有百分比，也有 rem，字体的样式中有 rem，有 em，也有固定大小的 px；

现今大型网站，大部分已经没有做响应式了（例如淘宝）。我们会发现，淘宝网手机端和网页端使用的是两个域名，也就是说，不同的客户端已经不再共用一套页面布局结构了。而是区分开来做自适应。然后每次用户访问的时候它就根据客户端的类型重定向。为什么呢？试想一下淘宝这种大型网站，一个分页下的商品条目特别多，并且每个商品条目的页面布局结构又十分复杂，而且 pc 端往往显示的信息是要比手机端更多的。

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。更改用户的鼠标样式表单轮廓防止表单域拖拽。

特性中提到：BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素。浮动的盒子会遮盖下⾯的盒子，但是下⾯盒子⾥的文字是不会被遮盖的，文字反⽽还会环绕浮动的盒子。这也是一个⽐较有趣的特性。BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，⽽是以较大的为准。左右两边固定宽度，中间不设宽，因此中间的宽度⾃适应，随浏览器的大⼩变化⽽变化。

51．一个宽 500px，高500px 的盒子中，有一个宽 100px，高 100px 的盒子，如何让这个 100px 宽 100px 高的盒子上下左右居中，请写出最少三种方案，每种形式至少有一种。45．为页面上的p标签：

外联式是作为单独的 CSS 文件从外部引入的 ，在 link 标签中通过 media 属性可以设置样式使用的媒体设备。使用媒体查询能够在不改变页面内容的情况下，为特定的输出设备制定显示效果。/* 仅电脑屏幕，平板，智能手机以及横屏显示且屏幕宽度不超过 600px 时应用当前样式 */媒体查询能在不同的条件下使用不同的样式，使页⾯在不同在终端设备下达到不同的渲染效果。/* 横屏显示且屏幕宽度不超过 600px 时不应用当前样式 */可以使用不同条件限制使用的样式，条件表达式需要放在括号中。

转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放。通过 transform 转换来实现 2D 转换或者 3D 转换。2D 转换包括：设置元素的缩放效果，只要给元素添加上了这个属性就能控制它放大还是缩小。语法：参数：x：表示水平方向的缩放倍数y：表示垂直方向的缩放倍数注意：注意其中的 x 和 y 用逗号分割如果只写一个值就是等比例缩放不会影响到其他元素取值：1.2 移动 translate2D 移动是 2D 转换里面的一种功能，可以改变元素在页面中的位置，类似定位。语法：注意

通过 实现小标签，用于提示类。8 标记给链接、导航等元素嵌套 元素，可以很醒目的展示新的或未读的信息条目。9 图片组件元素添加 生成一个图片组件。10 警告框通过 类可以实现一个警告框，常用于信息的提示。10.1 可关闭的警告框为警告框添加一个可选的 类和一个关闭按钮，实现警告框的手动关闭功能。注意：10.2 警告框中的链接 类，可以为链接设置与当前警告框相符的颜色。11 模态框模态框是指以弹出对话框的形式出现的弹框。注意：11.1 显示隐藏通过一个添加按钮，按钮必须有

Bootstrap 中的下拉菜单依赖于 类，或者添加了 的元素。如果想要让菜单弹出的方向向上，可以为下拉菜单的父元素设置 类（默认是向下弹出的）。在下拉菜单中可通过添加一些类名来使用特殊的样式：把按钮放入 中，然后加入适当的菜单列表，就可以让按钮作为菜单的触发器了。1.2 分裂式按钮下拉菜单2 输入框组通过 加上 或 类，可以给 的前面或后面添加额外的元素。2.1 尺寸大小为 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控

设置了 类的表单元素，默认设置宽度属性为 。将 元素和表单元素包裹在 中可以按照排好的样式进行展示。7.2 内联表单为 元素添加 类可使其内容左对齐并且表现为 显示方式。7.3 水平排列的表单为表单添加 类，并联合使用 Bootstrap 预置的栅格类，可以将 标签和控件组水平并排布局。这样做将改变 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 了。7.4 支持属性支持的属性有 、、、、、、、、、、、、 和 。注：只有正确设置了 属性的输入控件才能被赋予

这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素，实际上它是把大部分在HTML的基本标签加了样式。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。简单方便将文字对齐的类，它们一般应用在 p 标签上（用在 div 上不符合规范，用在 span 标签则不能生效）。，将得到更大更粗，行高更高的文本，它的作用相当于是文章摘要。类，可以得到一个字号更小的颜色更浅的文本。

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使 Web 开发更加快捷。它对 HTML、CSS 和 JavaScript 进行了封装，使它们使用起来更方便。我们只需要使用它已经设定好的类，或规则，即可快速应用它提供的功能。Bootstrap 使用了一些 HTML5 元素和 CSS3 属性（如媒体查询）。为了让这些正常工作，需要使用 HTML5 文档类型。