- 博客(62)
- 收藏
- 关注
RSS订阅原创 用户登录token的过期更新处理
思路：服务器状态码为401时，代表token过期，在响应拦截器中拦截服务器的响应信息，判断状态码是否等于401，如果为401，使用refresh_token发起请求，请求新的token，替换token信息/** * 封装 axios 请求模块 */import axios from "axios";import jsonBig from "json-bigint";import store from "@/store";import router from "@/router";// axi
2021-07-22 09:02:17
786
原创 vue依赖注入
如果父组件中有数据想给所有后代组件使用可以使用依赖注入的方法语法：父组件中：provide: function () { return { articleId: this.articleId }}子组件中 inject: { articleId: { type: [Number, String, Object], default: null } }...
2021-07-21 18:40:15
109
原创 父子组件的双向数据绑定
一、使用v-modelv-model的实质<子组件 v-model="num" />等同于<子组件 v-bind:value="num" @input="num = $event" />子组件配置v-modelprops: ['value']this.$emit('input', 值) model: { // 配置修改v-model的默认接收名称 prop: 'isFollowed', // 默认是 value event: 'update-is_follow
2021-07-21 18:30:00
142
原创 Vue中组件传值的特殊方法
父组件想获取子组件data中的数据或调用方法通过this.$refs.xx方式拿到子组件对象 直接使用子组件对象.属性名/方法名 可以直接调用子组件内的数据子组件想获取父组件data中的数据或调用方法通过this.$parent拿到父组件对象 有时候组件嵌套多层，可以连续多次$parent使用方法和上面一样...
2021-07-21 18:05:06
65
原创 vue中scoped的问题、样式穿透
vue中scoped让css样式只作用于当前文件的原理如果在vue文件中的style标签中写上了scoped属性, 就代表在此style标签中所写的所有样式, 都只会作用于当前组件中的布局, 不会影响其他组件, 哪怕是子组件scoped通过给当前文件的template内所有标签加上 data-v-(hash) 的属性 的方式，让每个vue文件标签都拥有不同的一个属性，给vue文件中的style标签加上scoped属性后，css选择器在编译时会自动加上data-v-(hash) 选择器，这样就达到了筛选当
2021-07-21 16:34:00
300
原创 js中处理大数字的问题
js处理大数字会不准确当axios内部进行JSON.parse()将服务器返回的字符串转换为对象之后, 文章的ID值会不准确解决大数字的方法：使用字符串格式的数据使用JSONbigint第一步： 安装 npm i json-bigint第二步： 配置import axios from 'axios'import jsonBig from 'json-bigint'var json = '{ "value" : 9223372036854775807, "v2": 123 }'c
2021-07-21 16:33:14
980
原创 VueX-
什么是VueXvueX是一个状态管理工具，用来管理vue数据，可以实现组件之间数据共享；它提供了一个公共内存，可以给这个内存提交数据或取数据；vueX文件中的几个属性（vuex文件–src/store/index.js）初始的vuex文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { }, mutations: { },
2021-07-09 21:26:40
69
原创 vue路由
什么是路由路由是映射关系，在vue中，路由就是路径和组件的映射关系vue路由使用路由的原因 – 单页面应用：所有功能在一个html页面上实现路由的优点：1.整体不刷新页面，用户体验好；2.数据传递容易，开发效率高；路由的缺点：1.开发成本（需要学习额外的知识）2.首次加载会慢一点，不利于seovue-routerVue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的
2021-07-09 19:03:59
74
原创 Vue动态组件、插槽、自定义指令
动态组件语法：<component :is="comName"></component>import UserName from '../components/01/UserName'import UserInfo from '../components/01/UserInfo'export default { data(){ return { comName: "UserName" } },
2021-07-06 19:32:27
118
原创 Vue生命周期、axios、$nextTick、$ref
生命周期vue的生命周期就是vue实例从创建到销毁的过程vue生命周期的钩子函数1 beforeCreate在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。2 created在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。3 beforeMount在挂载开始之前被调用：相关的
2021-07-05 21:38:54
280
原创 vue组件通信
Vue组件组件开发的优点：利于维护、代码结构清晰、无冗余代码组件化 ： 封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护；组件注册使用：全局注册import Vue from 'vue'import 组件对象 from 'vue文件路径'// import Pannel from './components/Pannel'// Vue.component("PannelG", Pannel)Vue.component("组件名", 组件对象)全局注册组件名后, 就
2021-07-05 20:37:48
91
1
原创 Vue计算属性、过滤器、侦听器
v-for更新监测当使用会造成原数组改变的方法时，会导致v-for更新，页面更新；不会造成原数组改变的方法，可以给原数组重新赋值或使用this.$set()更新数组；使用arr[索引] = 值的方法更新数组的值时，不会造成v-for的更新，需要使用this.$set()方法；this.$set()语法：this.$set(this.arr, 索引, 值)v-for的就地更新v-for的默认行为会尝试原地修改元素而不是移动他们虚拟DOM.vue文件中的template里写的标签都是模板，都要
2021-07-03 19:43:02
168
2
原创 Vue脚手架、基础API
Vue基础概念vue是一个渐进式的javascript框架vue开发的两种方式：1.传统的在html页面引入vue2.webpack工程化开发vue文件的三个根标签：1.template 提供组件的html结构（vue文件中必须有一个template，template中必须有且只能有一个根元素）2.script 写js代码3.style 写css样式（通过lang="less/sass"可以使用less或者sass，但需要安装依赖包）vue-cli脚手架因为webpack配置起来很麻烦，所以
2021-07-02 19:23:49
93
1
原创 webpack
webpack基本概念webpack概述：webpack是一个静态模块打包器；webpack可以：1.语法转换（less、sass转换为css；ES高级语法降级）2.打包、压缩、合并代码3.监听代码的变化，自动打包刷新4.提取单VUE文件里的html、css、jswebpack基本使用yarn init -y 初始化项目yarn add webpack webpack-cli -D 安装webpack包”scripts“: {"build":"webpack"} 配置打包命令（在packa
2021-07-01 20:49:28
43
原创 Promise、ES6模块化、EventLoop、微任务、宏任务
ES6模块化传统模块化规范：AMD、CMD、CommonJS （前两种在ES6拥有模块化语法后已废弃、只有CommonJS仍有node在使用）语法：默认导入和导出： import 变量名 from '路径' 导入模块（导入模块名称可自定义）；export default 对象 导出模块（默认导出只能导出一次）；按需导入和导出：import {s1, s2 as 变量名, sn} from '路径' （导入名字必须和导出的名字一致，改名可用as关键字）export let s1 = 0; exp
2021-06-27 22:08:22
122
1
原创 身份认证、web开发模式
web开发模式服务器端渲染——前后端不分离优点：前端耗时少、有利于SEO缺点：占用服务器资源、开发效率低，不利于前后端分离前后端分离优点：开发体验好、用户体验好、减轻了服务器端的渲染压力缺点：不利于SEO选择主要看业务场景，现在基本都是前后端分离的模式身份认证概念：又称“身份验证”、“鉴权”，指通过一定手段，完成对用户身份的确认身份认证的解决方案一般有两种：服务器端渲染Session认证机制；前后端分离用JWT认证机制；需要身份认证的原因：HTTP协议的无状态性：每次HTTP请求都是
2021-06-22 21:30:08
67
1
原创 MySQL数据库
数据库就是用来组织、存储和管理数据的仓库；分类：关系型数据库：MySQL、Oracle、SQL Server非关系型数据库：MongoDB关系型数据库结构：数据库、数据表、数据行、字段数据库设计表：数据类型：int 整数；varchar(length) 字符串 (length 字符串的最大长度)；tinyint(1) 布尔值；字段规则：PK（主键）一般命名为id、就是每条记录的唯一标识；NN（不能为空）；UQ（不能重复）；AI（自动增长）；SQL语句sql语句是一种查询语言，可
2021-06-19 20:43:20
69
原创 跨域cors和jsonp
corscors是一个解决跨域资源共享的第三方的中间件cors的使用const cors = require('cors');app.use(cors());解决跨域的原理：浏览器的同源策略会阻止网页跨域获取资源（跨域是浏览器的行为），但如果接口服务器配置了CORS相关的HTTP响应头，就可以解除浏览器端的跨域访问限制；cors中间件原理：Access-Control-Allow-Origin 限制域名Access-Control-Allow-Headers 限制请求头Access-Co
2021-06-19 18:43:57
99
原创 express
express简介express是基于node.js平台，快速、开放、极简的web开发框架，是一个第三方的包；express可以提供网页服务和接口；使用express搭建基本的服务器安装express npm i [email protected]（@4.17.1是版本号）const express = reequire('express');const app = express();app.listen(80, () => { console.log('server running at
2021-06-16 19:17:18
121
原创 node第三方包
第三方包的使用什么是包？第三方模块就是包，使用包可以提高开发效率；在 npm官网 搜索包；包如何下载?使用npm命令下载，只要安装了node，就可以直接使用npm命令 npm i 包名（i是install的简写）打开cmd窗口，输入 npm -v 可以查看npm的版本设置taobao镜像，可以提高包的下载速度（因为npm是外网服务器）npm config set registry=https://registry.npm.taobao.org/下载好的包可以通过 require('模块名')
2021-06-12 20:55:01
242
原创 Node.js
一、什么是node，终端是什么node的本质是一个软件，提供了js的运行环境，提供了服务器端相关API终端就是一个运行命令的工具（终端有CMD终端、powershell终端、vscode集成终端）在文件中导入内置模块的方法：require(模块名称)二、fs模块（文件系统）读取文件：fs.readFile('文件路径'， '编码格式', function (错误信息, 读取的内容) { // 操作 // 正确读取到文件时，参数1为null，参数二为读取到的内容字符串 // 未读取到文件
2021-06-12 20:23:34
75
原创 Git基本使用
版本控制软件版本控制软件是一个用来记录文件变化，以便将来查阅特定版本修订情况的系统，因此有时也叫做“版本控制系统”使用版本控制软件的好处操作简便： 只需识记几组简单的终端命令，即可快速上手常见的版本控制软件易于对比： 基于版本控制软件提供的功能，能够方便地比较文件的变化细节，从而查找出导致问题的原因易于回溯： 可以将选定的文件回溯到之前的状态，甚至将整个项目都回退到过去某个时间点的状态不易丢失： 在版本控制软件中，被用户误删除的文件，可以轻松的恢复回来协作方便： 基于版本控制软件提供的分支功
2021-06-02 19:48:54
195
原创 HTTP协议
HTTP协议简介菜鸟HTTP教程1.通信，就是信息的传递和交换。通信三要素：通信的主体；通信的内容；通信的方式；2.通信协议（Communication Protocol）是指通信的双方完成通信所必须遵守的规则和约定。客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议。网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol）简称 HTTP 协议。什么是HTTP协议HTTP 协议即超文本传送协议
2021-06-01 20:34:13
32
转载 节流和防抖
防抖的概念：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！使用定时器让事件延迟触发。节流的概念：节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。节流的应用场景① 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；② 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；节流阀的概念节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。当前操作执行完，必须将
2021-06-01 19:47:22
49
原创 Axios、同源策略和跨域、JSONP
Axios基本概念Axios 是专注于网络数据请求的库。相比于原生的 XMLHttpRequest 对象，axios 简单易用。相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。axios的基本使用方式发起get请求：axios.get(请求地址,{params: 参数}).then(function (res) {});发起post请求：axios.post(请求地址,{data: 参数}).then(function (res) {});axios.post(请求地
2021-06-01 19:26:28
549
2
原创 Ajax原生JS写法、JSON数据、上传文件
正则对象的exec()方法作用：返回表达式的匹配信息RegExpObject.exec(string);// 示例：var str = 'hello';var pattern = /o/;// 输出的结果["o", index: 4, input: "hello", groups: undefined]console.log(pattern.exec(str));1.返回值是一个对象，表示当前匹配到字段的信息；（index表示匹配到的字段的起始索引值，input表示参与匹配的字符串）；
2021-05-31 16:39:40
475
1
原创 ajax表单提交、art-template模板引擎
表单作用：提供用户可以输入数据的组件，采集用户输入的数据提交到服务器组成：1.表单标签：供用户输入的，如input、textarea、select2.表单域：form标签，包含表单标签，让若干个表单标签形成一个整体3.表单按钮：提交按钮、重置按钮form标签的常用属性：1.action：url地址，数据提交的地址；默认为当前页面的url地址；2.target：规定在何处打开url地址 _blank 在新的标签页打开； _self 在当前标签页打开；3.method：提交数据的方式；get
2021-05-31 14:51:08
126
原创 Ajax概念、jQuery的ajax方法、接口
Ajax概念Ajax是一种客户端向服务器请求数据的技术，可以在非加载页面状态下和服务器通信；客户端和服务器：客户端就是请求、查看资源的计算机；服务器就是存放、提供资源的计算机；url地址的组成：URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。http://www.baidu.com/a/b/c.html通信协议 http://服务器名称
2021-05-30 08:59:13
142
原创 ES6一些新增语法
声明变量、常量关键字let关键字：特性：1.具有块级作用域（就是花括号里的区域{}）2.没有声明提升3.有暂时性死区的特性：在调用一个变量时，如果该块级作用域中用let关键字声明了该变量，就不会再去上层作用域中查找该变量，无论调用是否在声明之前；const关键字：特性：1.具有块级作用域2.没有声明提升3.有暂时性死去的特性4.声明的时候必须赋值（因为第5点）5.不允许更改常量在栈中的值解构数组解构：作用：解析数组，把数组中的元素同时赋值给多个变量let [变量1,变量2,,变量
2021-05-27 23:59:33
198
原创 浅拷贝、深拷贝、正则表达式
浅拷贝：只把复杂类型数据的第一层做复制操作，深层的数据依然会相互影响Object.assign(新对象，老对象)；把老对象第一层数据拷贝一份给新对象，深层数据依然相互影响；注意：var newObj = obj；不是拷贝，是赋值，它只是把obj的堆中的地址给了newObj；深拷贝：把复杂数据中包含的所有数据都做复制操作，复制之后不会相互影响；（用递归来做）正则表达式创建正则表达式：1.构造函数 var re = new RegExp();2.字面量 var re = /正则表达式规则/正
2021-05-27 23:22:14
175
1
转载 JS严格模式、高阶函数
严格模式JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。严格模式对正常的 JavaScript 语义做了一些更改：消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。消除代码运行的一些不安全之处，保证代码运行的安全。提高编译器效率，增加运行速度。禁
2021-05-27 21:15:38
43
原创 函数的声明和调用方式、this指向、递归
函数的定义：1.function 函数名(){}2.var 函数名 = function(){}3.var 函数名 = new Function();函数的调用：1.函数名();2.对象.方法名();3.new 函数名();4.(函数体)(); —— 立即执行函数函数中的this指向：1.在类的constructor中，this指向类创建的实例；2.在类的公用方法中，this指向调用该方法的实例；（当前类的实例和当前类的子类的实例可以调用公共方法）3.在事件处理函数中，this指向事
2021-05-27 20:50:28
110
原创 JS面向对象
面向对象的三大特性：1.封装隐藏对象的属性和实现细节，只对外提供访问方式，将变化隔离，便于使用，提高复用性和安全性。2.继承提高代码复用性；继承是多态的前提。3.多态父类或接口定义的引用变量可以指向子类或具体实现类的实例对象，提高了程序的拓展性。面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。面向过程和面向对象的区别对比面向过程：优点：性能更高，适合跟硬件联系
2021-05-26 18:27:15
25
原创 JavaScript闭包
闭包是什么？一个局部变量和一个调用了局部变量的函数就组成了一个闭包；所以闭包其实就是一个函数，调用了一个局部变量的函数就是一个闭包；也可以说闭包是一种使用方式，一个作用域访问另一个局部作用域的变量的现象就叫做闭包；闭包的作用：延申了变量的使用范围，就是可以在更高的作用域中使用低级作用域的变量；闭包的缺点：内存泄漏（内存泄漏也称作"存储渗漏"，用动态存储分配函数动态开辟的空间，在使用完毕后未释放，结果导致一直占据该内存单元。直到程序结束。(其实说白了就是该内存空间使用完毕之后未回收)即所谓内存泄漏
2021-05-20 20:17:22
28
原创 Object.defineProperty、Object.keys方法
Object.defineProperty方法语法：Object.defineProperty(obj,'address',{ // obj是调用该方法的对象，address是给对象设置的属性 value: ; // address属性的值 writable: ; // 定义是否可以修改这个属性值 false不可修改； enumerable: ; // 定义这个属性是否可以被遍历到 false不可被遍历； configurable: ; // 定义这个属性是否可以删除，是否可以修改这个属性的这些
2021-05-20 20:00:00
161
原创 JavaScript 原型对象
静态成员和实例成员静态成员：构造函数的属性、方法实例成员：实例的属性、方法（静态成员只有构造函数可以访问，实例成员只有构造函数的实例可以访问）原型对象创建：创建函数的时候同时就会产生它的原型对象；特性：1.原型对象和构造函数是同时产生的，创建函数的时候就会产生一个相关联的原型对象；2.原型对象上的属性和方法，实例是可以调用的；3.原型对象上的方法中的this，指向调用方法的对象；作用：为实例保存公用的方法、属性原型对象、构造函数、实例的关系构造函数访问原型对象：构造函数名.proto
2021-05-20 19:34:59
53
原创 JavaScript 类class、insertAdjacentHTML方法
类的概念类就是用来创建一类对象的模板，等同于构造函数；实例：用类创建出来的一个对象；类的基本使用创建类：class 类名 { constructor () { this.属性名 = 属性值; } 方法名 () { }}constructor：为创建的对象添加属性和方法；公用的方法：所有的实例都可以调用；1.公共的方法不属于任何一个实例对象，但是所有实例对象都可以调用；2.公共的方法中的this指向调用该方法的实例对象；3.实例调用方法的时候优先调用实例的方法，如果没有再调
2021-05-18 11:01:55
104
原创 链式编程和隐式迭代
在jQuery中，可以同时操作多个标签，方法内部会循环迭代什么是隐式迭代？在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用，这就叫做隐式迭代；链式编程再jQuery中，设置方法会返回调用该方法的对象；所以再书写代码时，可以在调用方法后再接着调用另外的方法，将本来要写很多行的代码 一行完成，这就是链式编程，也是为了简化我们的操作；...
2021-05-13 18:28:00
122
原创 jQuery
jQuery 的本质是一个包含了很多方法的js文件、对原生js操作进行了包装jQuery对象和DOM对象的区别jQuery对象的是指是一个包含了若干个DOM对象的伪数组；jQuery对象和DOM对象只能调用自己的方法，不能混用；（但一个文件里可以同时书写jQuery和原生js代码）jQuery对象转化为DOM对象 — jQuery[索引值] — jQuery.get(索引值)DOM对象转化为jQuery对象 — $(DOM对象)jQuery具体的方法查询jQuery官网中文文档 jQuery中
2021-05-13 18:22:13
39
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人