- 博客(194)
- 收藏
- 关注
RSS订阅原创 详解cors跨域
我们要知道CORS是http协议的一部分，由浏览器和服务器来完成。所以对于前端来说还是比较简单的。我们要做的是理解这个协议和实现机制，在遇到类似问题的时候可以快速的定位。
2023-02-24 23:03:40
754
1
原创 js函数总结
转化为selectListimport {import {import {import {import {!item ,);return arr;转化为对象import {import {} });return {下载文件/*** 下载文件/*** 获取文件名称]+\\.[^\\.;]+);if(!return!判断请求类型import {import {import {import {
2023-02-08 11:21:02
284
原创 AntdPro上传文件之Antd各个版本的对比
文章目录一、antd3上传图片二、antd4上传文件三、使用antdPro之前一直在使用antd上传文件，图片，从antd3到antd4再到antdPro，总结一下经验吧一、antd3上传图片这里用的antd的版本是"antd": "^3.25.0",import React, { FC, forwardRef, useState, memo } from 'react';import { Button, Icon, Upload as AntdUpload, Spin } from 'antd'
2022-04-15 15:49:16
2361
2
原创 AntdPro之ProFormDependency
文章目录ProFormDependency（1）实现重复密码校验1. bootstrap实现密码校验2. antd ProComponents 实现密码2. 通过ProFormDependency控制表单项是否显示（2）ProFormDependency 的name值1. 为数组时最近一直在使用antdPro，发现ProFormDependency这个组件实现数据联动很好使用，于是记录一下：ProFormDependency详情：https://procomponents.ant.design/com
2022-04-15 11:43:46
3774
原创 React之npm发布Antd样式的组件
文章目录一、npm发包需要了解的知识（1）判断包名是否合法（2）npm初始化（3）devDependencies、dependencies和peerDependencies二、测试发包三、使用react组件进行npm发包一、npm发包需要了解的知识（1）判断包名是否合法（2）npm初始化（3）devDependencies、dependencies和peerDependencies二、测试发包三、使用react组件进行npm发包（1）搭建基本组件1. create-react-app直接创建组件即可2. 组
2022-02-11 18:33:56
1744
1
原创 Antd4之一个form表单如何实现两个提交按钮
文章目录一、基本form表单二、实现两个提交按钮1. useForm2. validateFields--触发表单验证3. antd3之前的写法一、基本form表单可以参考antd4的api，可以看到，form表单现在使用的是form 的onFini事件函数。如下所示const handleSubmit = useCallback( values => { console.log(values) //这里就可以拿到name1，name2，name3的数据 },
2022-01-27 17:09:37
3452
原创 Antd之实现form label文字左/右对齐
文章目录一、设置文字以冒号分割右对齐二、设置文字以冒号分割左对齐一、设置文字以冒号分割右对齐类似下面这种情况代码：const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 7 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 17 }, },};二、设置文字以冒号分割左对齐结构如下：代码：const formIt
2022-01-25 15:32:43
17296
3
原创 html之code标签和pre标签
文章目录一、两个标签区别（1）含义（2）显示区别，上面是pre，下面是code二、使用white-space 进行样式控制一、两个标签区别字符如下： const str = "[{'return_data': 'response', 'return_data_type': 'com.xiaoju.uemc.modules.support.common.Response'}]";（1）含义均来自w3cpre：可以保留您需要的文本格式，比如不会取消换行和空格，并且所示文本是等宽的cod
2022-01-24 17:58:20
3390
原创 React之实现Excel文件导出
文章目录一、json数据导出Excel（1）react-csv插件（2）使用方法二、通过文件流形式导出（1）文件流导出形式和方法介绍1. 文件流导出两种方式2. 文件流形式（2）利用浏览器直接下载（3）创建a标签下载一、json数据导出Excel（1）react-csv插件需要用到下面这个插件：https://www.npmjs.com/package/react-csv（2）使用方法import { CSVDownload } from 'react-csv';//将要导出的数据存在stat
2022-01-24 15:25:06
6113
原创 React之react-router 6 的使用方法
文章目录一、创建route组件二、路由组件（1）基础路由组件（2）页面组件三、在app中引入四、页面中进行跳转一、创建route组件import React, { FC } from 'react';import { Route as RRoute, RouteProps as RRouteProps } from 'react-router-dom';export type RouteProps = { children: RRouteProps['element'];} & RR
2021-12-09 16:08:08
1480
原创 Antd之使用React hooks设置表头字段可筛选
文章目录一、通过popover实现下拉菜单组件（1）基本前端样式（2）实现多选（3）设置全选和半选（4）源代码1. 组件代码2. scss代码如下：3. 转化columns的函数4. 最终实现结果二、页面组件基本使用三、hooks处理table columns数据（1）hooks封装（2）hooks 的使用下面是antd 提供的表头筛选网站https://preview.pro.ant.design/list/table-list?navTheme=light&primaryColor=%231
2021-12-09 15:27:02
1436
原创 React之通过hooks实现模糊查询
文章目录一、单个模糊匹配二、多个模糊匹配（1）封装hooks（2）页面调用一、单个模糊匹配对于单个模糊匹配，代码如下：const [list, setList] = useState([]); //最后显示的option数据import { map,debounce } from 'lodash-es'; const requestList = useCallback(async params => { try { //接口调取函数 const { data } = a
2021-11-30 17:16:07
2501
1
原创 Antd4之动态增删表单
文章目录一、Antd3二、Antd41. 首先声明form，并且挂载在form元素上2. 根据a值控制b筛选条件是否显示一、Antd3在antd3中可以使用getFieldDecorator去控制表单的显示和隐藏import { Form, Select } from 'antd';const { getFieldDecorator, setFieldsValue } = form; {getFieldDecorator('bizCode')&&(<p>xxxx<
2021-11-30 17:00:03
1577
原创 Antd4之form表单数据回显
文章目录一、函数中设置数据回显，使用useForm（1）使用useForm（2）在form表单中定义form二、不使用useFormantd4摒弃了antd3的getFieldDecorator，initialValue一、函数中设置数据回显，使用useForm操作如下：https://blog.csdn.net/Welkin_qing/article/details/110004969（1）使用useForm使用form可以使用antd的setFieldsValueconst [form] =
2021-09-17 17:33:33
5509
原创 node之手写脚手架
文章目录一、初始化cli工具（1）创建文件（2）执行文件二、动态获取版本号（1）创建（2）使用三、自定义配置命令（1）配置reflect（2）配置命令行数组（3）配置help命令四、配置create命令（1）配置路径（2）创建create文件（3）通过axios拉取github上的模板信息1. 安装axios2. 获取github上的模板信息3. 设置loading加载样式a. 安装b. 函数如下c. 调用如下4. 设置终端选择功能a. 安装c. 函数如下5. 获取github模板上的版本信息a. 获取ve
2021-09-07 18:20:39
631
原创 nvm mac os安装之安装之后443报错或command not found
文章目录一、安装nvm1. 安装命令2. 常见问题本文针对mac os一、安装nvmnvm gitgub: https://github.com/nvm-sh/nvm1. 安装命令curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bashorwget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | b
2021-09-02 17:39:55
461
原创 React之Form表单封装
文章目录一、form表单封装之树形选择框封装1. 代码结构（1）html代码（2）树形选择框的结构（3）css（4）转化函数2. 使用方法（1）单独使用（2）和form表单一起使用二、form表单之时间范围选择器封装1. 代码（1）html代码2. 使用方法（1）单独使用（2）在form表单中使用三、form表单封装1. 代码（1）html（2）数据结构（3）css2. 使用方法（1）导入该组件（2）表单提交方法a. 使用了时间选择框b. 没有使用时间选择框（3）formData数据(4)其他前提说一下，
2021-09-02 15:43:02
2449
2
原创 React之Antd RangePicker实现时间范围选择，禁止选择今天之后的时间，并且只能选择一个月以内的时间
文章目录一、HTML代码（1）timeJudge（2）onOpenChange（3）onCalendarChange（4）disabledDate二、调用（1）将拿到的数据放在url里便于数据存储（2）定义search一、HTML代码 <Form.Item label={'选取时间范围'}> {getFieldDecorator('timeRange', { initialValue: [timeJudge(search.from as st
2021-09-01 19:50:32
6872
1
原创 React之react-hook-form使用
文章目录一、react-hook-form介绍（1）安装（2）使用一、react-hook-form介绍React Hook Form是一个高性能、灵活、易拓展、易于使用的表单校验库，用于React Web＆Native的表单验证。（1）安装npm i react-hook-formoryarn add react-hook-form（2）使用from标签使用import React from 'react';import { useForm } from 'react-hook-
2021-08-06 14:53:09
6106
原创 Git之git pull【warning】Pulling without specifying how to reconcile divergent branches is
文章目录一、报错信息分析二、命令介绍（1） git config（2）`git pull` warning解析1. `pull.ff`2. pull.rebase（3）only、true、false1. only2. true or false三、报警分析三、 解决方法一、报错信息分析warning: Pulling without specifying how to reconcile divergent branches is discouraged. You can squelch this me
2021-07-28 19:53:29
1851
2
原创 GIt之相关概念和基本操作理解
文章目录一、git基本概念（1）基本概念入手（2）git命令解析1. `git add`2. `git commit`3. `git reset HEAD`4. `git rm --cached `5. `git checkout ./ git checkout --`6. `git checkout HEAD / git checkout HEAD `二、git基本操作（1）`git pull`（2）`git fetch`一、git基本概念（1）基本概念入手git的基本操作就不介绍了，直接基本概念入
2021-07-28 16:09:21
187
2
原创 React之Antd-mobile使用方式及配置自定义主题颜色
文章目录一、使用Antd-mobile（1）下载antd-mobile（2）使用二、修改配置颜色（1）安装包（2）修改package.json（3）根目录新建config-overrides.js法一：直接在modifyVars修改法二：根目录下新建antd-theme.json文件注意：一、使用Antd-mobile（1）下载antd-mobile$ npm install antd-mobile --save（2）使用找到react 项目下的public文件夹下的index.html文件修
2021-05-25 18:12:06
2850
原创 详谈事件循环
文章目录一、js事件循环（1）执行栈【先进后出】（2）消息队列【先进先出】（3）宏观任务和微观任务1. js引擎运行机制2. 变相理解本文将详细介绍事件循环，首先声明事件循环分为浏览器下js引擎的事件循环和node事件循环（P.S. 事件循环简直是一个老生常谈的问题了，我最近在看node，发现之前写的博客中讲的不够清晰，现在再次做一次总结和完善）附上我之前的文章链接，有兴趣的可以看下：https://blog.csdn.net/Welkin_qing/article/details/88956200
2021-05-11 17:49:36
619
原创 React之使用React-viewer实现大图预览
文章目录一、插件介绍二、代码封装（1）子组件封装（2）父组件调用三、react-viewer插件api一、插件介绍该插件是根据viewJs封装的react可以使用：github: https://github.com/infeng/react-viewernpm: https://www.npmjs.com/package/react-viewer在线演示：https://infeng.github.io/react-viewer/viewJs：github: https://githu
2021-04-23 16:40:49
6705
9
原创 webpack4基本知识总结
文章目录一、webpack基本结构（1）webpack是什么（2） 5个核心概念1. entry指定入口值a. stringb. 数组c. 对象d. 特殊类型2. output3. loader4. plugins5. mode二、webpack基本配置（1）基本配置（2）基本概念一、webpack基本结构（1）webpack是什么前端资源构建工具，静态模块打包器(module bundler)对于webpack而言，前端的所有资源文件(js/json/css/img/less/…)都会作为模块处
2021-04-14 17:45:41
200
原创 React之实现前端分页
文章目录本文提供两种分页思路- 纯 js 分页- 使用lodash-es实现分页一、纯js分页（1）html（2）js代码1. list请求函数2. 分页组件函数3. 分页函数二、lodash实现分页（1）html代码（2）js代码1. 请求函数2. 分页组件函数3. 通过useMemo监听分页本文提供两种分页思路- 纯 js 分页- 使用lodash-es实现分页一、纯js分页（1）html<div className={styles['fre-div']}> <Ro
2021-03-18 17:52:29
3502
原创 React之image图片格式互相转化
文章目录一、函数（1）图片绝对路径转文件流File1. 主函数2. 获取图片base643. base64转file二、页面结构（最终图片以file格式提交给后端）即formdata（1）html页面结构显示1. 主页面2. 子页面（2） 判断浏览器是否自带复原函数（3）图片旋转函数三、页面使用（1）不涉及图片回显（2）涉及图片回显（回显格式为路径）四、后端接口（1）后端上传接口（2）axios封装http一、函数（1）图片绝对路径转文件流File路径就是类似下面这种"/pic/userpic/4
2021-03-04 18:04:45
2819
2
原创 React之批量上传图片
文章目录本文将介绍两种方式进行批量上传图片（原始input/antdUpload）两种方式的区别1. 原始input是将图片存为一个对象数组，将不合格的图片过滤掉之后，一次性提交给后端2. antd-Upload是循环调用后端接口（上传一张的接口）上传图片，遇到不合格的可以跳过一、原始input（1）页面使用input HTML1. 编辑页面元素2. 设置ref（2）编写onChange函数1. 定义formData2. 编写onChange函数3. 上传图片时4. 图片格式校验函数（3）后端接口1. 封装
2021-02-22 20:47:36
3137
原创 antd之使用checkbox报错：Warning: [antd: Checkbox] `value` is not validate prop, do you mean `checked`?
文章目录一、checkbox使用方法：二、解决办法一、checkbox使用方法：<Item label={'信息勾选'}> {getFieldDecorator('xxx')(<Checkbox onChange={handleDeptChange}>xxx</Checkbox>)}</Item>使用之后就会出现如下报错：二、解决办法使用valuePropName来声明：<Item label={'信息勾选'}> {get
2021-01-28 18:12:56
4851
原创 Antd之如何设置组件为中文
文章目录一、antd组件引用默认为英文二、设置为中文1. 引入ConfigProvider，zh_CN2. 对需要设置为中文的组件进行包裹一、antd组件引用默认为英文比如说我这边引用了一个range 时间选择器，显示结果如下所示：二、设置为中文1. 引入ConfigProvider，zh_CNimport { ConfigProvider } from 'antd';import zh_CN from 'antd/lib/locale-provider/zh_CN';import 'mom
2021-01-22 10:34:29
6030
原创 css之实现图片自适应
文章目录一、position实现图片自适应二、padding补偿法三、图片以正方形显示原图如下：在开发中，想在固定的高度和宽度中显示不一样的图片时，就会出现压缩，导致图片最后显示不好看，以下提供几种方法进行调整：一、position实现图片自适应<div class="father1"> <img src="../../Desktop/picture/3fl7g412z71hvsv6o5tk0ngaw.jpg" alt=""> </div>css
2021-01-13 16:53:29
3506
原创 React之Echarts实现渐变和缩放
文章目录一、渐变（1）封装渐变函数（2）代码中直接调用渐变函数二、横坐标缩放（1）如何设置（2）设置带样式的缩放条（3）设置缩放条和横坐标的距离一、渐变我这里是以折线图为例子渐变还是很简单的在series中，指定areaStyle中使用渐变函数就可以了（1）封装渐变函数以下是我封装的渐变函数import echarts from 'echarts';const getLinearColor = (color1: string, color2: string): any => {
2021-01-07 11:21:49
725
原创 React之Echarts出现Animator.js:64 Uncaught TypeError: Cannot set property ‘0‘ of undefined报错
文章目录一、出现的情况二、解决办法（1）理解该函数（2）解决办法1. 修改此函数法一法二2. 使用echarts 5.0以上版本一、出现的情况出现这种情况，通常实在出现zoom缩放，类似于下边我下篇文章介绍如何实现横坐标缩放鼠标可以控制缩放条的大小，在缩到一定程度时，或者出现横坐标重叠，控制台会出现如下错误或者有网友说到的另一种：Uncaught TypeError: Cannot set property '0' of undefined at Vt (echarts.min.js
2021-01-07 10:55:03
3124
8
原创 详解MVC和MVVM
文章目录响应式网页设计MVC1. MVC介绍2. MVC结构（1）Model（2）View（3）ControllerMVVM1. MVVM结构MVC存在的问题1. 项目庞大，数据流动混乱2. Model可以改变另一个Model的值3.业务逻辑复杂导致定位困难4. 解决方案响应式网页设计响应式网页设计(Responsive Web design)1简称 RWD，是一种网页设计的技术做法，该设计可使网站在多种浏览 设备(从台式机显示器到移动电话或其他移动产品设备)上获得体验类似的阅读与导航功能，同 时减少用
2020-12-01 16:54:21
448
原创 React之antd Form回显数据
文章目录一、antd4如何回显数据1. 定义变量2. 保存接口数据到form变量中3. form显示数据一、antd4如何回显数据1. 定义变量const [form] = Form.useForm()2. 保存接口数据到form变量中const requestProfileList = useCallback(async () => { try { const { result } = await fetchProfileListRequest() for
2020-11-23 19:08:02
8131
2
原创 React之项目中使用绝对路径
文章目录一、问题详情二、解决办法一、问题详情在开发React项目时，需要引入一些文件会很麻烦，比如前面会有一大堆....import PageTitle from '../../../components/pageTitle/pageTitle'二、解决办法根目录创建tsconfig.json文件，与src文件平级写入以下内容{ "compilerOptions":{ "baseUrl":"src" }, "include":["src"]}
2020-11-20 14:28:44
1155
原创 React之使用antdForm表单
文章目录一、问题介绍二、如何去掉`*`号一、问题介绍在使用from表单时，当我们设置他的规则relus时，会发现，表单的label左边会出现一个*号代码如下：import React, { FC, useCallback } from 'react'import { Form, Input, Checkbox, Button } from 'antd'import styles from './login.module.scss'interface Props {}const Login:
2020-11-19 15:06:34
1925
原创 React之解决使用antd后样式没有显示
文章目录一、问题详情二、解决办法一、问题详情今天重构一个项目时，发现，下载了antd的包但是antd的样式没有用上在render函数中输出一个样式const Login: FC<Props> = (): JSX.Element => { const handleOnFinish = useCallback((value: any) => { console.log(value) }, []) return ( <div className={
2020-11-19 14:27:35
5486
原创 React之上传图片并裁剪(Img-Crop&&react-cropper)
文章目录一、图片裁剪插件介绍ImgCrop1. 使用ImgCrop2. 上传函数3. 获取图片base64注意：二、react-cropperreact-cropper使用1. 组件内使用2. 裁剪框对图片进行裁剪（1） 组件中设置上传裁剪框（2） 设置state变量（3） 图片上传时更改state3. 设置裁剪框CutModal（1）裁剪框接收的props（2）裁剪框组件（3）裁剪框用到的state变量（4）原图展示函数（5）图片裁剪函数4. 父组件获取裁剪后的照片(1) 父组件调用函数（2）裁剪展示函数
2020-11-11 11:42:07
4440
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人