weixin_58384302的博客

原创 如何在react项目中使用@符作为src文件路径

# 前言**主要说一下在react项目中如何配置@为跟路径，文件太多使用./并不能很好的找到文件的路径，嵌套的很深写起来也会非常繁琐，话不多说，直接看步骤**### 1.步骤1. 在项目根目录创建 `jsconfig.json` 配置文件1. 在配置文件中添加以下配置jsconfig.json 中：```{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] ...

原创 react项目常用导入及包名

1.react包 //useEffect：副作用函数， //useState：给函数组件提供状态 import { React, useEffect, useState, useRef } from 'react' 2.react-dom //渲染dom import ReactDOM from 'react-dom'3.redux // 1.创建store的方法和中间件的方法 import { createStore, applyMiddleware }

原创 React的知识点的整理(一)

最近闲来无事,整理下React的一些知识React 是什么React是用于构建用户界面的 JavaScript 库。React全家桶（react，react-dom，react-router，redux）是框架。三大框架背景(1)react起源于meta(原Facebook)的内部项目(2)vue是尤雨溪的个人作品(3)angular是goole公司产品React 特点（1）声明式：用类似html的语法来定义页面。react中通过数据驱动视图的变化，当数据发生改变,react能够高效地更新并

原创 在React的非组件环境下拿到路由信息

背景有些时候,我们需要在非组件环境下进行路由的跳转,一般咱们的用法就是history.push()但因为history我们一般是通过useHistory获得到的,而非组件是不能通过这种方式进行获取的那我们应该怎么进行获取呢?方法一用location.href=路径这种方法使用这种方式进行跳转的话,可以达到跳转的目的,但是它会进行页面的强制刷新,这样的话就跟我们的单页应用程序的目标相反方法二(推荐使用)首先我需要先说明一下:react-router-dom中直接有Router这个包，但是它R

转载 单页应用与前端路由实现(详解)

摘要本文介绍了单页应用和路由的概念，并介绍了如何用两个技术:hash模式和history模式来实现单页应用的效果。1. 内容什么是单页应用单页应用的特点用路由来实现单页应用hash模式history模式总结2. 什么是单页应用单页应用的英文是single page application，简称SPA。字面含义就是一个应用只有一个页面，这其实是一个很颠覆的概念，有点反常识。按我们一般意义上的理解，一个应用肯定得有多个页面呀。例如：一个新闻网站必须有主页，列表页，详情页等等。我们可能想象

原创 常见的javaScript中的继承方法

关于javascript的继承,我这里大致分为es5的继承方法和es6的继承方法一、ES5的继承方法ES5继承有以下六种方法1、原型链继承JavaScript实现继承的基本思想：通过原型将一个引用类型继承另一个引用类型的属性和方法2、借用构造函数继承(伪造对象或经典继承)JavaScript实现继承的基本思想：在子类构造 函数内部调用超类型构造函数。 通过使用apply()和call()方法可以在新创建的子类对象上执行构造函数3、组合继承(原型+借用构造)(伪经典继承)JavaScript

原创 JavaScript 中的作用域、预解析与变量声明提升

一、什么是作用域作用域就是变量的有效范围。 在一定的空间里可以对数据进行读写操作，这个空间就是数据的作用域1、全局作用域： 最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的；2、局部作用域：局部作用域一般只在固定的代码片段内可访问到，而对于函数外部是无法访问的，例如函数内部在ES6之前，只有函数可以划分变量的作用域，所以 在函数的外面无法访问函数内的变量 3、块级作用域：凡是代码块就可以划分变量的作用域，这种作用域的规则就叫块级作用域 块级作用域 函数作用域

原创 不要再纠结React与Vue的好坏这个问题了

前言:react与Vue谁更好一直是一个比较争议的问题,这里我先直接引用一下Vue设计者尤雨溪的回答虽然Vue和React两者在定位上有一些交集，但差异也是很明显的。Vue 使用的是 web 开发者更熟悉的模板与特性，Vue的API跟传统web开发者熟悉的模板契合度更高，比如Vue的单文件组件是以模板+JavaScript+CSS的组合模式呈现，它跟web现有的HTML、JavaScript、CSS能够更好地配合。React 的特色在于函数式编程的理念和丰富的技术选型。Vue 比起 React 更容

原创 组件的切换与缓存

SPA页面是多组件拼起来的,这时候就存在组件之间的切换问题，Vue中也提出了动态组件的概念,使得我们可以更好的实现组件之间的切换效果 , 但是vue中组件的切换实际是组件本身重新创建和销毁的过程,在某些场景下我们并不希望组件被重新创建重新渲染这里我就主要介绍Vue中组件的切换以及缓存解决方法一、组件的切换方式(1) 使用 v-if和v-else或者(v-show)<Com1 v-if="istrue" /><Com2 v-else />当里面的istrue为true时

原创 防抖(debounce)和节流(throttle)

开发中时常有人会谈到防抖和节流的使用,这里我就说一下我对于这个两者的理解首先: 无论是防抖还是节流最终的目的都是避免回调函数中的处理每次都执行其次就是看使用场景,选择合适的方式进行一、防抖：1.1 什么是防抖在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。1.2 一般应用场合(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；(2) window的resize、scroll事件，不断地调整浏览

原创 函数柯里化解析

前言这两天听人在讨论函数柯里化的应用,就想着写一篇自己关于函数柯里化的看法函数柯里化不管在面试还是日常的开发中都是经常被提及的一个东西,下面我们就来写一写函数柯里化是个什么东西一、什么是函数柯里化柯里化是函数的一个高级应用,也就是高级函数(接收函数作为参数的函数或者返回一个函数的调用，都可以叫做高阶函数)的一个特殊用法柯里化：把接收多个参数的函数变换成接收一个单一参数的函数（单一参数为多个参数中的第一个）函数柯里化思想：一个JS预处理的思想，降低通用性，提高适用性。柯里化的核心原理：利用函数执

原创 浅析js中的闭包

一、变量的作用域要理解闭包，首先必须理解Js的作用域。咱们常说的作用域就是两种：全局作用域和局部作用域(函数作用域)。js这个弱脚本语言之中的特殊之处，就在于函数内部可以直接读取全局变量。二、闭包的定义在一个作用域可以访问另外一个函数内部的局部变量 ,或者说一个函数（子函数）访问另一个函数（父函数）中的变量。 此时就会有闭包产生 ,那么这个变量所在的函数我们就称之为闭包函数。function aaa() { var a = 0; return function () {

原创 Vue 钩子函数(含生命周期钩子)汇总

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。一、 beforeCreate ()在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。二、created()在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，atch/event 事件回调。然而，挂载阶

原创 如何在react老项目中使用eslint

ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范（例如： = 的前后必须有一个空格）。规范行业推荐的规范； 在创建项目时，我们使用的是 JavaScript Standard Style 代码风格的规则自定义的规范。你和你的团队可以自行约定一套规范使用ESLint的好处在于：多人协作时代码风格统一那我们怎么在没用使用eslint的项目中去使用eslint呢?这里我们以一个react老项目为例一、 在项目中安装eslint包(1) 下载eslint包我们在一个新项目中需

原创 webpack介绍

一．什么是webpackwebpack是前端的项目构建工具，可以实现对项目静态资源的合并，压缩，打包等功能。核心:1. 入口entry2.出口output3.模式mode4.插件plugin5 加载器loader二．webpack的安装目前最新的版本是5.x.x 后续会继续升级项目安装 npm i webpack webpack-cli -D三．Webpack的基本使用(1) 基本使用案例第一步：创建一个项目文件夹并进入文件夹中创建src文件夹第二步：初始化项

原创 后台系统中RBAC权限设计(详)

在一些大型公司中,很多都有人资的中、后台系统,但在这个系统里面,不是每个人进入都可以对里面的数据进行操作。正常情况下只有少部分的人可以完成例如:人事调整,部门调整,职位调整,薪资调整等一系列的操作。为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。一、RBAC权限模型的组成1. 用户(使用系统的员工账号)一个系统首先会有用户.后台系统的用户基本都是公司

原创 webpack配置排除打包-整体分析

进行webpack优化的时候,我们首先得知道webpack的打包流程是啥样的一、webpack打包流程首先webpack打包会有默认的出口跟入口,还要一个入口跟出口的配置文件 默认入口: ./src/index.js 默认出口: ./dist/main.js webpack配置 - webpack.config.js(默认)1. 新建src并列处, webpack.config.js2. 填入配置项 const path = require("path")

原创 项目上线前的打包优化-整体介绍

项目开发完成之后,我们需要对项目进行打包,并且做好优化打包 ：用webpack做打包（把.vue, .js, .less -----------> .js, .css, .html）在项目中都会提供命令： npm run build这个命令并不是绝对的,可自己进行设置如果是二次开发,一定要进这个文件进行查看你的命令是什么样的碰到命令名很相近的话,看一看后缀名,根据配置的不同的环境变量进行选择打包优化:在保证功能可用的前提下，让我们的文件尽可能小在保证功能可用的前提下，让我们的页面

原创 如何在一个崭新的项目中使用 svg-icon

一.如何在新项目使用svg-icon组件 步骤1.安装依赖 npm i svg-sprite-loader@4.1.32.配置 vue.config.jsconst path = require('path')function resolve (dir) { return path.join(__dirname, dir)}补充一个配置{ }module.exports ={ // 省略其他... chainWebpack (config) { // set svg-

原创 前端vue项目中的多语言国际化支持

前端开发项目,特别是国际化的项目,需要进行多语言的支持vue项目中的多语言支持使用的是vue-i18n一、安装多语言包并进行配置1.安装vue-i18n的包npm i vue-i18n@8.22.22.进行ElementUI的多语言配置pc端的vue项目,大部分使用的Element组件库的组件,这里我也是直接引入的ElementUI的多语言包我们自己的项目中有些需要自定义文字的地方,需要我们自己写成语言包,再进行引入最后展开到相应的语言环境下就可以了// 进行多语言支持配置import

原创 vue组件进行Excel的导入与导出

excel的导入导出功能,前端后端都可以实现这个功能,网上也有了很多成熟的解决方案前端做的话,那么数据的处理就是在前端进行完成,后端提供一个大批数据导入的接口就可以了后端做的话,前端就直接使用文件上传的方式将excel文件上传到后端,由后端进行数据的转化做后台项目的话,一般情况下都会有这个功能,现在我就将我的常用的方案分享一下我使用的是vue-element-admin中提供的excel导入功能一、excel的导入首先我们需要去将UploadExcel组件拷贝到需要使用的的项目之中然后安装一

原创 深浅拷贝的区别和深拷贝的常用方法

一、数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined) 引用数据类型（Object 类型，细分的话有：Object 、Array 、Function… ）。基本数据类型的特点：直接存储在栈(stack)中的数据引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。二、浅拷贝与深

原创 分享几个好用的工具函数

一、时间格式化函数function parseTime(time, cFormat) { if (arguments.length === 0 || !time) { return null } const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' let date if (typeof time === 'object') { date = time } else { if ((typeof time ==

原创 web前端路由的工作流程

前端路由的解析

原创 原生js封装的自定义页码显示函数

自己封装的一个分页组件的页面的函数,废话不多说,直接上代码 function abc(total,size,page,num=5){ // 1.判断最多会有多少页 const maxPage = Math.ceil(total/size) const arr=[] //添加数组 for(let i= 1; i <= maxPage ; i++) { arr.push(i)

原创 javascript(ECMAScript)中逗号运算符的基本使用方法

一、逗号操作符的基础用法逗号操作符可以用来在一条语句中执行多个操作，如下所示：在一条语句中同时声明多个变量是逗号操作符最常用的场景。不过，也可以使用逗号操作符来辅助赋值。在赋值时使用逗号操作符分隔值，最终会返回表达式中最后一个值：在这个例子中，num 将被赋值为 2，因为 2 是表达式中最后一项。逗号操作符的这种使用场景并不多见，但这种行为的确存在。二、逗号操作符的拓展用法逗号操作符还有很多意想不到的操作,例如可以使我们的代码最大程度的进行简写,如下所示：let arr = [{ id: 1

原创 前端数据处理必备技能:数据的树形结构化(递归法与递归法)

在前端的开发过程中,我们有时候会碰到这么种情况,后端给我们的是一组平铺的数据。而我们需要渲染的却是一个树形结构图,那么我们要怎么将其进行转化呢? [ {id:"01", pid:"", "name":"老王" }, {id:"02", pid:"01", "name":"小张" }, {id:"03", pid:"01", "name":"老王" }, {id:"04", pid:"", "name":"老李" }, {id:"05", pid:"04", "

原创 vue框架中Vue.use()注册与Vue.component()注册的区别

在实际的开发中,我们进行组件和插件的注册时候,发现那些插件和组件有些会推荐我们使用Vue.use()方法进行注册,有些又会推荐我们使用Vue.component(),今天就这两个注册方法来简单的谈一谈个人的理解一、使用Vue.component()注册首先我们使用Vue.component()注册的大部分是一些我们需要进行全局运用的自定义,所以我们会到main.js里面进行注册。Vue.component()里面接收两个参数 第一个参数是自定义元素名称，也就是将来在别的组件中使用这个组件的标签名

原创 在Element-ui组件库中table表格组件的自定义索引问题

在使用组件开发的过程中,有些组件的属性不好进行设置,直接使用数据里面的索引进行表格索引的设置会产生不必要的麻烦,现在我把自己遇到的麻烦和解决办法分享一下一、 需求需求是在翻页时,所有的数据的索引是连续不断的。但是组件提供给我们的type="index"属性只能达到这个效果由于分页请求的效果,我们无法使用索引来给所有的数据项一个连续索引的目的二、解决办法碰到这种情况,我们首先去查看文档,看有没有其他的办法进行解决文档给出了一个自定义的index方案,就是可以通过index传值来进行自定义

转载 ESLint-的基本介绍

什么是eslintESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范（例如： = 的前后必须有一个空格）。规范行业推荐的规范； 在创建项目时，我们使用的是 JavaScript Standard Style 代码风格的规则自定义的规范。你和你的团队可以自行约定一套规范使用ESLint的好处在于：多人协作时代码风格统一eslint是法官，Standard 是法律vue-cli工具在创建项目时提供选项，我们前面在创建项目时选中了它，所以它在本项目中是直接生效

原创 .sync修饰符与v-model的区别

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

原创 使用reduce()方法进行数组内部重复数据的统计

最近碰到一个题目,要进行数组重复数据的统计题目: //现在有一个数组 const arr = ['a','b','c','b','a','c','b'] //需要将其内部数据重复次数统计出来,并且转换成一个对象{a:2,b:3,c:2}的形式 .......这个题目做出来的方法有很多,我这里推荐一个方法reduce()Array.reduce()主要于对数组的求和,也可以对字符串,数组进行拼接reduce()接受四个参数： Array.reduce((a...

原创 面试题：react、vue中的key有什么作用？（key的内部原理）

1. 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,而key值是两者进行比对时的重要依据2.对比规则： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 (...

原创 vue中事件的基本使用

1.事件的绑定1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；2.事件的回调需要配置在methods对象中，最终会在vm上；3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参； 事件传参可以传自定义值,只传自定义值时,将拿不到e...

原创 vue的计算属性(computed)与监视属性(watch)介绍

1.定义：要用的属性不存在，要通过已有属性计算得来。2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。3.get函数什么时候执行？ (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。完整写法:computed:{ fullName:{ //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值 //get什么时候调用...

原创 在项目中使用actions发送请求时的流程图

当我们需要使用vuex管理请求数据时,一般都是用actions进行请求的发送,然后存放到vuex的state中进行存储,当我们在组件中需要用到这部分的数据时,就可以直接在vuex中进行获取具体流程图如下所示...

原创 $router与$route的区别

最近的学习过程中,出现了一个错误,刚开始进行查找时,并未找出来,后来通过错误打印,最终打印出来这个错误,想在将其分享一下1.$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vue构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性。以history对象来举例：$router.push({path:'home'})，本质是向history栈中添加一个路由，在我们看来是切换路由，但..

原创 盘点前端开发常用的几款编辑器

1. VScode(最好用)Visual Studio Code，vscode同样也是一个轻量级但功能强大的跨平台的文本编辑器，可在桌面运行，适用于Windows，MACOS，和Linux平台。它内置了对JavaScript，TypeScript和Node.js的支持，并且具有丰富的其他语言（如C++，C#，Java，Python，PHP，Go）和运行时（如.NET和Unity）的扩展生态系统。2.Sublime TextSublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图..

原创 vue-admin-template进入主页后加载的组件

原创 好用的10个vscode快捷键方法

不是每个人都对快捷键了如指掌,也没有那么多时间去研究快捷键,所以在这里,我会把我喜欢的快捷键列出来,如果有觉得好用的快捷键,欢迎在评论区补充快速查找文件 ctrl + p快捷键:ctrl + p这个快捷键可以快速查找并转到文件所在处快速查找代码 ctrl + f快捷键:ctrl + f查找当前文件该代码所在处,而且可以直接全局替换并修改打开/关闭侧边栏 ctrl + b快捷键:ctrl + b打开和关闭工作区,不需要的时候快速关闭快速换行 ctrl + enter...