- 博客(57)
- 收藏
- 关注
RSS订阅
原创 React项目中TypeScript的基本使用
解决 useSelector获取redux中的数据的类型报错问题使用typeof操作符,根据已有变量的值，反向推断出获取该值的类型，来简化类型书写导入store,使用store.getState方法获取redux中的所有分支数据,并使用typeof反推出数据类型使用ReturnType将获取的数据类型,返回出来 赋值给 RootState// Redux 应用的状态export type RootState = ReturnType<typeof store.getState>
2021-12-13 11:39:26
820
1
原创 处理token过期的问题,无感知刷新token
401错误的场景有如下两种情况会出现401错误：未登陆用户做一些需要权限才能做的操作（例如：关注作者），代码会报出401错误。这种情况下，应该让用户回到登陆页。登录用户的token过期了整体目标是：通过axios响应拦截器来处理401问题。理解token过期登陆成功之后，接口会返回一个token值，这个值在后续请求时通过请求头时带上（就像是开门钥匙）。但是，这个值一般会有有效期（具体是多长，是由后端决定），假如在我这里有效期是2小时。如果你上午8点登陆成功，到了10：01分，则token就
2021-12-06 10:28:50
7404
原创 token的工具函数封装
import { Token } from '@/types/data' // 类型声明const TOKEN_KEY = 'user'// 获取 tokenexport function getToken(): Token { return JSON.parse(localStorage.getItem(TOKEN_KEY) || '{}')}// 设置 tokenexport function setToken(data: Token): void { localStorage
2021-12-02 13:52:48
535
原创 解决React中使用typescript报错,类型“DefaultRootState“上不存在属性“xxx“以及dispatch类型报错
使用redux后,在组件中通过useSelector(state=>state.xxx)拿数据的时候,就会报一个错误,内容就是 “类型"DefaultRootState"上不存在属性"xxx”"
2021-12-02 08:48:19
3387
原创 封装axios
命令: npm i axios// 封装axiosimport axios from 'axios'const instance = axios.create({ baseURL: 'xxxxxxx', // 基地址 timeout: 5000 // 延迟时间})// 添加请求拦截器instance.interceptors.request.use( function (config) { // 在发送请求之前做些什么 // 添加请求头.... retu
2021-12-02 08:34:56
429
原创 React移动端适配方案
适配原理选择某个手机的尺寸大小作为基准，其他手机进行等比例缩放一般选择 iPhone 6（2倍屏幕），屏幕宽度为：375px适配方式rem：需要手动修改 html 元素的 font-size；额外设置 body 元素的字体大小为正常值vw： 1 vw 等于屏幕宽度的 1%vw/vh方案postcss-px-to-viewport 文档安装 px 转 vw 的包：yarn add -D postcss-px-to-viewport包的作用：将 px 转化为 vw，所以有了该工具，
2021-12-01 14:02:28
3603
2
原创 JavaScript事件循环Event Loop
执行栈在代码运行过程中,主线程(JavaScript引擎线程)中有一个执行栈,执行栈中,又存在两个东西,一个是堆,一个是栈,栈里面则是当前要执行的代码堆: 一种存放复杂或者说引用类型的内存区域动态分配的内存，大小不定，不会自动释放，存放引用类型，包含引用类型的变量，实际上保存的不是变量本身，而是指向该对象的指针(地址)。栈:一种存放数据的内存区域,当前要执行的代码先进先出,后进后出,一个有序的列表流程图:同步和异步同步任务在执行栈中执行,而异步任务执行完毕后进入任务队列当前所有同步
2021-11-02 22:36:42
483
1
原创 常见的报错内容以及解决方法(持续更新)
1. 请求数据返回404,报错解决方法: 可能是配置的请求api中,url地址存在空格,检查地址是否有误
2021-10-19 21:35:10
1421
原创 树状结构转平铺数组
reduce写法最简洁的写法 function flat(tree) { if (!tree || tree.length === 0) return acc return tree.reduce((acc, cur) => { return acc.concat(cur, cur.children && cur.children.length ? flat(cur.children) : []) }, []) }forEach
2022-01-21 15:14:45
621
原创 vue中将json数据转为form-data格式
transformRequest 允许向服务器发送前,修改请求的数据但是只能用于PUT,POST,PATCH请求例如我们要给后端的数据是JSON格式的数据,但他们要form-data格式的JSON格式form-data使用transformRequest对数据进行转换export const userLogin = (data) => { return request({ method: "POST", url: "/xxxxxxx/xxxxxx", da
2022-01-02 18:46:47
3032
原创 React项目打包优化
项目打包和优化-项目打包目标：能够通过命令对项目进行打包步骤：在项目根目录打开终端，输入打包命令：npm run build等待打包完成，打包后的内容被放在项目根下的 build 文件夹中项目打包和优化-项目本地预览目标：能够在本地预览打包后的项目步骤：全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务在项目根目录中执行命令：serve -s ./build，在 build 目录中开启服务器在浏览器中访问：http://localhos
2021-12-22 20:35:19
633
原创 vue路由跳转传参
1. 查询字符串// 传参this.$router.push(`/home?id=${99}`)// 接收使用参数this.$route.query.id // this.$route.query 是一个对象传递多个数据,对象类型// name 则是路由规则里面对应的namethis.#router.push({name:'Home',query:{id:1,pid:10}})// 查询字符串方式 可以用 path或者namethis.#router.push({path:'Hom
2021-12-21 19:29:41
259
原创 筛选出数组中不同的部分
问题导入 const oldArr = [ { title: '周一' }, { title: '周二' }, { title: '周三' }, { title: '周四' }, { title: '周五' }, { title: '周六' }, { title: '周日' } ] const newArr = [{ title: '周一' }, { title: '周二' }, { title: '周三' }] // 得到:
2021-12-12 20:17:28
403
1
原创 封装自定义Hooks发请求并从Redux中拿初值
正常写法导入useDispatch 和 useEffect 以及 useSelector在 useEffect中使用 dispatch 发送请求通过 useSelector 从redux中 获取数据import React, { useEffect } from 'react'import { useDispatch, useSelector } from 'react-redux'import { getInfo } from '@/store/aciton/xxxx'export d
2021-12-12 19:34:26
484
原创 react中使用原生防抖和ahooks中的防抖
目的减少响应跟不上触发频率的解决方案问题导入不经过任何处理的情况下,当输入框发生改变就会触发一次,如果是请求的话,那么在瞬间内就会发送大量的请求,给服务器带来负面影响import React, { useState } from 'react'import ReactDOM from 'react-dom'export default function App () { const [val, setVal] = useState('') const onChange = (valu
2021-12-12 19:05:15
1009
原创 getBoundingClientRect
getBoundingClientRect()返回元素的的大小和相对于视口的距离位置,以左上角为基准语法const box = document.querySelector('div').getBoundingClientRect()console.log(box)
2021-12-09 14:21:02
319
原创 封装搜索关键词高亮的函数
目的:高亮的高阶函数 const highLight = (str: string) => { // content 例如整条文字: Javascript 高阶函数(上) // str 为输入框当前输入的值 // 使用正则匹配 `i`不区分大小写 , `g`为全局匹配 const hStr = str.replace(new RegExp(content, 'ig'), (newStr) => { return `<span>${newStr}<
2021-12-09 14:09:59
207
原创 React中将字符串类型的标签渲染在页面上-dangerouslySetInnerHTML
在vue中提供了v-html可以直接将内容标签解析渲染在页面上虽然react中没有提供像什么v-html,但是提供了一个方法dangerouslySetInnerHTML,效果和v-html一样缺点 — XSS攻击人们经常将跨站脚本攻击（Cross Site Scripting）缩写为CSS，但这会与层叠样式表（Cascading Style Sheets，CSS）的缩写混淆。因此，有人将跨站脚本攻击缩写为XSS。XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令.
2021-12-09 13:56:19
1812
原创 给axios提供类型声明,返回的数据能够有提示
提供类型声明后,获取到的res能够.出来,选别的还会报错,减少代码错误率,方便维护使用泛型,数据的类型声明创建xxx.d.ts文件,统一用来声明类型小技巧数据多了,书写上面的,例如UserProfile类型,里面有那么多类型,会特别繁琐,我教你一招,快速解决在控制台打印拿到的数据右键,选择copy object复制到ts文件中鼠标放到obj上,就能 ts 自动猜测到的类型了,还是比较智能的...
2021-12-03 19:26:44
731
原创 React中封装自定义Hooks
倒计时的逻辑复用,抽取相同的业务逻辑,应用场景: 发送短信,倒计时,几秒后跳转网页等等import { useEffect, useRef, useState } from 'react'export default function useCountDown (initCount = 10, callBack = () => {}) { const timeId = useRef<{id:number}>({ id: 0 }) const [count, setCount]
2021-12-02 13:57:07
696
原创 TypeScripts快速入门(从入门到入土)
1. 什么是 TypeScript?TypeScript 简称: TS , 是javaScrijpt的超集 ,简单理解为,js有的ts都有, js写的代码在 TS的环境下都可以运行在 js 的基础之上 , 为js 添加了 类型支持 TypeScript = Type + JavaScript2. js 为什么要添加类型支持?js 的缺陷js的类型系统是 弱类型,没有类型的概念,也就是没有原则底线let ar = 11 // 这里是数值ar = [] // 偷偷的改成了数组类型ar
2021-11-24 20:14:00
1067
原创 React如何在非组件环境下使用history和调用dispatch
在非组件下使用 history当我们使用了 HashRouter或者BrowerRouter,我们需要知道以下几点Router + HashHistroy = HashRouterRouter + BrowerHistroy = BrowerRouter在 [email protected]中 本身就提供了Router,并且还提供了 history这个包,解决步骤:这里我是对路由方面也进行了一个更改如果只是单纯想使用 history , 可以直接创建 history(步骤: 2
2021-11-20 22:53:53
1419
原创 新建一个react项目我们需要做哪些项目前置准备呢?(不足再补充)
介绍:从创建 react项目到所需要的插件,做一个基本的整合前置 - 先全局安装react 脚手架工具包命令: npm i -g create-react-app1. 创建 react 项目用脚手架创建项目命令: create-react-app 项目名称直接使用 npx创建项目命令: npx create-react-app 项目名称npx不是直接在本地创建脚手架,并且npx下载的都是最新版本的reactnpx 是 npm v5.2 版本新添加的命令，用来简化 npm
2021-11-15 21:00:47
774
原创 React-Hooks进阶用法
本篇文章主要学习内容useState回调函数形式的参数useEffect清理副作用useRef操作DOMuseContext组件通讯
2021-11-14 21:31:40
338
原创 React函数组件Hooks的使用
Hooks**Hooks:**钩子 , 钓钩 , 钩住 ,是一些可以让你在函数组件里"钩入" React state 以及生命周期等特性的函数 ,是 React 16.8 的新增特性, 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性作用: 为函数组件提供状态, 生命周期等原本在 Class组件中才提供的功能Hooks只能在函数组件中使用可以理解为听过Hooks 为函数组件钩入 class 组件的特性Hooks 前后 , 组件开发模式的对比React
2021-11-13 20:35:19
4086
2
原创 React中setState的进阶使用
setState的特点可以表现为异步setState调用之后, 并不会立即去修改state的值 , 也不会立即去更新 DOM多次调用会合并 , setState({对象}) 会合并 , 再统一触发一次render()使用不当会很容易造成死循环 , 在componentDidUpdate,render()中调用setState()会导致死循环setState进阶 - 第二个参数格式: this.setState({ 对象},()=>{})this.setState((上一个状态)=&g
2021-11-12 20:48:25
1150
原创 React类组件的生命周期
生命周期生命周期：一个事物从创建到最后消亡经历的整个过程组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等...
2021-11-09 21:54:30
1131
原创 React中使用PropTypes进行类型检查
随着你的应用程序不断增长，你可以通过类型检查捕获大量错误。对于某些应用程序来说，你可以使用 Flow 或 TypeScript 等 JavaScript 扩展来对整个应用程序做类型检查。但即使你不使用这些扩展，React 也内置了一些类型检查的功能。要在组件的 props 上进行类型检查，你只需配置特定的 propTypes 属性示例引入 PropTypes,方式:import PropTypes from 'prop-types'通过props接收到父组件中传递的数据规定传递的数据类.
2021-11-08 21:28:09
653
原创 React中的组件通讯方式
1. 组件通讯 - 父传子数据在父组件中,那么我们该如何把父组件中的数据传递给子组件中使用呢?接下来看我操作,上代码:父组件子组件父子组件传值的格式: < 自定义属性={值}>父组件传递的值,保存在了props中,所以只需要在子组件中,使用this.props.xxx进行使用,当然为了方便,你可以进行结构2. 组件通讯 - 子传父父组件子组件在父组件中定义函数,并把这个函数传递给子组件,由子组件来触发这个函数子组件在此函数中传递任意值,并触发此函
2021-11-08 20:21:35
123
原创 vue问题整理
1. 怎么定义 Vue-Router 的动态路由?怎么获取传过来的动态参数?定义动态路由的方式在vue官网中有明确的说明它是这么说的:我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果定义和使用有以下几个步骤:在配置路由中的path字段后面加个’冒号’在你进行路由跳转的时
2021-11-07 21:09:21
52
原创 js中数组扁平化的几种方法
1. 数组字符串化 let arr = [[222, 333, 444], [55, 66, 77] ] arr += ''; // 222,333,444,55,66,77 arr = arr.split(',') console.log(arr) // ['222', '333', '444', '55', '66', '77']将数组转化为字符串使用split 将字符分割为数组形式2. 递归function reduceDimension(arr){let r
2021-11-06 22:49:42
495
原创 React基本使用(持续更新)
1. react是什么 ?react是用于构建用户界面的JavaScript库构建用户界面(User Interface,简单理解为: HTML页面)JavaScript库,不是框架,是库Vue是渐进式的JavaScript框架react全家桶是框架react:核心库react-dom: dom操作react-router: 路由reactx: 集中状态管理2. 创建react脚手架创建方式一全局安装脚手架工具包,命令: npm i
2021-11-05 22:59:17
1745
原创 js中ASCII编码的使用
大写字母A-Z对应的ASCII码值是65-90小写字母a-z对应的ASCII码值是97-122将ASCII码转换为对应的字母 let num = 65 let num2 = 66 String.fromCharCode(num) // A String.fromCharCode(num2) // B将字母转换为对应的ASCII码 let str = 'A' let str2 = 'S' str.charCodeAt() // 65 str2.char..
2021-11-01 15:31:40
5596
原创 vue解决分页组件删除和添加内容-页码出现错误
删除问题需求: 删除完当前页的内容,页码应该跳回前一页,显示前一页的内容解决:判断当前页中的数据是否只有一条了,当你决定点击删除按钮时,如果只剩一条了,则页码减法一,第二个 if 判断时,满足了页码减一的情况下,让页码不能小于一,这里不写,页码会一直减,出现比一小的情况,但是页码不可能小于一,没有0页码这回事if(xxx.length === 1){ // 页码减减 this.page-- if(this.page < 1){ this.page = 1 }}// 用新的
2021-10-31 22:25:28
465
原创 vue项目多语言国际化
自定义内容多语言配置依赖包: **npm i [email protected]**安装国际化的包在main.js中引入i18n,并添加到Vue实例中// 省略其他...import i18n from '@/lang'// 加入到根实例配置项中new Vue({ el: '#app', router, store, i18n, render: h => h(App)})前提准备好语言包,在component下面创建一个lang文件夹,并创建一个index.js
2021-10-30 23:00:54
190
原创 如果解决vue项目开发阶段和上线阶段的跨域问题
开发阶段跨域的解决方案使用反向代理前提:了解跨域问题的根本原因客户端请求数据的地址和服务器的地址不一样,受浏览器的同源策略影响(满足条件: 协议-域名-端口一致),无法得到服务器响应的数据,被浏览器的拦截...
2021-10-28 23:50:51
1543
1
原创 RBAC权限设计思想的理解以及使用
RBAC是什么?1、RBAC模型概述RBAC模型（Role-Based Access Control：基于角色的访问控制）模型是20世纪90年代研究出来的一种新模型，但其实在20世纪70年代的多用户计算时期，这种思想就已经被提出来，直到20世纪90年代中后期，RBAC才在研究团体中得到一些重视，并先后提出了许多类型的RBAC模型。其中以美国George Mason大学信息安全技术实验室（LIST）提出的RBAC96模型最具有代表，并得到了普遍的公认。RBAC认为权限授权的过程可以抽象地概括为：Who是
2021-10-27 22:21:13
907
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人