- 博客(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
1281
原创 刷新token的操作
import api from "@/utils/request.js"import { message } from "antd"// 保存tokenexport 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
940
原创 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=femaleqs.parse是将URL解析成对象的形式let obj =.
2021-09-02 16:10:30
285
原创 项目描述 的模板
后台项目基础框架技术使用框架：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
306
原创 react-router
路由模式的设置放在项目的最顶层hash: HashRouterhistory: BrowserRouterReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root'));Route路由，匹配不同的url规则，根据不同的规则展示不同的视图path：当前路由要匹配的规则默认情况下，route是模糊匹配，url以当前开
2021-08-25 19:04:51
86
原创 函数式组件--React
函数式组件函数式组件没有this，没有生命周期，所以不能使用string ref，在16.7之前没有state，所以函数式组件也叫纯渲染组件，或者无状态组件。本质是一个常规函数，接收一个参数props，并返回一个reactNode。注意事项：使用函数式组件，应该尽量避免在函数中声明子函数，否则，组件每次更新时都会重新创建这个函数HOOK语法：const [state, setState] = useState(initialState)实则：const [状态,修改该状态的方法] = useSt
2021-08-17 18:47:50
407
原创 React第二课
React中key的取值原则因为React会根据diff算法来判断是否需要更改，所以为了提高性能，key的取值原则可以为：key在列表中不能重复更新前后要保持key值的不变建议使用数据的id来作为keystate改变的原则state是一个不可变值，不可直接修改state，而是用该用setState映射出一个新的state，例如：this.setState({ data: [ ...data, { id: Date.now(),
2021-08-11 18:08:49
91
原创 react第一课
1。setState的一些想法除了我们常见的写法外，setState的参数还可以是一个方法`this.setState(()=>{ return { count: count + 1 } },()=>{ console.log("组件更新完毕调用"); })`setState，有时候是一个同步的方法，有时候是一个异步的方法在触发了批量更新机制的时候
2021-07-25 22:50:45
101
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 = 5console.log(arr)//[1,2,3,4,5]arr.lengt
2021-07-09 17:59:36
114
原创 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
427
转载 防抖和节流
防抖防抖就是多次触发该事件，只请求最后一次debounce = function (fn, wait) { let timeout // 创建一个标记用来存放定时器的返回值 return function () { clearTimeout(timeout) // 每当用户输入的时候把前一个 setTimeout clear 掉 timeout = setTimeout( () => { // 然后又创建一个新的 setTimeout, 这样就能
2021-06-29 17:56:43
79
原创 关于使用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
401
原创 在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
1131
原创 禁止Eslint的校验
1、关闭当前段落的检验/* eslint-disable */some codesome code/* eslint-enable */2、关闭当前行的校验some code // eslint-disable-line3、关闭下一行的校验// eslint-disable-next-linesome code4、创建.eslintignore，加入要忽略的文件...
2021-06-28 10:19:06
491
原创 面向对象以及面向过程
什么是面向对象程序设计(Object Oriented Programming – OOP)面向对象，英文名字叫 Object Oriented，是一种编程方法。是和面向过程相对应的。面向对象和面向过程我们以吃饭这件事来看看什么是面向对象，什么是面向过程。对于吃饭这件事来说我们通常有两个解决方案：点外卖和自己做。这俩方案中，点外卖就是面向对象，而自己做就是面向过程。具体对比如下:在面向过程的吃饭中，我们想要填饱肚子，需要自己亲自下厨把这顿饭做出来，那么，我们就需要先想好吃什么，然后去买菜、洗菜、洗
2021-06-27 16:43:53
117
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
590
原创 React生命周期
组件的生命周期所谓的生命周期就是指某个事物从开始到结束的各个阶段，当然在 React.js 中指的是组件从创建到销毁的过程，React.js 在这个过程中的不同阶段调用的函数，通过这些函数，我们可以更加精确的对组件进行控制，前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数生命周期演变生命周期，16.3 之前，16.3, 16.4 及之后挂载阶段 （组件创建–>把组件创建的虚拟 DOM，生成真实 DOM，添加到我们的 DOM 树中）constructorst
2021-03-26 17:40:31
202
原创 React中的setState
setState：修改组件状态，并对组件进行更新setState(updater, [callback])- updater: 更新数据 FUNCTION/OBJECT- callback: 更新成功后的回调 FUNCTION- 批量更新: 在同一个操作中，多次调用 setState ，正常情况下 React 会将这些 setState 中的更新进行合并，只执行一次更新- 使用 setState 修改状态时，只要返回我们需要修改的状态，setState会进行浅合并 Object.assign()
2021-03-26 16:23:01
143
原创 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
58
原创 React中JSX的使用注意事项
1、什么是JSX1、jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力。2、Facebook公司给JSX的定位是JavaScript的扩展（直接决定了浏览器并不会像天然JavaScript一样地支持JSX，需要通过babel转译）3、JSX会被babel编译为：React.createElement()，React.createElement()将返回一个叫作“ReactElement”的JS对象。2、如何使用JSXlet view = <
2021-03-26 13:58:48
135
原创 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-loader1、webpack 是什么？官⽅方⽹网站:https://webpack.js.org/中⽂文⽹网站:htt
2021-02-24 23:09:20
136
原创 异步专题，promise和async，await的区别，异步解决方案
今日语录给自己的三句话：一、年轻，什么都还来得及；二、不要纠缠于小事；三、你现在遇到的事都是小事。同步异步概念同步和异步是一种消息通知机制同步阻塞: A调用B，B处理获得结果，才返回给A。A在这个过程中，一直等待B的处理结果，没有拿到结果之前，需要A（调用者）一直等待和确认调用结果是否返回，拿到结果,然后继续往下执行。 做一件事，没有拿到结果之前，就一直在这等着，一直等到有结果了,再去做下边的事异步非阻塞: A调用B，无需等待B的结果，B通过状态，通知等来通知A或回调函
2021-01-11 10:46:36
413
原创 字符串常用方法，字符串查找，字符串截取
今日语录生活不能等待别人来安排。你想要什么样的生活只有你自己知道。自已去规划和设计，自己去争取和奋斗，自己去调整和改变，你才能一点一点距离理想生活越来越近。纵使不会事事如意，但你可以骄傲地说，我曾用尽全力，所以不会遗憾言归正传字符串查找类方法1、string.charAt(index)index:字符串的索引值（下标）,如果说不填，默认为0- 如果超出str.length,或者小于0，那么会返回一个空字符串var str = "kaikeba"; console.log(str[1
2021-01-07 13:11:56
4249
原创 前端学习
廖雪峰的JavaScript官网：https://www.liaoxuefeng.com/wiki/1022910821149312react官方文档:https://reactnative.cn/mobx官方文档:https://cn.mobx.js.org/
2021-01-05 16:37:05
84
原创 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
463
原创 JS中关于数组的方法（改变/不改变原数组）
改变原数组的方法pop():删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不 改变数组，并返回 undefined 值。arrayObject.pop()push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组，arrayObject.push(newelement1,newelement2,….,newelementX) 。reverse()该方
2020-12-30 11:08:41
4145
原创 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
73
原创 面向对象（OOP：Object Oriented Programming）
面向对象编程思想一、面相过程：注重解决问题的步骤，分析问题需要的每一步，实现函数依次调用；二、面相对象：是一种程序设计思想。将数据和处理数据的程序封装到对象中；三、面相对象特性： 抽象、 继承、封装、多态优点：提高代码的复用性及可维护性；对象Javascript 是一种基于对象的语言，几乎所有东西都是对象；1、对象创建方法：字面量创建new Object()创建Object.create()创建：创建对象的原型；工厂模式一、工厂模式工厂模式解决了代码复用的问题；
2020-12-27 21:26:37
196
原创 ECMAScript 6 基础
ECMAScript 6 简介JavaScript 三大组成部分ECMAScriptDOMBOMECMAScript 发展历史 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_ResourcesECMAScript 包含内容：JS 中的数据类型及相关操作，流程控制，运算符及相关运算……ECMAScript 6let 和 constlet 和 var 的差异let 允许声明一个在作用域限制在
2020-12-27 21:15:27
106
原创 react中二维数组的赋值问题
前序今天遇到了一个问题，在数组中push了很多数组，然后想给push进去的数组中对象赋值的时候，发现所有的值都变成了最后一个值，摸不着头脑，找不到原因为什么会这样，后来在同事的帮助先，终于解决了这个问题，现在赖记录一下过程以及解决方法。 arry: [ { group: "A组", hcgSchedules: [ { medicalRecordNum: "bbbbb",
2020-12-24 10:36:28
1019
1
原创 JSON.parse()的解析
JSON.parse()的含义用于从一个字符串中解析出对象注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。
2020-12-24 10:25:13
729
原创 JSON.stringify()方法的解析与认识
作用-序列化对象俗话说的序列化对象，就是把对象类型转化为字符串类型，更准确的说是JSON类型语法以及用法JSON.stringify(value [, replacer] [, space])value：是必须要的字段，可以为对象，数组，类。replace：可以分为两种，一种为方法，一种为数组。如果当第二个参数存在的时候，且两个参数都为数组的时候，则以第二个参数的key显示，以第一个参数的value显示，如若第二个参数的key，第一个参数中没有，则不显示。如果第二个参数是方法的话，就是说把
2020-12-24 10:15:43
407
原创 乘性操作符
乘性操作符1、乘法操作符两侧为number类型，则进行相应的乘法运算一侧为NAN，则结果为NAN一侧为undefined，布尔类型，null，则进行隐式转换再进行相应的乘法2、除法操作符两侧为number类型，则进行相应的除法运算一侧为NAN，则结果为NAN一侧为undefined，布尔类型，null，则进行隐式转换再进行相应的除法一个不为零的数除以零，结果为Infinity0/0的结果为NAN3、取模运算符如果两侧为number，则进行相应的除法运算，结果返回余数。任何
2020-12-23 09:41:12
113
原创 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
785
原创 前端_盒子模型
什么是css盒模型简单地说，就是用来装页面上的元素的矩形区域。盒模型保护标准盒模型和怪异盒模型。box-sizing的取值box-sizing:border-box;box-sizing:content-box;box-sizing:padding-box;标准盒模型box-sizing:content-boxcontent的值等于width的值怪异盒模型box-sizing:...
2020-03-23 19:18:40
152
原创 前端_水平（左右）居中、垂直居中的方法
水平居中块级元素水平居中的方法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
1822
原创 前端_BFC
怎样学习BFC我们在学习一个新的东西执勤，可以从三步来进行学习，第一，是什么，有什么用，用在哪里，所以我们先来了解一下什么是BFCBFC的定义首先BFC是一套渲染规则，直译为块级格式化上下文，是指元素里面的内容不会影响元素外面的内容，所有的元素都会按照文档流的方式进行排列。BFC的作用1、可以清除浮动（解决浮动元素父级高度塌陷的问题）。2、阻止margin的叠加。哪些情况下可以产生B...
2020-03-21 18:36:09
253
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人