- 博客(69)
- 收藏
- 关注
RSS订阅原创 解决vscode 获取扩展失败，XHR failed
今天用Vscode下东西的时候发现不能报这个错误，发现Vscode也不能检查更新了vscode 获取扩展失败，XHR failed查了查原因是计算机使用了代理服务器的缘故，要想解决这个问题我们可以直接关掉代理服务器即可。位置在设置->网络和internet->代理...
2021-12-28 16:36:35
31260
11
原创 Typescript指南
文章目录TS的类型1.布尔类型2.数字类型3.字符串类型4.数组类型5.元组类型6.枚举类型7.any类型8.void类型9.never类型10.Object类型Ts的编译选项ts面向对象1.抽象类2.接口3.属性的封装4.泛型TS的类型首先ts支持JavaScript的所有基本类型，除此之外还多出了一些类型。1.布尔类型这是js与ts都具备的基本类型。let flag:boolean=false;2.数字类型和JavaScript的数字类型相似，typescript中的数组类型都是浮点型，
2021-12-27 16:25:01
625
原创 你应该掌握的浏览器相关知识
文章目录一.浏览器安全1. XSS攻击2. CSRF攻击3.有哪些可能引起的前端安全的问题二.浏览器缓存机制1.对缓存的理解2.浏览器缓存的分类强缓存协商缓存3.浏览器的缓存机制的全过程三.浏览器渲染原理1.浏览器渲染引擎的主要模块以及渲染过程3. style样式渲染4. link样式渲染5.阻塞渲染**关于CSS的阻塞**关于js的阻塞四.浏览器本地存储1. sessionStorage，LocalStorage和CookieCookieLocalStorageSessionStorage2.浏览器的跨页
2021-08-10 10:08:29
594
原创 你能手写一个Promise吗？
文章目录一.初始化Promise二.构造函数实现三.then函数的实现四. catch的实现五. Promise.reject的实现六. Promise.resolve的实现七. Promise.all方法八. Promise.race方法如果你想更加深入的了解Promise的使用以及它的内部机制，那不妨跟着我来手写一个Promise吧。一.初始化Promise首先我们应该清楚Promise的基本结构，Promise的原型方法以及函数对象本身的方法。then与catch是我们Promise构造函
2021-08-07 15:53:03
216
原创 CSS高频重点
1. CSS选择器以及优先级标签选择器、伪元素选择器：1类选择器、属性选择器、伪类选择器：10id选择器：100内联样式：1000注意：!important声明的样式优先级最高优先级相同时，最后出现的样式生效继承得到的样式优先级最低通用选择器(*)、子选择器(>)、相邻同胞选择器(+)并不在这四个等级中，所以它们的权值为02. display的属性值及其作用none：元素不显示，并且从文档流中移除该元素block：块类型，可设置宽高，换行显示（默认宽度为父元素宽度）inl
2021-08-03 23:20:10
202
原创 你应该掌握的前端性能优化面试点！
文章目录一.浏览器渲染原理1.浏览器渲染引擎的主要模块以及渲染过程3. style样式渲染4. link样式渲染5.阻塞渲染**关于CSS的阻塞**关于js的阻塞二. 重绘与重排1.什么是css图层2.图层创建的条件3.重绘4.重排（回流）5.常见的触发重排的操作6.关于重绘重排的优化方案7.requestAnimationFrame与定时器setTimeout的区别三. CDN1.CDN的概念2.CDN的作用3.CDN的使用常见四.防抖节流1.函数防抖2.函数节流五.懒加载1.懒加载的概念2.懒加载的实现
2021-07-16 00:24:34
261
1
原创 你需要注意的Javascript高频面试点
文章目录一.数据类型1. JavaScript有哪些数据类型，它们的区别？2. 数据类型的检测方式？3. 判断数组的方式有哪些？4. null和undefined的区别5.为什么null返回一个Object6.intanceof 操作符的实现原理及实现7. 为什么0.1+0.2 ! == 0.3，如何让其相等？8.如何获得安全的undefined值9.typeof NaN的结果是多少10.isNaN与Number.isNaN函数的区别11.==操作符的强制类型转换规则12.其他值转到string规则13.其
2021-07-08 19:00:42
710
10
原创 JavaScript面试:你可以手写一个new操作符吗？
要想知道new操作符的原理，就得先了解new的作用是什么，我们都知道，一般将我们的构造函数实例化为对象时就要使用new操作符。要想真正掌握并手写一个new，你需要掌握以下知识点：原型与原型链以及this绑定相关知识。其实new的内部流程十分简单，大概就是这么几个步骤：创建一个新的对象obj将对象的隐式原型指向构造函数的原型对象通过apply调用构造函数(改变this指向到obj)返回obj，如果构造函数有返回值还需判断，如果返回值为引用类型则返回引用类型对象，如果为原始类型就返回obj
2021-07-03 15:50:19
126
原创 JavaScript面试:手写bind/call/apply函数
1.手写call和apply函数手写call函数：步骤：1.判断第一个参数的类型2.将当前的函数作为传入对象的方法3.取出argument类数组的值4.执行obj.当前函数(newarugument),并保存返回值5.删除传入对象的方法6.返回返回值代码如下：Function.prototype.newCall = function (obj) { if (typeof obj != "object" || obj == null) { obj = window } ob
2021-07-03 15:48:26
149
原创 回望Javascript:ES6
1.let，var ，const的区别回答这个问题要从一下几个方向去回答：1.块级作用域：let和const具有块级作用域，var不存在块级作用域的概念。块级作用域解决了ES5的两个问题：内层变量可能覆盖外层变量和循环时泄露循环变量为全局变量2.变量提升：var 存在变量提升，let和const不存在变量提升（只能在声明后使用），涉及到上下文的概念3.给全局添加属性：在全局window下，var声明的变量是全局变量，并将变量添加到全局对象的属性上，而let和const不会。4.重复声明：var可以
2021-07-03 15:46:16
145
原创 回望Javascript:一些Js基础
文章目录1.JS访问内部数据变量的方式与哪些以及使用场景？2. Javascript函数调用的方式有哪四种？3.new操作符的实现原理4.数组有哪些原生的方法5.什么是DOM和BOM6.对类数组（伪数组）的的理解，如何转换为数组7.为什么要使用尾调用？8.for...in和for...of的区别9.对Ajax的理解，实现一个Ajax请求10.Ajax、axios和fetch的区别11.Javascript脚本延迟加载的方法有哪些？12.CommonJS和ES6模块的异同点？1.JS访问内部数据变量的方式与
2021-07-03 15:44:30
178
原创 回望Javascript:数据类型相关
1. JavaScript有哪些数据类型，它们的区别？Javascript有八种数据类型：Number，String，undefined，null，Boolean，Symbol，BigInt，Object。其中Symbol和BigInt是ES6中新增的数据类型：symbol代表创建后独一无二且不可变的数据类型，主要是为了解决可能出现的全局变量冲突的问题BigInt是一种数字类型的数据，它可以表示任意精度格式的整数，适用BigInt可以安全的存储和操作大整数，即使这个数已经超过了Number能够表示
2021-07-03 15:41:52
170
原创 回望Javascript:执行上下文/作用域链/闭包
文章目录1.执行上下文2.执行上下文栈3.作用域4.作用域链5.闭包6.内存溢出与内存泄露1.执行上下文执行上下文是用来预处理JS代码的执行上下文栈是用来管理执行上下文的JS代码执行时它的代码位置分为一个全局代码和函数内的代码，因此执行上下文分为全局执行上下文和函数执行上下文，全局执行上下文在执行全局代码前会创建一个全局执行上下文环境将window将其确定为全局执行上下文；并且对全局数据进行一个预处理，这里面就包括：var 定义的全局变量设为undefined，并且将其添加为window
2021-06-08 18:14:05
220
2
原创 回望Javascript:原型与原型链
文章目录1.原型对象上的constructor指向哪里2.显示原型与隐式原型3.谈一谈原型与原型链4.Function，Object与原型的关系5.原型链指向题目6.探索instanceOf(手写instanceof)7.两道面试题1.原型对象上的constructor指向哪里每个函数都有一个prototype属性，这是一个引用，指向了函数的原型对象，每个原型对象都有一个constructor属性，这个属性指向函数对象本身。验证一下： function Fun(params) {} conso
2021-06-03 18:18:31
207
2
原创 学完Hooks，你会爱上React
文章目录1.Hook的优势1.1 Hook与类组件进行对比1.2 总结2. State Hook3. Effect Hook3.1 effect与componentWillUnmount3.2 使用多个effect3.3 effect的性能优化4. Context Hook5. Reducer Hook7.Usecallback8.UseMemo9.useRef10.useImperativeHandle11.useLayoutEffect12.自定义hooks1.Hook的优势Hooks的概念是Rea
2021-05-31 20:30:43
242
2
原创 Redux状态管理修炼手册
文章目录1.初识Redux1.1 为什么要使用Redux1.2 redux的核心理念1.3 redux的三大原则2.redux的基本使用2.1使用流程2.2 redux目录结构划分2.3 redux的处理流程3.react结合redux3.1 在组件中直接使用3.2 自定义connect函数4.react-redux使用5.中间件的使用5.1.中间件作用和目的5.2 redux-thunk的使用6.redux-devtools7.redux-saga在使用react进行开发的过程中,Redux作为一种状
2021-05-27 10:18:31
247
原创 React+antdesign实现添加评论功能（底部附源码地址）
React结合antDesign组件库实现一个的评论功能案例，有疑问评论区交流引入这些就不赘述了，直接说实现过程吧，这里的input部分和item是分开的两个组件，使用到的第三方的插件："styled-components": "^5.3.0",//css in js "moment": "^2.29.1", //处理时间(推荐使用)"antd": "^4.15.6", //不多说"@craco/craco": "^6.1.2",//React处理配置文件(可修改antd的主题)接下来直..
2021-05-20 23:12:00
776
原创 React组件详解(组件生命周期，组件间各种通信)等
文章目录1. react组件化2.类组件与函数组件的创建2.1 类组件2.2 函数组件3.组件的生命周期4. 组件的嵌套4.父子组件间的通信4.1 父传子4.2 子传父5. 插槽实现6.跨组件通信1. react组件化 目前的前端三大框架的核心都是采用组件化的思想。组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都可以被抽象为一个组件树组件化思想的应用：尽可能的将页面拆分为一个个小的，可复用的组件是我们的代码更加易于管理，并且扩展性也增强R
2021-05-16 09:18:27
349
1
原创 jsx核心知识详情
文章目录1.认识jsx1.1 react为什么使用jsx1.2 使用前须知2. jsx基操2.1 jsx中的注释2.2 jsx嵌入变量2.3 jsx嵌入表达式2.4 jsx绑定属性3. jsx事件绑定3.1 jsx之间绑定中的this指向问题3.2 事件参数传递4. jsx渲染5.Jsx原理解析6.react的虚拟DOM7.为什么使用虚拟DOM1.认识jsx jsx实际上是JavaScript语法上的一个扩展，也是JavaScript XML的缩写。它的作用就是用来描述我们的用户界面，使有关界面的代码
2021-05-11 20:43:15
753
3
原创 React事件绑定时this指向问题解决以及事件传参
React事件绑定中的this指向问题当时如果这是我有一个需求，我点击以下按钮，来获取我们state中的数据。btnfun(){ console.log(this);//undefined console.log(this.state.data);//not undefined}这里为什么会出现这个问题呢？因为btnfun()函数并不是我们主动调用的，而是当触发button的事件时，react内部再去调用这个函数。而react的内部时不知道这里的this是指向哪里的。为了解决这个
2021-05-11 10:49:43
386
原创 开源一个Vue电商项目，欢迎交流
文章目录1. 项目基础架构1.1 项目基础架构1.2 主要插件1.3 路由封装1.4 sessionstorage的封装1.5 接口错误拦截1.6 接口环境的设置1.7 MOCK设置2.首页功能开发3.登录功能开发4.产品站功能开发5.商品详情页面6.购物车页面7.ElementUI集成8.订单确认功能9.订单支付功能10.订单列表功能实现11.源码地址1. 项目基础架构项目使用到的技术栈：Vue全家桶，后台接口线上调联，Sass预编译，ElementUI，前端优化，微信支付宝支付…1.1 项
2021-04-30 17:26:48
3409
24
原创 关于vue在面试或开发中需要留意的地方
前段时间学习了Vue框架，因此在我学习过程中整理了一些关于Vue的一些需要注意的地方，在后面根据所开发的项目，我可能会持续更新这篇基于Vue的博客，欢迎交流文章目录1.Vue中的mvvm2. methods和computed3. v-on的参数传递问题与常用的修饰符3.1 参数传递问题3.2 常用修饰符5.v-if和v-show的区别6.v-for时绑定key与不绑定key的区别7. Vue中数组方法中哪些是响应式的8. v-model双向绑定使用8.1 用于表单时9. 为什么组件中data必须是一个.
2021-04-19 19:17:51
1078
5
原创 Storage的封装
为什么要封装storage：Storage本身虽然有Api，但是只是简单的键值对的形式Storage只能存储字符串，需要人工转换成json对象Storage只能一次性清空，不能单个清空我们通常在Storage中存储json对象，因此我们需要自己封装Storage方法。/* Storage封装*/const STORAGE_KEY = 'mall';export default { // 存储值 setItem(key, value, modules_name) { if
2021-04-14 23:19:06
574
原创 vue-cli4.x配置Proxy代理解决跨域
我们在之前说了前端常见的跨域方式，其中说了proxy代理解决此问题 它的思想思想实际上是通过访问a接口代理b接口的请求，因此我们最终访问的是b接口。使用这种方式的好处是我们可以使用任何方式请求数据都可以。并且前后端都不需要做处理，只需要运维改一些配置信息。 我们这里vue项目使用的是nodejs服务器，因此我们要在vue.config.js中配置，最终传入webpack模块在给node服务器。 下面是我们的vue.confg.js的信息：module.exports={ devS.
2021-04-14 16:06:55
1902
1
原创 Vuex的五个核心概念
文章目录五个核心概念1. state2. Getters的使用3 Mutations3.1 基本使用3.2 响应规则3.3 常量类型3.4 同步函数4. Action4.1 使用Promise5 Moudle6 项目结构五个核心概念const store=new Vuex.Store({ state:{}, mutations:{}, actions:{}, getters:{}, modules:{}}) 以上为五个核心概念的内容，接下来我们一一介绍: 首先贴出一张图以
2021-04-11 10:54:37
512
原创 什么是Vuex？应用场景？
文章目录1. 作用以及使用场景1.1 Vuex的功能1.2 Vuex的使用场景1.3 Vuex多页面状态管理工作流程2. 基本使用1. 作用以及使用场景1.1 Vuex的功能Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 这是官网给我们的定义，那么什么是状态管理模式？什么是集中式存储管理？。 实际上就是我们多个组件可以共享一些数据。那么这时我们有些疑问，那这个功能我们也可以自己实现啊，只需要把我们需要的共享数据抽离为一个对象，挂载在Vue的原型上，这样我们所有的vue实例
2021-04-11 10:50:07
750
原创 SPA必备技能——vue-router详情
文章目录1.路由是什么1.1 后端路由1.2 前端路由2. vue-router基本使用2.1 搭建路由的框架：2.2 配置路由的映射关系2.3 设置默认路由2.4 改变前端路由模式2.6 使用代码跳转路由2.7 动态路由2.8 路由懒加载3. vue-router嵌套路由4. vue-router参数传递4.1 参数传递的两种方式5. vue-router导航守卫6. 使用keep-alive缓存路由界面1.路由是什么 首先我们需要搞清楚路由是什么东西摘自维基百科：通过互联的网络把信息从源地址传
2021-04-08 21:04:18
401
原创 vue-router优化之懒加载
关于路由的懒加载，官方给我们的解释为:当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。其实就是说我们的每一个路由对应的就是一个给用户展示的页面，然而按照常规的操作这些页面最终会通过webpack打包为一个bundle.js的文件，因此就造成了这个页面十分的庞大，所在在请求的时候可能会花费一定的时间，给用户造成不好的体验。因此我们可以通过路由懒加载的方式来解决这个问题。也就是
2021-04-07 20:15:49
285
原创 webpack5以上抽离配置文件（生产开发分明）
文章目录1.为什么要分离配置文件2.实施3.总结1.为什么要分离配置文件在我们开发过程中，经常在webpack.config.js文件中配置很多东西，不管是开发环境下，还是生产环境下。但是当我们在生产环境下打包时，其实很多我们开发环境下的配置时用不到的。那么当我们把所有的配置写在一个文件中时，那时不太稳妥的。因此我们需要抽离配置文件。2.实施我们需要安装webpack-merge插件 npm install webpack-merge --save-dev接着分离文件，将配置文件分为三个文件
2021-04-05 15:46:14
1648
3
原创 Vue-组件化开发
文章目录1. vue组件化思想2. 组件化基本使用详情2.1 注册组件的基本步骤2.2 全局组件与局部组件2.3 父组件与子组件2.4 组件的分离写法3. 组件化的数据存放data3.1 组件数据的存放3.2 为什么组件中必须是一个函数data4. 父子组件通信4.1 父传子4.2 子传父5.插槽5.1 普通使用5.2 具名插槽的使用5.3 作用域插槽1. vue组件化思想组件化提供了一种抽象，让我们可以开发一个个独立的可复用的小组件来构建我们的应用。任何的应用都会被抽象成一颗组件树。组件
2021-04-01 20:53:39
1346
2
原创 Vue父子组件之间实现的复杂双向绑定
父子组件之间实现的复杂双向绑定一个需求：现在在组件中有两个input，其中需要实现input的双向绑定（且改变父组件的data值），且输出时第二个input的值时第二个值的100倍。用到的技术点：父子组件通信，表单的双向绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
2021-04-01 17:32:31
328
2
原创 webpack的生产模式与开发模式详情
文章目录1.webpack简介1.1 ~是什么1.2 基本的五个概念1.3 安装2.webpack开发环境基本配置2.1 简单使用webpack打包js文件2.2 webpack.config.js文件2.3 打包样式资源css/less/sass...2.3 打包html资源2.4 打包图片资源2.5 打包其他资源2.6 使用dev-server2.7.开发环境的基本配置3.webpack生产环境基本配置5.1 提取css成单独文件5.2 css兼容性处理5.3 压缩css5.4 js语法检查eslint
2021-03-26 20:32:56
1069
1
原创 gulp自动化构建项目
文章目录1. 介绍2.引入2.1 全局安装2.2 作为项目开发依赖安装3.安装插件3.1 创建gulpfile.js文件3.2 导入插件3.3 编译less文件3.4 编译sass文件3.5 压缩css代码3.6 压缩js代码3.7 压缩图片3.8 输出数据（json/xml等）3.9 复制index.html文件到产品目录dist下4. 编译所有文件（执行所有任务）4.1 自动监视4.2 在服务端启动4.3 设置自动化1. 介绍gulp.js是一个自动化构建工具，开发者可以使用它在项目开发过
2021-03-24 16:15:25
257
原创 跨域解决方式——JSONP，CORS
文章目录1.同源策略于跨域1.1 同源策略1.2 跨域1.3 为什么要设定跨域这个概念2.解决跨域的方案2.1 jsonp2.2 CORS2.3 CORS和jsonp的比较1.同源策略于跨域1.1 同源策略首先我认为想要了解跨域前必须先要知道浏览器的同源策略。同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源指的是协
2021-03-22 23:59:22
286
原创 nodejs连接mysql的坑：“Access denied for user ‘root‘@‘localhost‘ (using password: YES)“
今天在使用Node的express框架连接mysql数据库时碰到了以下错误： code: 'ER_ACCESS_DENIED_ERROR', errno: 1045, sqlMessage: "Access denied for user 'root'@'localhost' (using password: YES)", sqlState: '28000', fatal: true经过几番查询最后才弄清楚时因为Mysql服务器通过拒绝访问进行响应，这就需要我们重置mysql的密
2021-03-21 14:25:24
2964
4
原创 使用npm引入socket.io出现err的问题
在引入socket.io时总是出错，原因找了很久，可能时因为npm引入时出现的版本错误。大概就是这个样子：解决方案：使用国内淘宝镜像引入：$ cnpm i socket.io -S
2021-03-20 17:27:08
398
原创 Pug/jade快速上手教程
文章目录1.为什么要使用模板引擎2. pug的介绍2.1关于pug的一特点：2.2 pug的安装3.pug语法3.1 标签语法3.2 属性3.3 文本3.4 pug条件语句3.5 pug循环语句3.6 mixin混合3.7 模板继承3.7.1 在pug中支持block和extends来继承模板3.7.2 包含4. express渲染1.为什么要使用模板引擎在nodejs中为什么要使用模板引擎。首先我们先想象一个场景，当前端请求到后端的一组数据后，我们要渲染dom，以前的常规操作就是使用js进行字符
2021-03-20 16:53:10
1281
1
原创 websocket指南
1.websocket上车指南首先需要搞清楚的是websocket到底是什么，它有什么作用。websocket是一种服务器主动给客户端发送消息的技术。WebSocket是一种通信协议，可在单个TCP连接上进行全双工通信。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以建立持久性的连接，并进行双向数据传输。websocket是一种通信协议。区别与HTTP协议，HTTP协议
2021-03-20 16:48:53
222
原创 带你系统学习mysql
文章目录1.数据表的设计1.1 常用操作1.2 创建数据表1.3 构建一个学生管理表2.基本操作2.1 基本查询2.2 插入2.3 更新2.4 删除2.5 备份与导入3. Mysql数据查询3.1 条件查询3.2 聚合函数3.3 分组查询3.4 分页查询3.5 连接查询（多表查询）3.6 子查询（嵌套查询）3.7 联合查询（union）3.8 保存当前结果4. 用户与权限管理4.1 MySQL账户管理账户4.2 创建用户4.3 分配用户权限4.4 查看、回收权限4.5 修改密码4.6 删除用户5.事务5.
2021-03-14 21:11:48
250
1
原创 Mysql自定义函数报错（This function has none of DETERMINISTIC, NO SQL...function_creators variable）
在使用mysql创建自定义函数时遇到了以下错误ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled (you *might* want to use the less safe log_bin_trust_function_creators variable)经过查阅资料发现我们开启
2021-03-14 16:40:29
338
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人