BoardYoungC

axios1. axios 是什么axios 是一个基于 Promise 的HTTP 请求库，用于浏览器和 Node.js 环境中发送网络请求（如 GET、POST 等），是 Vue 项目中常用的接口请求工具，支持请求拦截、响应拦截、取消请求等功能。 2. 为什么要封装在 Vue 中封装 axios 主要是为了提升代码的复用性、可维护性与规范性，具体原因包括： 统一配置：集中管理请求基地址、超时时间等公共配置； 统一拦截：全局处理请求头（如携带 Token）、响应错误（如登录失效、接口报错）； 简化调用：封装通用的请求方法（如get/post），减少重复代码； 统一规范：约束接口请求的参数格式、响应处理逻辑。 3. 如何封装（Vue2 中）以下是 Vue2 中 axios 的典型封装步骤： （1）创建 axios 实例并配置公共参数12345678// src/utils/request.jsimport axios from 'axios';// 创建axios实例const service = axios.create({ ...

双向数据绑定在 Vue2 中，双向数据绑定的实现核心是 Object.defineProperty 数据劫持 + 发布 - 订阅模式，结合 v-model 指令完成视图与数据的双向联动。以下是 Vue2 双向绑定的具体原理与实现细节： 一、Vue2 双向绑定的核心原理Vue2 借助 3 个核心模块 实现双向绑定： 数据劫持（Observer）：通过 Object.defineProperty 对 data 中的属性进行劫持，监听属性的 get（读取）和 set（修改）操作； 依赖收集（Dep）：在属性被读取时，收集依赖该属性的视图组件（订阅者）； 发布 - 订阅（Watcher）：当属性被修改时，通知所有订阅者更新视图；同时监听视图的输入事件，反向修改数据。 二、Vue2 中 v-model 的实现v-model 是 Vue2 双向绑定的语法糖，本质是绑定 value 属性 + 监听 input 事件，自动完成 “数据→视图” 和 “视图→数据” 的双向同步： 示例（输入框双向绑定）：123456789101112131415<template> ...

实现jwt鉴权机制JWT（JSON Web Token），本质就是⼀个字符串书写规范，如下图，作⽤是⽤来在⽤⼾和服务器之 间传递安全可靠的信息 在⽬前前后端分离的开发过程中，使⽤ token 鉴权机制⽤于⾝份验证是最常⻅的⽅案，流程如下： • 服务器当验证⽤⼾账号和密码正确的时候，给⽤⼾颁发⼀个令牌，这个令牌作为后续⽤⼾访问⼀些 接⼝的凭证 • 后续访问会根据这个令牌判断⽤⼾时候有权限进⾏访问 Token ，分成了三部分，头部（Header）、载荷（Payload）、签名（Signature），并以 . 进⾏ 拼接。其中头部和载荷都是以 JSON 格式存放数据，只是进⾏了编码13.1.1. header 每个JWT都会带有头部信息，这⾥主要声明使⽤的算法。声明算法的字段名为 alg ，同时还有⼀个 typ 的字段，默认 JWT 即可。以下⽰例中算法为HS256 1 { “alg”: “HS256”, “typ”: “JWT” } 因为JWT是字符串，所以我们还需要对以上内容进⾏Base64编码，编码后字符串如下： 1...

模块（Module），是能够单独命名并独⽴地完成⼀定功能的程序语句的集合（即程序代码和数据结 构的集合体）。 两个基本的特征：外部特征和内部特征 外部特征是指模块跟外部环境联系的接⼝（即其他模块或程序调⽤该模块的⽅式，包括有输⼊输出 参数、引⽤的全局变量）和模块的功能 内部特征是指模块的内部环境具有的特点（即该模块的局部数据和程序代码） 为什么需要模块化 • 代码抽象 • 代码封装 • 代码复⽤ • 依赖管理 如果没有模块化，我们代码会怎样？ • 变量和⽅法不容易维护，容易污染全局作⽤域 • 加载资源的⽅式通过script标签从上到下。 • 依赖的环境主观逻辑偏重，代码较多就会⽐较复杂。 • ⼤型项⽬资源难以维护，特别是多⼈合作的情况下，资源的引⼊会让⼈奔溃 ES6 模块内部⾃动采⽤了严格模式，这⾥就不展开严格模式的限制，毕竟这是 ES5 之前就已经规定 好 模块功能主要由两个命令构成： • export ：⽤于规定模块的对外接⼝ • import ：⽤于输⼊其他模块提供的功能 动态加载

跨域问题跨域是指浏览器的同源策略限制：当前端页面的协议、域名、端口三者中任意一个与请求的后端接口不一致时，浏览器会阻止该请求，这一限制是为了保障网页安全。 同源定义：协议（如http/https）、域名（如a.com/b.com）、端口（如80/8080）完全相同。 举例：Vue 项目（运行在http://localhost:8080）请求后端接口http://api.example.com，因域名不同会触发跨域。 2. Vue 中如何解决跨域Vue 项目中常用的跨域解决方案有以下 2 种： （1）开发环境：配置 Vue 脚手架的代理（vue.config.js）通过 webpack 的 devServer 代理，将前端请求转发到后端接口，避开浏览器同源限制： 123456789101112// vue.config.jsmodule.exports = { devServer: { proxy: { '/api': { // 匹配以/api开头的请求 target:...

对Node.js 的理解Node.js 是⼀个开源与跨平台的 JavaScript 运⾏时环境 在浏览器外运⾏ V8 JavaScript 引擎（Google Chrome 的内核），利⽤事件驱动、⾮阻塞和异步输⼊ 输出模型等技术提⾼性能 可以理解为 Node.js 就是⼀个服务器端的、⾮阻塞式I/O的、事件驱动的 JavaScript 运⾏环境 Nodejs 采⽤了⾮阻塞型 I/O 机制，在做 I/O...

回流和重绘在 HTML 中，每个元素都可以理解成⼀个盒⼦，在浏览器解析过程中，会涉及到回流与重绘： • 回流：布局引擎会根据各种样式计算每个盒⼦在⻚⾯上的⼤⼩与位置 • 重绘：当计算好盒模型的位置、⼤⼩及其他属性后，浏览器根据每个盒⼦特性进⾏绘制 在⻚⾯初始渲染阶段，回流不可避免的触发，可以理解成⻚⾯⼀开始是空⽩的元素，后⾯添加了新的 元素使⻚⾯布局发⽣改变 当我们对 DOM 的修改引发了 DOM ⼏何尺⼨的变化（⽐如修改元素的宽、⾼或隐藏元素等）时，浏 览器需要重新计算元素的⼏何属性，然后再将计算的结果绘制出来 当我们对 DOM 的修改导致了样式的变化（ color 或 background-color ），却并未影响其⼏何 属性时，浏览器不需重新计算元素的⼏何属性、直接为该元素绘制新的样式，这⾥就仅仅触发了重绘 回流触发时机 回流这⼀阶段主要是计算节点的位置和⼏何信息，那么当⻚⾯布局和⼏何信息发⽣变化的时候，就需 要回流，如下⾯情况： • 添加或删除可⻅的DOM元素 • 元素的位置发⽣变化 • 元素的尺⼨发⽣变化（包括外边距、内边框、边框⼤⼩、⾼度和宽度等） •...

this对象函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和⾮严格模式之间也 会有⼀些差别 在绝⼤多数情况下，函数的调⽤⽅式决定了 this 的值（运⾏时绑定） this 关键字是函数运⾏时⾃动⽣成的⼀个内部对象，只能在函数内部使⽤，总指向调⽤它的对象 • 默认绑定 全局环境中定义 person 函数，内部使⽤ this 关键字 隐式绑定 函数还可以作为某个对象的⽅法调⽤，这时 this 就指这个上级对象 new绑定 •通过构建函数 new 关键字⽣成⼀个实例对象，此时 this 指向这个实例对象 显⽰绑定 apply()、call()、bind() 是函数的⼀个⽅法，作⽤是改变函数的调⽤对象。它的第⼀个参数就 表⽰改变后的调⽤这个函数的对象。因此，这时 this 指的就是这第⼀个参数 bind、call、apply 区别？如何实现⼀个bind? apply 接受两个参数，第⼀个参数是 this 的指向，第⼆个参数是函数接受的参数，以数组的形式 传⼊ 改变 this 指向后原函数会⽴即执⾏，且此⽅法只是临时改变 this...

Javascript本地存储javaScript 本地缓存的⽅法我们主要讲述以下四种： • cookie • Cookie ，类型为「⼩型⽂本⽂件」，指某些⽹站为了辨别⽤⼾⾝份⽽储存在⽤⼾本地终端上的数 据。是为了解决 HTTP ⽆状态导致的问题 作为⼀段⼀般不超过 4KB 的⼩型⽂本数据，它由⼀个名称（Name）、⼀个值（Value）和其它⼏个⽤ 于控制 cookie 有效期、安全性、使⽤范围的可选属性组成 但是 cookie 在每次请求中都会被发送，如果不使⽤ HTTPS 并对其加密，其保存的信息很容易被窃 取，导致安全⻛险。举个例⼦，在⼀些使⽤ cookie 保持登录态的⽹站上，如果 cookie 被窃取， 他⼈很容易利⽤你的 cookie 来假扮成你登录⽹站 sessionStorage sessionStorage 和 localStorage 使⽤⽅法基本⼀致，唯⼀不同的是⽣命周期，⼀旦⻚⾯ （会话）关闭， sessionStorage...

基本类型主要为以下6种：Number String Boolean Undefined 123Undefined 类型只有⼀个值，就是特殊值 undefined 。当使⽤ var 或 let 声明了变量但没有初始化时，就相当于给变量赋予了 undefined 值 null 12345Null 类型同样只有⼀个值，即特殊值 null逻辑上讲， null 值表⽰⼀个空对象指针，这也是给 typeof 传⼀个 null 会返回 "object" 的原因 undefined 值是由 null 值派⽣⽽来 1console.log(null == undefined); // true symbol 引⽤类型复杂类型统称为 Object ，我们这⾥主要讲述下⾯三种： Object Array JavaScript 数组是⼀组有序的数据，但跟其他语⾔不同的是，数组中每个槽位可以存储任意类型 的数据。并且，数组也是动态⼤⼩的，会随着数据添加⽽⾃动增⻓ Fuction 函数实际上是对象，每个函数都是 Function 类型的实例，⽽ Function...