正文

antdesign——message防抖优化——富文本的使用——富文本数据的收集——上传图片保存本地(代码片段)

勇敢*牛牛  勇敢*牛牛  2022-12-02  274

关键词：

button按钮有个loading加载态度。加载状态为true则不可点击。
通过这个属性来完成项目中的防抖优化

const [seachBtn,setSeachBtn] = useState(false)
message.error("用户名不能为空",2,()=>
    setSeachBtn(false)
);
<Button loading=seachBtn type="primary" onClick=showDrawer>查询</Button></div>

react——富文本的使用

网址：https://www.wangeditor.com/v5/for-frame.html#demo-2

下载：安装

yarn add @wangeditor/editor @wangeditor/editor-for-react

基本使用

import React,  useState, useEffect  from 'react'
import  Editor, Toolbar  from '@wangeditor/editor-for-react'


const Details = () => 
    // editor 实例
    const [editor, setEditor] = useState(null)
    // 编辑器内容
    const [html, setHtml] = useState('')
    // 工具栏配置
    const toolbarConfig =     
    // 编辑器配置
    const editorConfig =               
        placeholder: '请输入内容...',
        MENU_CONF://上传图片时设置一个空对象
    
    editorConfig.MENU_CONF['uploadImage'] = 
        // 上传图片的配置
        server: 'http://10.9.46.247:8000/fdphoto',
   
    // 及时销毁 editor ，重要！
    useEffect(() => 
        return () => 
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        
    , [editor])
    return (
        <>
                 <div style= border: '1px solid #ccc', zIndex: 100>
                <Toolbar
                    editor=editor
                    defaultConfig=toolbarConfig
                    mode="default"
                    style= borderBottom: '1px solid #ccc' 
                />
                <Editor
                    defaultConfig=editorConfig
                    value=html
                    onCreated=setEditor
                    onChange=editor => setHtml(editor.getHtml())
                    mode="default"
                    style= height: '500px', overflowY: 'hidden' 
                />
            </div>
            <div style= marginTop: '15px' >
                html
            </div>
            <Button>点击我获取富文本信息数据收集通过状态提升即可</Button>
        </>
    );


export default Details;

富文本上传图片：接口地址返回类型

负载的文件名称为：wangeditor-uploaded-image

必须规定富文本信息的返回接口：即可

接口自测：

利用nodejs完成：服务器代码

var express = require("express");
var app = express();
app.listen(8000)
// http://localhost:3000
// http://10.9.46.247:3000/
app.use(require("cors")());
app.use(express.json());
app.use(express.static('./public'))


const multer = require('multer')
const storage = multer.diskStorage(
    destination: function (req, file, cb) 
        cb(null, 'public/img/')
    ,
    filename: function (req, file, cb) 
        var singfileArray = file.originalname.split('.');
        var fileExtension = singfileArray[singfileArray.length - 1];

        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
        cb(null, file.fieldname + '-' + uniqueSuffix+"." + fileExtension);
        // console.log(file);
    
)
const upload = multer(
    storage
)
/* 上传图片 */
app.post('/fdphoto', upload.single('wangeditor-uploaded-image'), (req, res) => 
    res.send(
        path: 'http://10.9.46.247:8000/img/' + req.file.filename,
        errno:0,
        data:[
            url:'http://10.9.46.247:8000/img/' + req.file.filename,
            alt: req.file.filename,
            href:'http://10.9.46.247:8000/img/' + req.file.filename
        ]
    )
)

网页性能优化03-函数防抖(代码片段)

1.1-函数防抖1.函数防抖介绍1.什么是函数防抖？（debounce）网上主流解释：函数防抖，就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。参考博客... 查看详情

性能优化——防抖和节流(代码片段)

性能优化——防抖和节流前言在连续触发的事件中，事件处理函数的频繁调用会加重浏览器或服务器的性能负担导致用户体验糟糕，有哪些连续触发的事件呢?比如，浏览器滚动条的滚动事件、浏览器窗口调节的resize事件、输入... 查看详情

javascript性能优化8——防抖与节流(代码片段)

目录一、引入为什么需要防抖和节流使用场景概念二、防抖函数实现场景原始代码防抖函数代码三、节流函数实现场景原始代码节流函数代码一、引入为什么需要防抖和节流我们现在JS主要是在浏览器下运行，涉及到很多人... 查看详情

性能优化之函数防抖动

函数防抖动是一种常见的优化高频率调用函数的手段，核心是把高频率调用的函数优化为在某一时间段内只调用一次根据具体调用的时机可以分为两种，分别是先调用防抖以及后调用防抖先调用防抖先调用防抖是指先调用函数，... 查看详情

性能优化——防抖和节流(代码片段)

手写防抖和节流函数(代码片段)

一、认识防抖debounce函数我们用一副图来理解一下它的过程：当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；当事件密集触发时，函数的触发会被频繁的推迟；只有等待了一段时间也... 查看详情

react学习(60)--antdesign中getfielddecorator(代码片段)

<From><FormItem>//JS代码书写时需要用包裹起来，不能直接写在代码块中getFieldDecorator('userName',initialValue:'Jack',rules:[required:true,message:'用户名不能为空',min:5,max:10,messag 查看详情

前端优化中的防抖与截流(代码片段)

1.什么是防抖？在事件触发后的指定时间之后，再去执行真正需要执行的函数，如果在该时间之内事件又被触发，则重新开始计时。常见的应用场景：1.滚动事件触发；2.搜索框输入查询；3.表单验证ÿ... 查看详情

js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据(代码片段)

　　防抖和节流，主要是用来防止过于平凡的执行某个操作，如浏览器窗口变化执行某个操作，监听某个input输入框keyup变化，瀑布流布局时Y轴滚动，图片加载。　　　　js函数的防抖　　　　　　经过一段事件才执行某个操作... 查看详情

[react+antdesign]profrom高级表单-基本的几种格式验证(代码片段)

antD中常用的几种表单格式验证，用的ProFrom高级表单组件，主要看表单格式验证的部分，同From表单大同小异。下面就是基本的几种格式验证：1、不能为空<ProFormTextname="title"label="标题"placeholder="请输入标题&quo... 查看详情

js防抖和节流

防抖和节流是前端性能优化中经常提及的点，下面来做个简单介绍和实现方式。说一下防抖和节流函数的应用场景，并简单说下实现方式防抖防抖函数的应用场景：防抖是指，触发事件后在n秒内函数只能执行一次，如果在n秒内... 查看详情

vue中element中的input框和laod中防抖和节流结合使用（性能优化）使用lodash相关方法(代码片段)

vue中element中的input框配合laod中防抖和节流结合使用（性能优化）Lodash中文文档地址：https://www.lodashjs.com/<el-inputplaceholder="请输入内容"v-model="input"clearableclass="inp 查看详情

react学习(27)---antdesign设置默认值(代码片段)

getFieldDecorator('activityTimeStamp',rules:[required:true,message:'请选择活动时间'],initialValue:[moment(updateDataSource.startTime),moment(updateDataSource.endTime),],)(<RangePicker 查看详情

防抖debounce和节流throttle

大纲一、出现缘由二、什么是防抖debounce和节流throttle三、应用场景3.1防抖3.2节流一、出现缘由前端开发中，有一部分用户行为会频繁触发事件，而对于DOM操作，资源加载等耗费性能的处理，很可能导致卡顿，甚至浏览器崩溃，... 查看详情

javascript防抖与节流

JavaScript防抖与节流1为什么需要防抖和节流2防抖与节流原理3实现一个防抖函数3.1初步实现3.2this问题3.3event问题3.4立即执行3.5返回值问题3.6取消防抖3.7总结4实现节流函数4.1通过时间戳实现节流4.2使用定时器实现节流4.3时间戳和定... 查看详情

react学习(29)---antdesign上传组件(代码片段)

importUpload,message,Button,Iconfrom'antd';constprops=name:'file',action:'https://www.mocky.io/v2/5cc8019d300000980a055e76',headers:authorization:'authorization-tex 查看详情

聊一聊函数节流和函数防抖(代码片段)

聊一聊函数防抖和函数节流在日常的“敏捷开发”，一味地为了快速的完成需求，其中遇到一个以前经常需要做到的而又懒得去优化的需求–滑动加载更多数据，也就是分页。算是脑抽啥的想优化一下代码性能。于是... 查看详情

前端的防抖和节流

防抖和节流都是优化高频率执行js的方法 dom结构<buttonid="jh">　　123</button> js结构varjh=1;varjhBt=document.getElementById("jh"); 防抖：只有等空闲时间才去执行，比如搜索框功能，如果快速一直按键，难道... 查看详情