- 博客(61)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 ant design pro v5 之 自定义面包屑数据
原因：在 Ant Design Pro 中，如果你使用 PageContainer 来管理页面，点击面包屑返回时默认是通过 history.goBack() 来实现的，这可能导致部分参数丢失。关于breadcrumb这个属性，在我浏览pro-components官方api的时候没有直接写在文档中，他是封装了 antd 的 PageHeader 组件，官方也说了，源码也的确是这样，如果有疑惑可以看下antd的页头组件（PageHeader）和面包屑组件（Breadcrumb）即可，
2024-01-03 17:37:06
597
原创 C++ const与指针共同使用
3. 在符号*的左右各有一个const时，表示指针和指针所指数据都是常量，既。const既出现在*的左侧，也出现在*的右侧，表示指针本身及指针所指的数据。本指针改变，但可以通过其他方式进行修改；指针本身是变量，可以指。指针所指的数据可以通过本指针进行修改。不能让指针指向其他地址，也不能通过指针修改所指向的内容。1. 如果唯一的const位于符号*的。2. 如果唯一的const位于符号*的。，表示指针本身是常量，不能让该指针。，表示指针所指数据是常量，数据。
2022-09-23 17:47:02
428
1
原创 C++ 引用
程序中使用哪个名字都是允许的。在C++中，“引用”的定义。类型名 &引用名=同类型的某变量名;变量对应于某个内存地址，引用相当于给变量起了一个。
2022-09-23 17:44:02
310
原创 SQL学习常用命令
链接数据库：mysql -u root -p创建数据库：create databases mysql_test;查看数据库：show databases;选择数据库：use mysql-test;修改数据库：altet database mysql_test删除数据库：drop database mysql_test创建表：create table tab1(列名1,列名2);往表里添加数据：insert tab1 values(值1,值2)查看表：select * from
2022-07-25 14:14:37
317
原创 ant design pro v5 之统一错误处理
文档链接：https://umijs.org/docs/max/request#responseinterceptors在 中你可以通过配置 request 项，来为你的项目进行统一的个性化的请求设定。除了 , , 以外其它配置都直接透传 axios 的 request 配置。在这里配置的规则将应用于所有的 和 方法.。下面分别介绍 的运行时配置项。本节的末尾，我们会给出一个完整的运行时配置示例，并且对它的功能进行一个详细的描述。errorConfig如果你想要为自己的请求设定统
2022-06-24 10:55:43
1779
1
原创 ant design pro v5 之 ProForm自定义表单项
需求背景：ProForm 默认提供的表单项无法满足项目开发解决方案：ProForm本身是在原来的Ant Design Form 的基础上增加一些语法糖和布局设置等等，那我们就看看ProForm是如何做的不就行了了解之后得知：ProForm的表单代码是通过如下方式来创建的：const ProFormText = (props) => { return ( <ProForm.Item {...props}> <Input placeholder={p
2022-04-24 18:13:02
6673
2
原创 ant design pro v5 请求拦截 响应拦截
在我们的app.js文件中exportrequest方法即可const loginPath = '/user/login';//拦截器-请求前拦截const authHeaderInterceptor = (url, options) => { const o = options; //如果不是登陆页 headers里添加 username //headers 里面的内容是和后端协商好的 if (history.location.pathname !== log...
2022-03-16 13:52:00
2629
原创 antd design pro v5 ProTable 列表工具栏操作
const [columnsStateMap, setColumnsStateMap] = useState(() => { //从缓存里面获取ColumnsState return JSON.parse(localStorage.getItem('storeManagementSeeting')) || {}; }); const handleOnChangeColumn = (map,ColumnsState) => { setColumnsState...
2022-03-08 12:20:14
3562
8
原创 Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件
先上整体代码：const beforeSearchSubmit = (par) => { //par 就是你搜索表单输入的内容} <ProTable headerTitle="查询表格" columns={columns} rowKey="key" params={ params } beforeSearchSubmit={beforeSearchSubmit}
2022-02-25 15:42:36
17296
3
原创 Ant Design Pro V5 嵌套菜单
写在最前面，建议先不要使用v5，坑太多，最大问题在于文档写的混乱不堪先上成果截图：这里我使用的是V5，实现代码如下：1.app.jsx第一步：在app.jsx 的 layout里找到 childrenRender 这个方法，我这里是判断当前路由页面是否存在嵌套路由，具体的视各位情况而定 childrenRender: (children, props) => { // if (initialState?.loading) return <P...
2022-02-16 16:03:51
2182
翻译 React Hook 监听localStorage更新
场景：数据存储在了localStorage里，localStorage变化实时更新组件里使用到的数据误区：一开始条件下想到的是按照useEffect监听useState变化那一套 useEffect(()=>{ useData(localStorage.getItem('rightCartData')) },[localStorage.getItem('rightCartData')])很明显不行，为什么？示例不起作用的原因是和传递给 useEff
2021-11-23 16:10:42
7115
6
原创 React Hook input debounce 获取event（Cannot read properties of null (reading ‘value‘) ）
控制台报错：Cannot read properties of null (reading 'value')不多说，解决方法如下import {useCallback} from 'react';import debounce from 'lodash/debounce';import axios from 'axios';function Input() { const [value, setValue] = useState(''); const debounceF.
2021-11-08 11:25:14
1664
原创 if后面只有一条语句，大括号到底是加还是不加？
if 语句作为流控制语句，可以简单 也可以很复杂，是js使用最频繁的语句之一如下示例：if(condition) dosomething1... else dosomething2...if 里面的语句 可能只有一行代码，这个时候 代码块（也是大括号）应不应该省略呢？最佳实践是需要加上大括号，原因很简单：避免对什么条件下 执行什么产生困惑，说白了 看起来花里胡哨的 也提升不了性能，还是严谨点好不是吗？...
2021-09-06 18:34:21
4764
原创 React 里使用 material-design-icons
介绍：material-design-icons 是由 Google 开源的 Material 设计图标集1.安装：npm install material-design-icons2.在你的入口sass或者less里引入material-icons.css@import '~material-design-icons/iconfont/material-icons.css';body:{...}3.直接使用：<span className="material-icons"
2021-07-29 16:51:52
747
转载 媒体查询里的min-width 和 max-width
本文参考MichelleKlann的Media Queries Demystified: Min-Width and Max-Width媒体查询(media queries)是响应式设计(Responsive Web Design简称RWD)必不可少的一部分。媒体查询有两个关键词min-width和max-width, 接触过媒体查询的同学可能会认同我， 这两个关键词很绕；从字面上理解它们可能不那么容易，以至于我每次都需要在脑海里面不断演算，然后小心翼翼地测试效果（大概和写正则表达式的感觉差不多..
2021-07-28 14:46:30
4178
1
原创 react 公共组件发布到npm
React的一大优点是可以编写可复用的组件，我们可以使用它来构建复杂的UI界面。NPM允许我们编写可复用模块并将其发布到网上，这样来自世界各地的数百万开发可以下载并且使用1.创建我们的文件夹myComponents2.在myComponents目录下 初始化package.json文件npm init3.安装babel和Presets，将React JSX或者JavaScript代码转为ES5@babel/preset-env可将我们编写的代码转化成ES5，@babel/preset
2021-04-08 17:20:21
594
1
原创 antd form validator自定义校验规则
需求：如果输入为空：提示不可为空，如果输入字段里有x字符串，提示不可带x，根据不同的情况提示不同的错误信息。效果图如下：代码如下：import React, {Component} from 'react';import {Button, Modal, Form, Input} from 'antd';import styles from './index.less';const FormItem = Form.Item;const validateLimit = (rul
2020-11-13 18:07:33
7060
原创 mac 下sql 启动报错Can‘t connect to local MySQL server
执行mysql -u root -p 时候，控制台报错：Can't connect to local MySQL server through socket '/tmp/mysql.sock'网上查找资料后发现是MySQL没有找到这个文件重新启动一下sql服务：sudo /usr/local/mysql/support-files/mysql.server restart再执行mysql -u root -p参考自：https://blog.csdn.net/fighting_s
2020-11-09 13:28:44
226
原创 G6自定义节点
自定义节点有两种：1，svg + 自定义 DOM ， 缺点：不支持G6事件G6.registerNode('dom-node', { draw: (cfg, group) => { const shape = group.addShape('dom', { attrs: { width: cfg.size[0], height: cfg.size[1], html: ` <div id=...
2020-07-31 11:51:18
17364
21
原创 ant.design form表单提交+表单赋值
场景：index.js上有三个form表单组件分别是，A.js B.js C.js点击index.js上的提交/保存按钮，提交子组件form表单的值1.在index父组件上使用create创建formconst { form } = this.props;const { getFieldDecorator } = this.props.form;Form.create()(BilltoMaintenanceDetail);2.把form和getFieldDecorator ...
2020-05-14 10:10:21
11002
5
原创 antd 每次打开modal 初始化数据
场景：每次打开Modal 重新请求ajax数据，或者初始化Form等数据解决办法：给Modal添加key，每次弹出的时候 改变key的值，保证每次key的值不同 这里使用了Math.random()介绍代码如下：handleOk = () => { this.setState({myKey: Math.random()});}const {visible,myKe...
2020-04-28 15:22:03
9961
2
原创 react-router-dom 记录
参考：https://www.jianshu.com/p/fb201f82cf8c安装 react-router-domnpm install react-router-dom一.基本使用App.jsimport React from 'react'import { BrowserRouter as Router, Route, Link, Switch } from '...
2020-04-07 10:57:20
183
原创 react-redux使用记录
1.react-redux一般和redux一起使用，首先 安装redux 和 react-reduxnpm install redux or yarn add reduxnpm install reac-redux or yarn add reac-redux2.在根组件 引入Provider、index.jsimport React from 'react';impo...
2020-04-01 11:25:01
159
原创 redux基本流程和redux-thunk 中间件
问题？什么是中间件，是谁和谁之间的中间件呢？说这个问题之前，先搞清楚redux的流程（顺序如下）： View：派发一个action，action通过store的dispatch方法派发给store store：store接收到action连同之前的state一起传给reducer reducer：reducer返...
2020-03-30 17:55:21
496
原创 JavaScript 根据id数组，删除对象数组中的指定项
const arr = '1'const allArr = [ {id:1,name:'张三'} {id:4,name:'李四'}]最终结果： //screenArr = [{id:4,name:"李四"}];实现如下： const screenArr = allArr.filter((item) => { ...
2020-03-27 13:51:54
10808
原创 create-react-app 工程目录介绍
//执行一下代码npx create-react-app my-appcd my-appnpm start生成以下目录结构，今天就来介绍下 这些文件都是做什么的，按照顺序，从上往下开始根目录下：yarn.lock 项目依赖的安装包、会在这里进行限制、（我们不要动它）README.md 项目的说明文件、这里文件你可以自己删除掉，通过markdow的语法来编写自...
2020-03-26 11:11:31
1705
原创 Dva.js 使用介绍
Dva里面最重要的是Model我们先说Modeldva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects新建一个model.jsexport default { namespace: 'products', state: [], reducers: { 'delete'(state...
2020-03-23 14:55:24
2093
原创 React + Dva.js 使用
Dva简介：Dva是基于redux和redux-saga的数据流方法，并且内置了react-router和Fetch, 说白了就是融合了redux+redux-saga+react-router dva = React-Router + Redux + Redux-sagaDva详细介绍请看官方Api：https://dvajs.com/guide/1）.在D...
2020-03-23 10:34:01
1216
原创 react 判断数组是否存在以此执行后面的方法
场景：判断数组是否有数据，以此来绝对要不要执行后面的语句有一些“falsy” 值，如数字0，仍然会被 React 渲染。例如，以下代码并不会像你预期那样工作，因为当props.messages是空数组时，0仍然会被渲染<div> //错误 {props.messages.length && <MessageList messages...
2020-03-20 10:27:34
3126
原创 react 之 Context 使用方法
一般组件之间传参通过props，今天记录一下Context使用场景：组件嵌套层级很深的情况1.在传参的那一层（父组件）顶部创建一个 Context 对象const Context = React.createContext(defaultValue); //创建一个 Context 对象 //defau...
2020-03-19 14:16:47
578
原创 前端偶尔会用到的Xshell之linux指令
使用情况： 后台和测试人员为我们搭建好测试服务器之后，每次需要更新代码到测试服务器的时候还要劳顿他们， 为此，在自己电脑上装一个Xshell连接到远程主机 Xshell是一种非常流行的SSH工具,用于在电脑上对远程空间(我这里是直接链接测试服务器)进行通信和控制为此记录一些常用的指令cd 就不说...
2020-03-17 16:11:32
164
原创 React 之 cancel all subscriptions and asynchronous tasks in the componentWillUnmount method
诱发这个情况的原因是，我在componentDidMount 里面执行的ajax请求componentDidMount() { getClassNameList() .then(res => { if (res.code == 200) { this.setState({ classID: res.data...
2020-03-16 17:05:37
2084
原创 js 查找树种某一条数据 最深层的子数据（递归获取指定某一条数据）
var data = { 'code': 200, 'data': [ { 'cascadeIds': 'f24e3b3b31ea11ea8bef000c29aefb8e_6c5feaf031c111ea8bef000c29aefb8e_17fca55631c711ea8bef000c29aefb8e', 'childTree': ...
2020-03-06 18:59:56
1852
1
原创 antd design Select自定义参数传递
选中Select下拉option之后，不仅仅要获取它的value，还要获取其它字段type，首先把type字段传递给option，之后通过onChange={(value,option)=> this.handleChange(option)}option可以获取到很多参数，里面的props就是你需要的数据 //事件handleChange = (option)...
2020-03-06 11:22:53
7955
原创 简单介绍 ES6 Object.assign()
方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。说道这里先说下什么是“可枚举”属性？？ js的对象分为可枚举、不可枚举， 可枚举：可以通过for循环啊，for --- in啊，Object.keys()像这些能返回对象本身具有的，都是可枚举属性 说白了：开发者自定义的属性在一般情况下是可枚举的...
2020-01-14 17:39:29
161
原创 flex布局 之 基于可视化窗口（浏览器页面高度）垂直居中
因为 父元素的宽度 是铺满页面，所以 也是基于可视化窗口的垂直居中.g-cent是父元素，.m-cent是子元素.g-cent { height: 100vh; display: flex; justify-content: center;/* 水平居中 */ align-items:center;/* 垂直居中 */}.m-cent { ...
2020-01-10 17:28:48
788
2
原创 node版本控制之nvm
1.NVM下载 1.安装包下载地址：https://github.com/coreybutler/nvm-windows 选择**nvm-setup.zip**，下载后直接安装。 2.如果电脑已有node版本，nvm会提示你原有node位置，直接安装就可以2.验证是否安装成功 1.打开命令行，执行nvm -v命令 查看是否安装成功，如下图所示...
2019-12-11 17:02:39
420
原创 解决window10下 bash: json-server: command not found
一般出现这种问题就是我们的环境变量配置的问题，打开控制环境变量的入口-这点请自行百度https://jingyan.baidu.com/article/ca41422f6a6baf1eae99ed9b.html在path里面添加C:\Program Files\nodejs\node_cache 这个路径，重启电脑，ok...
2019-12-07 14:58:10
1982
1
空空如也
protable无法正常分页，如何解决？
2022-07-27
TA创建的收藏夹 TA关注的收藏夹
TA关注的人