![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 61
留着鼻涕敲代码
~(@^_^@)~
展开
-
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 · 486 阅读 · 0 评论 -
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 · 1122 阅读 · 0 评论 -
手写图片懒加载-------IntersectionObserver------JavaScript和React
实现思路:利用浏览器提供的 IntersectionObserver,监听图片元素是否进入可视区域,进入后才真正去设置图片元素的 src 属性进行图片加载。1. IntersectionObserver的基本使用详细请看阮一峰IntersectionObserver API 使用教程作用:监听图片元素是否进入可视区域,进入后才真正去设置图片元素的 src 属性进行图片加载。格式:var dom = dom元素// 实例化一个观察者// 它的参数1是一个回调:当被观察的目标进入视口/离开视原创 2021-12-10 21:50:11 · 465 阅读 · 0 评论 -
websocket 建立聊天接口
1、 websocket简介WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。典型的websocket应用场景:即时通讯…客服聊天室 广播点餐2、socket技术客户端:发socket请求可以用原生的可以使用包 socket.io服务器端: 提供socket服务socket.io3. 代原创 2021-12-06 15:59:15 · 1082 阅读 · 0 评论 -
React 登录过期-无感知刷新-401问题-整体说明
1、401的错误场景有如下两种情况会出现401错误:未登陆用户做一些需要权限才能做的操作(例如:关注作者),代码会报出401错误。这种情况下,应该让用户回到登陆页。登录用户的token过期了2、refresh_token和token的作用当用户登陆成功之后,后端返回的token中有两个值,说明如下:(不是一定,有一些就可能只返回一个)token:作用:在访问一些接口时,需要传入token,就是它。有效期:2小时(安全)。refresh_token作用: 当to原创 2021-12-06 11:16:41 · 2448 阅读 · 1 评论 -
封装鉴权路由组件封装
作用与目标react中没有路由守卫,但是类似的功能有现成的。参考:https://v5.reactrouter.com/web/example/auth-workflow能够封装鉴权路由组件实现登录访问控制功能判断用户是否登录路由进入主页未登录返回登录页1.定义组件1、分析组件需求需要传入跳转组件要跳转的路径2、 定义私有路由组件。在 components 目录中创建 PrivateRoute路由组件:实现路由的登录访问控制逻辑有token,正常访问没有to原创 2021-12-05 12:25:24 · 556 阅读 · 0 评论 -
redux初始化
redux 初识化的步骤几乎相同!!几乎都是复制重用1.安装 redux 相关的包:redux : 集中式储存状态,主要包react-redux: 是Redux提出的React绑定库redux-thunk: 中间件-可以再里面进行函数操作注意redux-thunk我这里下载的是2.3.0的版本,最新版有BUG使用TS的时候在redux-thunk@2.4.0新版中,使用dispatch的时候,会丢失提示redux-devtools-extensio:调试工具,需要搭配Redux DevT原创 2021-12-01 20:37:10 · 654 阅读 · 0 评论 -
项目准备-配置路径别名(配置@指向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 · 1471 阅读 · 0 评论 -
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 · 1176 阅读 · 0 评论 -
recat打包优化
极客园PC项目【项目打包和优化】项目打包和优化-项目打包目标:能够通过命令对项目进行打包步骤:在项目根目录打开终端,输入打包命令:npm run build等待打包完成,打包后的内容被放在项目根下的 build 文件夹中项目打包和优化-项目本地预览目标:能够在本地预览打包后的项目步骤:全局安装本地服务包:npm i -g serve,该包提供了 serve 命令,用来启动本地服务在项目根目录中执行命令:serve -s ./build,在 build 目录中开启服务器在浏览器中访原创 2021-11-23 18:10:33 · 198 阅读 · 0 评论 -
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 · 1763 阅读 · 0 评论 -
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 · 639 阅读 · 1 评论 -
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 · 1050 阅读 · 0 评论 -
使用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 · 1230 阅读 · 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 · 490 阅读 · 0 评论