- 博客(42)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 封装request
第一种，不使用任何框架 import qs from "qs" import { getToken, refreshToken } from "@/utils/token.js" import apiUrl from "../config" import { message } from "antd" function alertSuccess(content) { message.success({ content, className: "custom-success-class" }) } f
2021-10-11 15:38:28
1401
原创 刷新token的操作
import api from "@/utils/request.js" import { message } from "antd" // 保存token export function saveToken(token) { // 服务器5分钟过期 本地存储为4.5分钟后过期 const expries = new Date().getTime() + 3 * 60 * 1000 const obj = { token, expries } window.sessionStorage.s
2021-10-11 15:35:06
1131
原创 qs中的方法和JSON.stringify
qs是npm的官方包，可以通过npm install qs进行安装 qs.stringify方法会把对象序列化成url的形式，以&进行连接 let obj = { name: 'enhui', age: 19, sex: 'female' }; let str = qs.stringify(obj); console.log(str)//name=enhui&age=19&sex=female qs.parse是将URL解析成对象的形式 let obj =.
2021-09-02 16:10:30
400
原创 项目描述 的模板
后台项目基础框架 技术使用 框架：React、 路由：react-router-dom （本项目是侧边导航、面包屑、route 公用一个配置文件写的） 状态管理：react-redux、redux-toolkit 样式：Emotion 构建工具：Vite 样式：Antd （还在 Vite 配置了 Antd 的主题库，有一些配置示例） 其他：ahooks（ React-Hook 库 ）、Less Antd 需要 等等 具体请查看 package.json 文件 环境 node
2021-08-31 14:40:01
402
原创 react-router
路由模式的设置 放在项目的最顶层 hash: HashRouter history: BrowserRouter ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ); Route 路由，匹配不同的url规则，根据不同的规则展示不同的视图 path：当前路由要匹配的规则 默认情况下，route是模糊匹配，url以当前开
2021-08-25 19:04:51
188
原创 函数式组件--React
函数式组件 函数式组件没有this，没有生命周期，所以不能使用string ref，在16.7之前没有state，所以函数式组件也叫纯渲染组件，或者无状态组件。 本质是一个常规函数，接收一个参数props，并返回一个reactNode。 注意事项：使用函数式组件，应该尽量避免在函数中声明子函数，否则，组件每次更新时都会重新创建这个函数 HOOK 语法：const [state, setState] = useState(initialState) 实则：const [状态,修改该状态的方法] = useSt
2021-08-17 18:47:50
521
原创 React第二课
React中key的取值原则 因为React会根据diff算法来判断是否需要更改，所以为了提高性能，key的取值原则可以为： key在列表中不能重复 更新前后要保持key值的不变 建议使用数据的id来作为key state改变的原则 state是一个不可变值，不可直接修改state，而是用该用setState映射出一个新的state，例如： this.setState({ data: [ ...data, { id: Date.now(),
2021-08-11 18:08:49
193
原创 react第一课
1。setState的一些想法 除了我们常见的写法外，setState的参数还可以是一个方法 `this.setState(()=>{ return { count: count + 1 } },()=>{ console.log("组件更新完毕调用"); })` setState，有时候是一个同步的方法，有时候是一个异步的方法 在触发了批量更新机制的时候
2021-07-25 22:50:45
207
2
原创 一些前端的小技巧
数组的对象结构 const str = "1997,kangkang,boy,23" const {1:name,2:sex,0:age} = str.split(',') console.log(name,sex,age) //kangkang boy 1997 注解：前面的数字为下标 最简单的清空或截取数组的方法是改变数组的长度 const arr = [1,2,3,4,5,6,7,8,9] arr.length = 5 console.log(arr)//[1,2,3,4,5] arr.lengt
2021-07-09 17:59:36
227
原创 React中使用antd不可选择的日期
今天之前不可选 disabledDateBarring = function (current) { return current && current < moment().subtract(1, "days") //当天之前的不可选，不包括当天 } 今天以及今天之前不可选 disabledDate = function (current) { return current && current < moment().endOf("day") //当天
2021-06-29 17:59:51
553
转载 防抖和节流
防抖 防抖就是多次触发该事件，只请求最后一次 debounce = function (fn, wait) { let timeout // 创建一个标记用来存放定时器的返回值 return function () { clearTimeout(timeout) // 每当用户输入的时候把前一个 setTimeout clear 掉 timeout = setTimeout( () => { // 然后又创建一个新的 setTimeout, 这样就能
2021-06-29 17:56:43
145
原创 关于使用antd中表格进行单元格合并
getRowSpan = (data, param) => { return data .reduce((result, item) => { //首先将dataTime字段作为新数组result取出 if (result.indexOf(item[param]) < 0) { result.push(item[param]) } return result }, []) .reduce((resu
2021-06-29 17:54:30
490
原创 在React项目中使用antd没有样式的解决办法
1、在最外层的文件新建一个scss文件 在文件中引用 @import '~antd/dist/antd.css'; 2、在最外层的index.js文件中引入 import 'antd/dist/antd.css'; 3、在package.json中的添加 "babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName
2021-06-28 10:59:36
1248
原创 禁止Eslint的校验
1、关闭当前段落的检验 /* eslint-disable */some code some code /* eslint-enable */ 2、关闭当前行的校验 some code // eslint-disable-line 3、关闭下一行的校验 // eslint-disable-next-line some code 4、创建.eslintignore，加入要忽略的文件 ...
2021-06-28 10:19:06
583
原创 面向对象以及面向过程
什么是面向对象程序设计(Object Oriented Programming – OOP) 面向对象，英文名字叫 Object Oriented，是一种编程方法。是和面向过程相对应的。 面向对象和面向过程 我们以吃饭这件事来看看什么是面向对象，什么是面向过程。 对于吃饭这件事来说我们通常有两个解决方案：点外卖和自己做。这俩方案中，点外卖就是面向对象，而自己做就是面向过程。具体对比如下: 在面向过程的吃饭中，我们想要填饱肚子，需要自己亲自下厨把这顿饭做出来，那么，我们就需要先想好吃什么，然后去买菜、洗菜、洗
2021-06-27 16:43:53
200
1
原创 搭建React项目遇到的问题与解决办法
1。在react项目中配置@路径 在新建完项目之后运行npm run ejet暴露出config文件 注意：必须是在本地文件没有改变的情况下运行npm run ejet，否则会报错，补救办法：git add . 然后git commit 在config/webpack.config.js文件的alias中插入代码'@': path.resolve('src') 再次运行项目即可 2。在git项目管理的时候git pull出现以下场景解决办法 git 在pull或者合并分支的时候有时会遇到这个界面。可以
2021-06-27 16:30:09
694
原创 React生命周期
组件的生命周期 所谓的生命周期就是指某个事物从开始到结束的各个阶段，当然在 React.js 中指的是组件从创建到销毁的过程，React.js 在这个过程中的不同阶段调用的函数，通过这些函数，我们可以更加精确的对组件进行控制，前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数 生命周期演变 生命周期，16.3 之前，16.3, 16.4 及之后 挂载阶段 （组件创建–>把组件创建的虚拟 DOM，生成真实 DOM，添加到我们的 DOM 树中） constructor st
2021-03-26 17:40:31
301
原创 React中的setState
setState： 修改组件状态，并对组件进行更新 setState(updater, [callback]) - updater: 更新数据 FUNCTION/OBJECT - callback: 更新成功后的回调 FUNCTION - 批量更新: 在同一个操作中，多次调用 setState ，正常情况下 React 会将这些 setState 中的更新进行合并，只执行一次更新 - 使用 setState 修改状态时，只要返回我们需要修改的状态，setState会进行浅合并 Object.assign()
2021-03-26 16:23:01
218
原创 React-1
命令式编程 和 声明式编程 告诉计算机怎么做（How） - 过程 告诉计算机我们要什么（What） - 结果 如何使用 React 基于浏览器的模式 React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件 React.createElement(type,props,children); ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染 ReactDOM.render(Vnode, container[, callback]) element：要
2021-03-26 14:21:29
127
原创 React中JSX的使用注意事项
1、什么是JSX 1、jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力。 2、Facebook公司给JSX的定位是JavaScript的扩展（直接决定了浏览器并不会像天然JavaScript一样地支持JSX，需要通过babel转译） 3、JSX会被babel编译为：React.createElement()，React.createElement()将返回一个叫作“ReactElement”的JS对象。 2、如何使用JSX let view = <
2021-03-26 13:58:48
208
原创 webpack
webpack 文章目录webpack1、webpack 是什么？2、安装3、使用4、打包模块4-1、入口文件4-2、打包命令5、打包配置6、核心配置6-1、mode6-2、entry6-3、output7、深入7-1、执行简要流程8、Loaders8-1、raw-loader8-2、file-loader8-3、url-loader8-4、css-loader8-5、style-loader 1、webpack 是什么？ 官⽅方⽹网站:https://webpack.js.org/ 中⽂文⽹网站:htt
2021-02-24 23:09:20
356
原创 异步专题，promise和async，await的区别，异步解决方案
今日语录 给自己的三句话：一、年轻，什么都还来得及；二、不要纠缠于小事；三、你现在遇到的事都是小事。 同步异步概念 同步和异步是一种消息通知机制 同步阻塞: A调用B，B处理获得结果，才返回给A。A在这个过程中，一直等待B的处理结果，没有拿到结果之前，需要A（调用者）一直等待和确认调用结果是否返回，拿到结果,然后继续往下执行。 做一件事，没有拿到结果之前，就一直在这等着，一直等到有结果了,再去做下边的事 异步非阻塞: A调用B，无需等待B的结果，B通过状态，通知等来通知A或回调函
2021-01-11 10:46:36
522
原创 字符串常用方法，字符串查找，字符串截取
今日语录 生活不能等待别人来安排。你想要什么样的生活只有你自己知道。自已去规划和设计，自己去争取和奋斗，自己去调整和改变，你才能一点一点距离理想生活越来越近。纵使不会事事如意，但你可以骄傲地说，我曾用尽全力，所以不会遗憾 言归正传 字符串查找类方法 1、string.charAt(index) index:字符串的索引值（下标）,如果说不填，默认为0 - 如果超出str.length,或者小于0，那么会返回一个空字符串 var str = "kaikeba"; console.log(str[1
2021-01-07 13:11:56
4467
原创 前端学习
廖雪峰的JavaScript官网：https://www.liaoxuefeng.com/wiki/1022910821149312 react官方文档:https://reactnative.cn/ mobx官方文档:https://cn.mobx.js.org/
2021-01-05 16:37:05
143
原创 react使用antd实现可输可选的功能
单选的可输可选 const options = [ { value: "容易", text: "容易" }, { value: "困难", text: "困难" }, { value: "顺利", text: "顺利" }, ] <AutoComplete allowClear options={options} style={{ width: "96%" }} value={bindData.pos
2021-01-04 14:19:06
594
原创 JS中关于数组的方法（改变/不改变原数组）
改变原数组的方法 pop():删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不 改变数组，并返回 undefined 值。arrayObject.pop() push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组，arrayObject.push(newelement1,newelement2,….,newelementX) 。 reverse()该方
2020-12-30 11:08:41
4303
原创 ES6中的类
ES6中的类 类的写法 class Person{ height="178cm"; constructor(name,age){ //属性 this.name = name; this.age = age; } //方法 getName(){ console.log("姓名是:"+this.name); } } let student = new Person("张三",20); student
2020-12-30 10:14:02
130
原创 面向对象（OOP：Object Oriented Programming）
面向对象编程思想 一、面相过程：注重解决问题的步骤，分析问题需要的每一步，实现函数依次调用； 二、面相对象：是一种程序设计思想。将数据和处理数据的程序封装到对象中； 三、面相对象特性： 抽象、 继承、封装、多态 优点：提高代码的复用性及可维护性； 对象 Javascript 是一种基于对象的语言，几乎所有东西都是对象； 1、对象创建方法： 字面量创建 new Object()创建 Object.create()创建：创建对象的原型； 工厂模式 一、工厂模式 工厂模式解决了代码复用的问题；
2020-12-27 21:26:37
298
原创 ECMAScript 6 基础
ECMAScript 6 简介 JavaScript 三大组成部分 ECMAScript DOM BOM ECMAScript 发展历史 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_Resources ECMAScript 包含内容：JS 中的数据类型及相关操作，流程控制，运算符及相关运算…… ECMAScript 6 let 和 const let 和 var 的差异 let 允许声明一个在作用域限制在
2020-12-27 21:15:27
168
原创 react中二维数组的赋值问题
前序 今天遇到了一个问题，在数组中push了很多数组，然后想给push进去的数组中对象赋值的时候，发现所有的值都变成了最后一个值，摸不着头脑，找不到原因为什么会这样，后来在同事的帮助先，终于解决了这个问题，现在赖记录一下过程以及解决方法。 arry: [ { group: "A组", hcgSchedules: [ { medicalRecordNum: "bbbbb",
2020-12-24 10:36:28
1186
1
原创 JSON.parse()的解析
JSON.parse()的含义 用于从一个字符串中解析出对象 注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。
2020-12-24 10:25:13
795
原创 JSON.stringify()方法的解析与认识
作用-序列化对象 俗话说的序列化对象，就是把对象类型转化为字符串类型，更准确的说是JSON类型 语法以及用法 JSON.stringify(value [, replacer] [, space]) value：是必须要的字段，可以为对象，数组，类。 replace：可以分为两种，一种为方法，一种为数组。 如果当第二个参数存在的时候，且两个参数都为数组的时候，则以第二个参数的key显示，以第一个参数的value显示，如若第二个参数的key，第一个参数中没有，则不显示。 如果第二个参数是方法的话，就是说把
2020-12-24 10:15:43
564
原创 乘性操作符
乘性操作符 1、乘法操作符 两侧为number类型，则进行相应的乘法运算 一侧为NAN，则结果为NAN 一侧为undefined，布尔类型，null，则进行隐式转换再进行相应的乘法 2、除法操作符 两侧为number类型，则进行相应的除法运算 一侧为NAN，则结果为NAN 一侧为undefined，布尔类型，null，则进行隐式转换再进行相应的除法 一个不为零的数除以零，结果为Infinity 0/0的结果为NAN 3、取模运算符 如果两侧为number，则进行相应的除法运算，结果返回余数。 任何
2020-12-23 09:41:12
213
原创 js中的加法运算符
加号 + 两侧有一个为字符串，则相加后的结果为字符串。 若两侧的数据类型都是number类型，则执行加法运算 若两侧有一侧为NAN，则相加的结果为NAN 若两侧中有一侧为undefined，null，布尔类型，则进行数字类型的隐式转换后相加，l例如number(null) = 0等 减号 - 若两侧有一侧为字符串，则会隐式转换成number类型，再与另一侧相减console.log('3'-1),打印结果为2 若一侧为NAN，则相减结果为NAN 若两侧中有一侧为undefined，null，布尔类型，
2020-12-22 09:42:37
875
原创 前端_盒子模型
什么是css盒模型 简单地说，就是用来装页面上的元素的矩形区域。盒模型保护标准盒模型和怪异盒模型。 box-sizing的取值 box-sizing:border-box; box-sizing:content-box; box-sizing:padding-box; 标准盒模型box-sizing:content-box content的值等于width的值 怪异盒模型box-sizing:...
2020-03-23 19:18:40
239
原创 前端_水平（左右）居中、垂直居中的方法
水平居中 块级元素水平居中的方法 1、margin：0 auto; 2、将块级元素转化为内联元素，然后给父级加text-align:center; 缺点：inline-block元素会有空白产生 解决方案：给其父元素添加font-size:0; 内联元素水平居中的方法 1、给元素的父级加text-align:center; 垂直居中大法 1、文字的垂直居中 1、设置文字的行高和文字所在的元素的高相...
2020-03-23 18:43:20
2021
原创 前端_BFC
怎样学习BFC 我们在学习一个新的东西执勤，可以从三步来进行学习，第一，是什么，有什么用，用在哪里，所以我们先来了解一下什么是BFC BFC的定义 首先BFC是一套渲染规则，直译为块级格式化上下文，是指元素里面的内容不会影响元素外面的内容，所有的元素都会按照文档流的方式进行排列。 BFC的作用 1、可以清除浮动（解决浮动元素父级高度塌陷的问题）。 2、阻止margin的叠加。 哪些情况下可以产生B...
2020-03-21 18:36:09
337
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人