JavaScript

域名查询过程 以用户在浏览器输入www.baidu.com为例，我们详细说明一下实际域名查询过程： 用户输入www.baidu.com，浏览器调用操作系统resolver发起域名查询，此处不考虑浏览器的域名缓存；resolver封装一个dns请求报文，并将其发给运营商分配的local dns地址（或者用户自己配置的公共dns）； local dns查询缓存，如果命中则返回响应结果；否则向根服务器发起查询； 根服务器返回顶级域com的服务器地址。每一层级的DNS服务器都有缓存，实际都是先查缓存，没有缓存才返回下级域，此处不再重复； local dns查询com。com返回baidu.com地址； local dns查询baidu.com，baidu.com返回www.baidu.com对应记录结果。 名词解释 解析器 即resolver： 处于DNS客户端的一套系统，用于实现正向解析或者反向解析。 Local DNS(递归dns)： 个人电脑使用的DNS server是路由器上的dns server，一般路由器使用运营商dns server，运营商（如缓存等）那查不到结果，则进入迭代dns查询（就是查询根服务器到权威dns返回结果）。 递归DNS可以理解为是一种功能复杂些的resolver，其核心功能一个是缓存、一个是递归查询。收到域名查询请求后其首先看本地缓存是否有记录，如果没有则一级一级的查询根、顶级域、二级域……直到获取到结果然后返回给用户。日常上网中运营商分配的DNS即这里所说的递归DNS。 权威DNS： 处于DNS服务端的一套系统，该系统保存了相应域名的权威信息。权威DNS即通俗上“这个域名我说了算”的服务器。 转发DNS： 转发DNS是一种特殊的递归。如果本地的缓存记录中没有相应域名结果时，其将查询请求转发给另外一台DNS服务器，由另外一台DNS服务器来完成查询请求。 公共DNS： 公共DNS属于递归DNS。其典型特征为对外一个IP，为所有用户提供公共的递归查询服务。

在一次POST图片的base64编码时，后端（golang）始终无法正确获取提交的base64，排查发现后端net包的url模块在parseQuery提交的数据时，把参数拆成了2部分，一番尝试，把提交的数据编码后就可以了；猜测应该是特殊字符问题，遂整理了以下知识点： ...

理论 POST数据提交方式 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据的几种方式。 我们知道，HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。类似于下面这样： <method> <request-URL> <version> <headers> <entity-body> 协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的 HTTP 请求满足上面的格式就可以。 但数据发送出去，还要服务端能解析才行。一般服务端语言如 php、python 等，以及它们的 framework，都内置了自动解析常见数据格式的功能。**服务端通常根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。**所以说到 POST 数据提交方案，包含了 Content-Type 和消息主体编码方式两部分。这里摘录两种Content-Type，其它参阅参阅 application/x-www-form-urlencoded 这应该是最常见的 POST 提交数据的方式了。浏览器的原生 表单，如果不设置 enctype 属性，默认以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）： POST http://www.example.com HTTP/1.1 Content-Type: application/x-www-form-urlencoded;charset=utf-8 title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3 首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。例如 PHP 中，$_POST['title'] 可以获取到 title 的值，$_POST['sub'] 可以得到 sub 数组。...

什么是Cookie 因为HTTP协议是无状态的，导致两个执行成功的请求之间是没有关系的。这就带来了一个问题，用户没有办法在同一个网站中进行连续的交互，比如在一个电商网站里，用户把某个商品加入到购物车，切换一个页面后再次添加了商品，这两次添加商品的请求之间没有关联，浏览器无法知道用户最终选择了哪些商品。而Cookie就是用来解决这类问题的 Cookie，又称为‘小甜饼’，是服务器发送到浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发送请求时携带并发送到服务器上（服务器可以设置或读取Cookies中包含信息），借此维护用户跟服务器会话中的状态。 Cookie主要用于以下三个方面： 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息） 个性化设置（如用户自定义设置、主题等） 浏览器行为跟踪（如跟踪分析用户行为等） 分类 Cookie总是保存在客户端中，可以简单的分为会话期Cookie和持久性Cookie 会话期Cookie是最简单的Cookie：浏览器关闭之后它会被自动删除，也就是说它仅在会话期内有效。会话期Cookie不需要指定过期时间（Expires）或者有效期（Max-Age）。需要注意的是，有些浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话期Cookie也会被保留下来，就好像浏览器从来没有关闭一样。 持久性Cookie和关闭浏览器便失效的会话期Cookie不同，持久性Cookie设置了特定的过期时间（Expires）或有效期（Max-Age）。如: Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; 持久性Cookie保存在硬盘里，除非用户手工清理或到了过期时间，否则Cookie不会被删除，其存在时间是长期的。 若设置了过期时间，则是持久性Cookie（浏览器会把Cookie存成文件保存到硬盘上），未设置则是会话期Cookie （浏览器关闭时将会被删掉） 另外: 登录页面上的记住我或十天内免登录的功能就是通过设置cookie的过期时间来实现的，例如把过期时间设置成十天后，就实现了十天内免登录 过程 设置Cookie过程 以登录为例： 写代码实际操作下: 配置后端服务testServer，在终端执行以下命令: mkdir testServer && cd testServer && touch app.js && npm init -y && npm i -D express cookie-parser app.js添加如下内容: //app.js const express = require('express') const cookieParser = require('cookie-parser') const app = express(); const port = 3000 app.use(cookieParser()) app.get('/', (req, res) => { console....

Vue 教程二 上篇讲了通过script方式引入vue来开发项目，这篇会结合webpack进行vue的模块化开发，读完本篇你会知道如何进行vue的模块化开发。 首先需要了解下vue的单文件组件SFC及webpack的vue插件vue-loader: 单文件组件（SFC）和Vue Loader 当使用基于HTML模板的vue组件时，会带来些困难：要么使用 JavaScript 的模板字符串，要么将模板和组件定义写到不同文件里或使用内联模板 例1: Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <div v-html="post.content"></div> </div> ` }) 模板写在组件定义里 使用 JavaScript 的模板字符串时，它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，要么使用折行转义字符取而代之 例2: <script type="text/x-template" id="hello-world-template"> <p>Hello hello hello</p> </script> Vue.component('hello-world', { template: '#hello-world-template' }) 如上是把模板定义在html里，然后js引用 在这些情况下导致代码不好维护，Vue提供了单文件组件（Single FIle Components）来解决这个问题，将模板、组件定义、CSS写在一个.vue文件里 //MyComponent.vue <template> <div id="my-component">...</div> </template> <script> export default { ... } </script> <style> #my-component { ....