飞扬小阁

原创 PMBOK指南

原创 【正则表达式】--常用汇总（陆续更新）

浮点型demo:if(/^\d+(\.\d+)?$/.test(value)){this.val(/^\d+(\.\d+)?$/.exec(value))}金额支持两位小数：!(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(this.money.discount))正整数：!(/^[1-...

原创 图片base64转file并axios上传

base64ToFile(dataurl, filename) { const arr = dataurl.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { .

原创 js枚举转数组

letenumArray=Object.values(enum);

转载 尾调用、尾递归、堆栈、斐波拉契数列、函数柯里化

尾调用当函数a的最后一个动作是调用函数b时，那么对函数b的调用形式就是尾调用。比如下面的代码里对fn1的调用就是尾调用：const fn1 = (a) => { let b = a + 1; return b;} const fn2 = (x) => { let y = x + 1; return fn1(y); // line A} const result = fn2(1); // line B在代码执行时，会产生一个调用栈，调用某个

转载 大文件的分片上传、断点续传及其相关拓展

大文件的分片上传、断点续传及其相关拓展大文件分片上传核心方法在JavaScript中，文件FIle对象是Blob对象的子类，Blob对象包含一个重要的方法slice通过这个方法，我们就可以对二进制文件进行拆分 使用 FormData 格式进行上传 服务端接口接受到数据，通过 multiparty 库对数据进行处理 区分 files 和 fields，通过 fse.move 将上传的文件移动到目标路径下 客户端使用 Promise.all 方法，当监听到所有切片已上传完，调用 merge 接口

原创 箭头函数与普通函数区别

ES6中允许使用“箭头”（=>）来定义函数。箭头函数相当于匿名函数，并且简化了函数定义。// 箭头函数let foo = (name) => `我是${name}`foo('nk') // 我是nk// 等同于下面这个普通函数let foo2 = function(name) { return `我是${name}`}箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ...

原创 npm和yarn的区别

npm的安装机制* 同一个项目团队,应该保持npm 版本的一致性。npm 的缺陷：npm install 下载速度慢，重新 install 时速度依旧慢 同一个项目，安装的无法保持一致性。原因是因为 package.json 文件中版本号的特点导致的，下面三个版本号在安装的时候代表不同的含义。"5.0.3" # 表示安装指定的5.0.3版本"~5.0.3" # 表示安装5.0.X中最新的版本"^5.0.3" # 表示安装5.X.X中最新的版本使用 npm 安装...

原创 package.json

1. dependenciesdependencies字段中声明的是项目的生产环境中所必须的依赖包。当使用 npm 或 yarn 安装npm包时，该npm包会被自动插入到此配置项中：npm install <PACKAGENAME>yarn add <PACKAGENAME>当在安装依赖时使用--save参数，也会将新安装的npm包写入dependencies属性。npm install --save <PACKAGENAME>该字段的...

原创 AntD Pro ProTable 搜索项设置默认值

// 列表 搜索项 默认值 useEffect(() => { formRef.current?.setFieldsValue({ queryMonth: moment().format('YYYY-MM') }); formRef.current?.submit(); },[])colums类型日期月份valueType:'dateMonth'{ title: '月份', key: 'queryMonth', ...

原创 AntD Pro ProTable 中 key注意

rowKey="key"，这个key不能改变，改成rowKey，就报：Each child in a list should have a unique "key"

原创 Vue3.x 中使用window的scroll监听页面滚动(非setup写法)

window.addEventListener，window.removeEventListener第3参数需为true mounted() { console.log('mounted') window.addEventListener('scroll', this.onScrollFunc, true) }, beforeUnmount() { console.log('beforeUnmount') window.removeEventListener(

原创 vue3.x setup 说明

1、setup函数是组合API的入口函数。2、setup函数只能是同步的不能是异步的。3、setup 执行时机 在beforeCreate（组件的data和methods还没有初始化好） 和created（组件的data和methods已经初始化好） 之间。4、由于在执行setup函数时候，还没有执行created生命周期方法，所以在setup函数中，是无法使用data和methods。5、setup 函数时，它将接受两个参数：props(父组件传递的参数)、context(包含attrs、

原创 npm install 参数区别

共同点：npm install 、npm install --save 和 npm install --save-dev，三者都会本地安装包到项目的node_modules目录中。区别：npm install：安装模块到node_modules目录下，不修改package.jsonnpm install -g：不在node_modules目录，不修改package.json。安装模块到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。npm insta

原创 [漫画]我从11楼跳下去-长图

原创 Antd Form Upload 报fileList错误-解决方案

把Upload放在Form下面,初始化组件会提示一个错误[antd: Upload] `value` is not a valid prop, do you mean `fileList`?解决方案：表单 Form - Ant Designhttps://ant.design/components/form-cn/#components-form-demo-validate-other提重点：const normFile = (e: any) => { console.log

原创 Antd ProV5 设置ProForm选项值-formRef

Antd ProV5 设置ProForm选项值（场景：select选项涉及联动，onchange时要把子联动value清空）关键点：formRefProForm - 高级表单 - ProComponents???? 让中后台开发更简单 包含 table form 等多个组件。https://procomponents.ant.design/components/form#formref主要看'一键填写'onFill，setFieldsValue某一项的值。import React, {

原创 A-Frame实现浏览器VR\AR整理记录

A-Frame – Make WebVRhttps://aframe.io/A-Frame开发指南 | WebVR中文文档 | A-Frame在线教程 | 踏得网https://www.techbrood.com/aframe/guides?p=building-a-basic-sceneA-Frame实现浏览器中的虚拟现实和增强现实介绍 这篇关于渐进式 Web 应用程序的文章是教你如何在Web 应用程序中实现虚拟现实 (VR) 和增强现实https://mp.weixin.qq.com/s/6ddpdkn

原创 VS Code React快速代码插件ES7+ React/Redux/React-Native snippets

ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace Extension for Visual Studio Code - Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.https://marketplace.visualstudio.

原创 antd tree expandedKeys不生效坑记录

官方要求string[]，注意treeData里的key类型。我的treeData是接口获取的，在useState赋值后，设置expandedKeys的值未生效。原因是useState是异常赋值，加了一个setTimeout延迟设置expandedKeys。setTimeout(() => { expandAllKeys(treeJsonData)}, 200) 另外，Tree组年默认展开要写上<Tree expandedKeys={expa..

原创 函数式组件与类组件区别-心智模型

与React类组件相比，React函数式组件究竟有何不同？区别：心智模型不同，函数式组件捕获了渲染所用的值。函数式组件与类组件有何不同？ — Overreacted他们是完全不同的宝可梦哦。https://overreacted.io/zh-hans/how-are-function-components-different-from-classes/它渲染了一个利用setTimeout来模拟网络请求，然后显示一个确认警告的按钮。例如，如果props.user是Dan，它会在三秒后显示Follo

原创 React Hooks之useEffect

Using the Effect Hook – Reacthttps://reactjs.org/docs/hooks-effect.htmluseEffect 完整指南 — OverreactedEffects是你数据流的一部分。https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/???? Question: 如何用useEffect模拟componentDidMount生命周期？虽然可以使用useEffect(fn, []

原创 React hooks 中ref、useRef和forwardRef 的用法（父子组件通讯）

直接上代码：import React, { useRef, forwardRef, createRef } from 'react';import { Card, Button } from 'antd';const Foo = forwardRef((props,inputRef) => { // const inputRef = useRef() const onClick = () => { inputRef.current.focus() } ret

原创 React Fragment＜＞＜/＞

Fragments – Reacthttps://zh-hans.reactjs.org/docs/fragments.html#gatsby-focus-wrapperFragments – Reacthttps://zh-hans.reactjs.org/docs/fragments.html#short-syntax

原创 VS Code插件记录

10款VS Code插件神器，第7款超级实用！ - 知乎VS Code是这两年非常热门的一款开发工具，它不仅有提升开发体验的界面、轻量化的编辑器，还有丰富而强大的插件，这些优秀的插件使得VS Code生态体系更加吸引人，让开发效率大大提升。本文来介绍10款高效的VS Code…https://zhuanlan.zhihu.com/p/111004160vscode-icons文件图标Better Align整洁的代码（使用方法：Ctrl+Shift+p输入“Align”确认即可。）...

原创 Ant Design ProV5 Table columns定义valueType

ProTable - 高级表格 - ProComponents???? 让中后台开发更简单 包含 table form 等多个组件。https://procomponents.ant.design/components/tablehttps://procomponents.ant.design/components/schema#valuetype-列表//搜索栏 下拉选择 valueType: 'select',{ title: '运营中心', dataIndex: '

原创 React Hooks之 router useParams获取页面参数

路由routes设置：{ name: '带参页面', path: '/page/:id&:name'}跳转：history.push(`/page/${id}&${name}`)路由routes设置：{ name: '带参页面', path: '/page/:id&:name'}获取参数：import { useParams } from 'react-router-dom';const Page: React.FC = (

原创 Ant Design Pro多子路由对应同一个菜单选中

{ name: '角色管理', path: '/set/role', routes: [ { name: '角色列表', path: '/set/role/list', component: './set/role', hideInMenu: true }, { name: '角色.

原创 Ant Design 路由配置redirect重定向

component: './Demo',组件路径默认从pages查找，所以为component: './Demo',

原创 Ant Design Pro5 路由跳转

import { history } from 'umi';// 跳转到指定路由history.push('/page');// 带参数跳转到指定路由history.push('/page?id=1');history.push({ pathname: '/page', query: { id: 1, },});// 跳转到上一个路由history.goBack();...

原创 Vue数组改变，视图不更新解决方案

列表渲染 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9this.$forceUpdate() // 强制刷新Vue.set(Array,index,newValue)// vue本身可以监听到数组的一些方法,例如:// push(),pop(),s...

原创 Vant UI中van-popup 不弹出问题的解决方案

Vue 3需要将 v-model="show" 更改为 v-model:show= "show"

原创 vue.config.js 配置proxy代理axios请求无效问题解决方案

使用proxy代理请求地址，可以帮助隐藏http请求地址，并可解决跨域请求的问题试了很多方法开发环境无效。vue.config.js配置(不要配置其他多余的选项，只要proxy)devServer: { port: 8088, proxy:"http://192.168.111.101:8081" // 下方配置无效，已屏蔽 /* proxy: { '/api': { target: "http://192.168.111.101:8

原创 CSS控制富文本内容样式

去掉style里的scoped

原创 AntD Tree右键菜单-react-contexify

https://www.npmjs.com/package/react-contexifynpm ireact-contexify使用版本：5.0.0说明：5.0.0版本中没有MenuProvider，网上很多方案有MenuProvider是react-contexify老版本。比如参考：https://github.com/ant-design/ant-design/issues/5151简单Demoimport React from 'react';import...

原创 AntD Pro v5 记录-报错安装

These dependencies were not found:* xml-but-prettier in ./node_modules/swagger-ui-react/swagger-ui.js* xtend in ./node_modules/property-information/lib/util/merge.js* zenscroll in ./node_modules/swagger-ui-react/swagger-ui.jsTo install them, you can.

原创 AntD Pro Footer自定义

1.屏蔽Footer{/* <Footer /> */}2.修改内容，links={[]}import { DefaultFooter } from '@ant-design/pro-layout';export default () => { const defaultMessage = '自定义信息' return ( <DefaultFooter copyright={`2021 ${defaultMessage}...

原创 VS Code 修改目录树缩进大小

设置，搜索Tree: Indent，默认8，设置16

原创 React Hooks 之 useRequest

https://hooks.umijs.org/zh-CN/hooks/async一个强大的管理异步数据请求的 Hook.核心特性自动请求/手动请求 SWR(stale-while-revalidate) 缓存/预加载 屏幕聚焦重新请求 轮询 防抖 节流 并行请求 loading delay 分页 加载更多，数据恢复 + 滚动位置恢复 错误重试 请求超时管理 suspense ......基础版(自动请求)import { useRequest } fr...

原创 Ant Design Vue 相关介绍

Ant Design Vue有三个版本：v1（vue2.x）：https://www.antdv.com/docs/vue/introduce-cn/v2（vue3.x）：https://2x.antdv.com/docs/vue/introduce-cn/v3（vue3.x）：https://next.antdv.com/docs/vue/introduce-cn/ANTD PRO VUEhttps://pro.antdv.com/package.json里看支持的是vue2.