- 博客(63)
- 收藏
- 关注
RSS订阅
原创 回调地狱 和 Promise的原理与使用
Promise是解决 回调地狱 的问题而诞生的。我们得回到回调地狱是什么1.回调地狱多层回调函数的相互嵌套，就形成了回调地狱。示例代码如下： <script> setTimeout(()=>{ console.log('aaaaaaaa'); // 1秒执行 setTimeout(()=>{ console.log('bbbbbbbbbbbb'); // 3秒后执行
2021-11-10 23:32:43
1378
1
原创 导航守卫（路由守卫）~全局导航守卫与局部导航守卫（监视hash值（url））
导航守卫：当Router（路由）之间发生挑战时，会触发导航守卫。（再简单理解就是url发生改变时就会触发导航守卫）前局前置导航守卫通过 router.beforeEach 注册全局组件to:即将要进入的路由对象from:要离开的路由对象next: 是一个函数里面有类容就是跳转类容 没有类容就是放行注意：next函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错（白话理解：给定的导航守卫一次...
2021-10-14 20:14:42
3667
1
原创 在react中使用highlight.js将页面上的代码高亮
通过 highlight.js 库实现对文章正文 HTML 中的代码元素自动添加语法高亮，highlight.js官方文档下载highlight.jsnpm i highlight.js导入highlight.jsimport hljs from 'highlight.js'import 'highlight.js/styles/vs2015.css'用highlight.js useEffect(() => { // 配置 highlight.js hljs.co
2021-12-13 16:22:25
3996
原创 XSS 攻击 ----防止XSS 攻击
什么是XSS攻击人们经常将跨站脚本攻击（Cross Site Scripting）缩写为CSS，但这会与层叠样式表（Cascading Style Sheets，CSS）的缩写混淆。因此，有人将跨站脚本攻击缩写为XSS。XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成
2021-12-13 15:27:53
468
原创 直接获取URL的办法----------new URLSearchParams()
URLSearchParams 构造函数有很多实用的方法来处理 URL 的查询字符串平常我们通过查询字符串的方式传参需要通过对字符串进行处理后才能使用。URLSearchParams()中有帮我们做处理的方法直接返回处理后的数据格式URLSearchParams构造函数 通过new实例化，并传入查询的字符串let params = new URLSearchParams('需要查询的URl');//一般配合location.search使用必须传入以下格式的字符串URLSearchPa.
2021-12-13 11:32:57
3418
2
原创 react 搜索框高亮关键字 （函数封装）
1.目标搜索框搜索时输入的内容高亮起来，使用String.prototype.replace完成函数封装2. String.prototype.replace链接：https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Global_Objects/String/replace格式：-在目标字符串中，用正则做匹配，如果匹配到，就用参数2的返回值来替代匹配的部分const 新字符串 = 目标字符串.replace(正则表
2021-12-12 20:44:22
1107
原创 手写图片懒加载-------IntersectionObserver------JavaScript和React
实现思路：利用浏览器提供的 IntersectionObserver，监听图片元素是否进入可视区域，进入后才真正去设置图片元素的 src 属性进行图片加载。1. IntersectionObserver的基本使用详细请看阮一峰IntersectionObserver API 使用教程作用：监听图片元素是否进入可视区域，进入后才真正去设置图片元素的 src 属性进行图片加载。格式：var dom = dom元素// 实例化一个观察者// 它的参数1是一个回调：当被观察的目标进入视口/离开视
2021-12-10 21:50:11
452
原创 websocket 建立聊天接口
1、 websocket简介WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。典型的websocket应用场景：即时通讯…客服聊天室 广播点餐2、socket技术客户端：发socket请求可以用原生的可以使用包 socket.io服务器端: 提供socket服务socket.io3. 代
2021-12-06 15:59:15
1073
原创 React 登录过期-无感知刷新-401问题-整体说明
1、401的错误场景有如下两种情况会出现401错误：未登陆用户做一些需要权限才能做的操作（例如：关注作者），代码会报出401错误。这种情况下，应该让用户回到登陆页。登录用户的token过期了2、refresh_token和token的作用当用户登陆成功之后，后端返回的token中有两个值，说明如下：（不是一定，有一些就可能只返回一个）token:作用：在访问一些接口时，需要传入token，就是它。有效期：2小时（安全）。refresh_token作用: 当to
2021-12-06 11:16:41
2350
1
原创 封装鉴权路由组件封装
作用与目标react中没有路由守卫，但是类似的功能有现成的。参考：https://v5.reactrouter.com/web/example/auth-workflow能够封装鉴权路由组件实现登录访问控制功能判断用户是否登录路由进入主页未登录返回登录页1.定义组件1、分析组件需求需要传入跳转组件要跳转的路径2、 定义私有路由组件。在 components 目录中创建 PrivateRoute路由组件：实现路由的登录访问控制逻辑有token，正常访问没有to
2021-12-05 12:25:24
556
原创 TypeScript中统一设置axios的返回值类型
问题const res = await request.post('/authorizations', values)console.log(res.) // 这里的点没有提示解决代码// 泛型函数，接口，类type ApiResponse<T> { message:string, data:T }export const login = (values:any) => { return async (dispatch:any) => {
2021-12-01 21:34:30
3818
原创 redux初始化
redux 初识化的步骤几乎相同！！几乎都是复制重用1.安装 redux 相关的包：redux ： 集中式储存状态，主要包react-redux： 是Redux提出的React绑定库redux-thunk： 中间件-可以再里面进行函数操作注意redux-thunk我这里下载的是2.3.0的版本，最新版有BUG使用TS的时候在[email protected]新版中，使用dispatch的时候，会丢失提示redux-devtools-extensio：调试工具，需要搭配Redux DevT
2021-12-01 20:37:10
647
原创 ThunkAction的类型介绍与使用.(解决在thunk中间件发请求，返回的是个函数无法指定dispatch的问题)
thunk类型的变更，使用了thunk之后，返回的Action类型不再是对象，而是函数类型的Action，因此需要修改Action的类型。ThunkAction类型的使用1. 使用场景如下情景：如果我要确定dispatch的类型改怎么办？2 .ThunkAction类型的使用类型参数1： ReturnType 用于指定函数的返回值类型 void类型参数2： 指定RootState的类型类型参数3： 指定额外的参数类型，一般为unkonwn或者any类型参数4： 用于指定dispatc
2021-11-28 21:58:19
1261
原创 原生CSS变量
1.CSS变量的作用将某一种css方案进行统一管理，例如：为了保持一种配色方案，在这个配色方案中会有一些颜色经常重复出现在CSS样式表中。如果想要修改配色方案，不论是想单独修改某个颜色或是整套配色，都不是一个简单的问题，而且很容易出错。2. 定义格式两个- -开头定义变量- - 变量名使用变量var(变量名)2.1全局css变量:root全局css ,固定写法/* 1 创建全局 CSS 变量 --geek-color-primary*/:root { --color:
2021-11-28 20:30:17
500
原创 项目准备-配置路径别名（配置@指向src）
在代码中，就可以通过 @ 来表示 src 目录的绝对路径1. 安装修改 CRA 配置的包npm i -D @craco/craco2. 配置文件在项目根目录中创建 craco 的配置文件：craco.config.js，并在配置文件中配置路径别名const path = require('path')module.exports = { // webpack 配置 webpack: { // 配置别名 alias: { // 约定：使用 @ 表示 sr
2021-11-28 19:47:06
1455
原创 Eventloop事件循环机制
Js是一门单线程语言，eventloop是浏览器或node.js解决单线程问题的一种执行机制，也就是同步任务和异步任务的 原理。1. 同步任务在主线程上排队执行的任务，一个一个向下执行，如果在某一个为位置执行被终端，那么后续都不会执行（最常见的情况就是报错）2.异步任务不进入主线程的任务，而进入任务队列的任务，只有等任务队列通知主线程某个任务可以执行，这个任务才会被加载到主线程，开始执行。异步任务又分宏任务与微任务宏任务：Promise.then/catch/finally，que.
2021-11-24 21:46:53
216
原创 TypeScript-基本介绍-使用
1.typeScript是什么JavaScript：是弱类型的动态语言TypeScript：是强类型的静态语言typeScript：简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。TS 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScriptTypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行// TypeScript 代码
2021-11-24 18:54:46
1089
原创 如何回答面试题 响应式与双向数据绑定
1 .响应式与双向数据绑定响应式与双向数据绑定是不一样响应式：当对象的属性值被修改之后，他能通知视图更新双向数据绑定：1.从数据到视图（响应式）2.从视图导数据2.你对Vue2.x的响应式的理解？他是通过Object.defineProerty来对对象的属性进行拦截（劫持），就可以知道的“在什么时间，那个属性被改成那个值”通过对视图进行编译，收集依赖关系（那个DOM元素，需要在属性值依赖变化时更新。），把依赖关系保存到观察者模式中。当数据被修改时，通过观察者模式发布事件，
2021-11-23 19:22:14
311
1
原创 recat打包优化
极客园PC项目【项目打包和优化】项目打包和优化-项目打包目标：能够通过命令对项目进行打包步骤：在项目根目录打开终端，输入打包命令：npm run build等待打包完成，打包后的内容被放在项目根下的 build 文件夹中项目打包和优化-项目本地预览目标：能够在本地预览打包后的项目步骤：全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务在项目根目录中执行命令：serve -s ./build，在 build 目录中开启服务器在浏览器中访
2021-11-23 18:10:33
191
原创 React-路由守卫 访问控制-Route组件的render
目标当login跳转到lindex的时候，需要判断这次跳转是否登录是否有权限进入。(鉴权/路由守卫)1.Route的上使用render格式Route的作用是当path匹配成功时，加载显示对应的组件格式：<Route path="/login" component={组件}>或者：通过render回调函数把组件return出去尽然是函数就可以写逻辑操作了<Route path="/login" render={() => { return <组件/&g
2021-11-20 19:15:39
1741
原创 React中非组件环境下拿到路由信息----------History
1.如何拿到路由信息，通常情况下都是在组件情况下通过useHistory拿到路由信息的但是有个很严重的问题，useHistory这个方法只能只能在组件环境下才能使用，如果非组件将无法使用2. Router包 与 HashRouter/BrowerRouter的区别react-router-dom中是有Router这个包，但是它Router 没有history属性简单理解就是：Router + HashHistroy = HashRouterRouter + BrowerHistroy =
2021-11-19 23:12:34
767
原创 react环境配置-引入eslint-保存自动格式化
1.配置eslint1.1安装eslintnpm i eslint typescript -D1.2 安装响应插件1.2.1 安装完eslint后，安装响应插件npx eslint --init 1.2.2 使用什么样规则的eslint1.2.3 项目什么类型1.2.4 项目使用的什么框架1.2.5 项目使用TypeScript吗？如果前面没安装一会会报错，先选yes后面再把 typeScript装上1.2.6 代码在哪运行1.2.7 代码/项目风格1.2.8 风格
2021-11-17 21:50:38
631
1
原创 Vue 组件传值的十种方法 敲黑板~~~~~敲黑板~~~~ 是十种
1. 父向子传值- 父组件里子组件标签上绑定自定义属性，子组件通过props接受代码实例2.子向父传值父组件：在子组件标签上定义一个事件子组件：在子组件通过$emit调用父组件定义的事件，并携带参数。代码示例：3.eventBus 事件总线可以通过EventBus进行信息的发布于订阅。（创建一个能够访问到事件总线）事件总线可以分别放到prototype原型上或者另外创建一个js文件作为媒介也可以3.1 在vue原型上挂载prototype原型上挂载是事件总线（main.js文
2021-11-14 21:01:37
1180
2
原创 使用json-server搭建本地接口
当后端还不能提供接口，可以暂时使用本地接口代替继续开发我们今天就来聊聊怎么借助于json-server来搭建我们自己的本地的数据接口，对我们的数据进行增删改查 json-server 官网官方网址：https://github.com/typicode/json-serverjson-server是不需要担心跨域问题的，包内部已经做了处理1、全局安装json-server它是依赖于nodejs的第三方包，它是一个独立的工具，并不限于某个项目，可以全局安装npm i json-server -.
2021-11-10 18:31:44
1215
1
原创 props校验-基本使用
对于子组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，有了类型校验，我们的程序就更加健壮了。步骤导入 prop-types 包 。这个包在脚手架创建项目时就自带了，无须额外安装import ProtTypes from 'prop-types'使用组件名.propTypes = {属性名1: 类型1, ...} 来给组件的props添加校验规则示例import PropTypes from 'prop-types'class App extends React.
2021-11-08 20:55:55
482
原创 React 组件通讯
props 是实现组件通讯的关键1.props基础使用格式：父组件-传入数据：< 子组件 自定义属性1={值1} 自定义属性2={值2} .... />子组件-函数式组件-接收数据// 接收数据： 函数组件需要通过补充形参来获取function 子组件(props) { console.log('从父组件中传入的自定义属性被收集在对象:', props) return (<div>子组件的内容</div>)}子组件-类组件-接收数据//
2021-11-08 19:20:24
254
原创 react环境配置-引入eslint-保存自动格式化
目标在react项目中配置eslint，并启用保存自动格式化功能思路在项目中安装eslint用eslint的init命令创建eslint配置文件设置vscode的自动保存格式化步骤npm i eslint typescript -D在项目根目录，运行npx eslint --init按交互提示安装相关插件选择是否使用 TypeScript， 选择是它会自动生成eslint的配置文件设置vscode的自动保存格式化代码在项目根目录下，补充配置文件：.vscod
2021-11-07 21:22:27
1010
原创 JSX介绍-基本使用
react创建一个元素React.createElement的格式:React.createElement(‘标签名’,{标签上的属性1：值1},子元素1，子元素2)// 导入react和react-domimport React from 'react'import ReactDOM from 'react-dom'// 创建元素const title = React.createElement('h1', {id:'box'}, 'hello react')// 渲染react元
2021-11-07 21:19:25
774
原创 React脚手架-从零开始创建项目
官方工具: create-react-app创建方式1先全局安装脚手架工具包npm i -g create-react-app用脚手架工具来创建项目create-react-app your-project-name创建方式2直接使用npx来创建项目命令：npx create-react-app your-project-name解释：npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称your-p
2021-11-05 19:06:51
487
原创 git 的详细使用 操作暂存区
git 大概流程：1.配置1.1 配置本机全局的用户名（username）和邮箱（useremail ）配置 >>>> 查看一般就是新安装git才需要配置一次git config --global user.name 'ifer' # fier 是 输入用户名git config --global user.email '[email protected]' # email 是 输入用户名配置后进入到 C:/Users/用户名文件夹/.gitconfig 文件中。这个
2021-11-01 23:32:55
9079
1
原创 elementui中el-button点击后不失去焦点(按钮颜色不变)的解决方案
初次接触前端，初次使用vue，初次使用elementui，难免遇到坑。使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态原因el-button 的鼠标经过样式以及点击/获取焦点样式其实都是用css完成的。点击按钮后按钮会获得焦点CSS :focus 选择器触发；也就是说获得焦点才会导致 el-button 高亮；解决方案你可能会想去掉 :focus这个选择器；或者覆盖我告诉你！不可能！我尝试层叠掉那个样式但是color和boder
2021-10-31 23:09:02
13954
6
原创 ESLint 的介绍和使用以及ESLin不能使用的问题
1.什么是eslintESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范（例如： = 的前后必须有一个空格）。规范行业推荐的规范； 在创建项目时，我们使用的是 JavaScript == Standard == Style 代码风格的规则自定义的规范。你和你的团队可以自行约定一套规范使用ESLint的好处在于：多人协作时代码风格统一eslint是法官，Standard 是法律2.JavaScript Standard Style 规范说明在项目创建之初我们就选
2021-10-30 23:28:47
1996
原创 hash路由模式与history路由模式
1.hash路由模式hash模式 ：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user原理： hashChange2.history模式history模式： 美化后的hash模式，路径中不包含
2021-10-29 23:10:43
2925
1
原创 前端模拟上线 解决上线后跨域问题 在nodejs环境中布署应用
正常项目上线流程就是我们前端把需要上线的有效代码放在服务器上，服务器的维护就是后端的事了当前目标：将打包好的代码打包上线(本地模拟)1.使用 koa 框架部署项目1.1.建立web服务文件夹 hrServer1.2.在该文件夹下，初始化npmnpm init -y1.3.安装服务端框架koa(也可以采用express或者egg)npm install koa koa-static1.4.hrServer中新建public目录，将打包好的项目 dist 拷贝到hrServer/pub
2021-10-29 21:12:09
548
原创 打包优化-整体介绍
当项目开发完成就需要做最后的打包打包 ：用webpack做打包（把.vue, .js, .less ------> .js, .css, .html）在项目中都会提供命令： npm run build （不是固定的看自己的package.json文件的配置）打包优化:在保证功能可用的前提下，让我们的文件尽可能小在保证功能可用的前提下，让我们的页面显示出来的速度更快一些打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.
2021-10-29 18:51:12
803
原创 全屏功能-实现全屏-图标切换
目标：添加一个按钮，实现全屏网页全屏切换实现方法：浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen()，不过有兼容性问题，所以改用插件。接下来我主要用到使用screenFull插件来提供全屏功能1.安装组件npm i screenfull1.1介绍几个screenfull核心方法和属性screenfull.toggle()这个方法会请求全屏，如果当前是全屏则会退出全屏。.on（事件，函数）screenfull是插
2021-10-29 16:37:43
515
原创 多语言多语言国际化支持
目标：实现多语言之间的切换1. 安装国际化的包npm i vue-i18n2. 多语言配置这里就以element-ui为例：单独创建一个.js文件// 进行多语言支持配置import Vue from 'vue' // 引入Vueimport VueI18n from 'vue-i18n' // 引入国际化的插件包import locale from 'element-ui/lib/locale'import elementEN from 'element-ui/lib/locale/
2021-10-28 23:00:59
472
原创 vue-element-admin Excel导出使用
介绍： vue-element-admin 中已经帮我们封装好的导入导出组件 ，我们直接拿过来使用就可以了。 Excel 的导入导出都是依赖于js-xlsx来实现的。 在 js-xlsx的基础上又封装了Export2Exce
2021-10-27 20:06:48
1201
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人