zhangzhuo1130的博客

原创 React:使用＜Link＞组件进行页面跳转，url变化但是页面无变化

React:使用组件进行页面跳转，url变化但是页面无变化

原创 js如何判断复杂对象（对象内部key对应数组或者字符串）是否存在值

在公共方法文件写一个公共方法，判定，在需要的地方将filters传入即可判断。这样就可以方便的判断出来啦。

原创 antd form表单使用upload组件，发现莫名请求接口报错404

【代码】antd form表单使用upload组件，发现莫名请求接口报错404。

原创 关于useEffect在组件结束销毁时使用记录

关于useEffect在组件结束销毁时使用记录。

原创 React:后端返回pdf数据流，前端打开页面预览，使用fetch，PDFObject

React中后端返回文件流，前端展示PDFfetch请求获取blob和arraybuffer文件流及核心API使用总结。

原创 关于useState塞入默认值是props传入来却没有生效

塞入默认值是从内拿到的时候，会有塞不进去的情况，原因就是第一次props的值为空，

原创 antd Form表单在没有使用hooks的情况下怎么使用resetFields或者setFileds方法，记录遇到的问题

前提：没有用hooks写，用的原始的class类组件，并且不想二次重构代码，就在网上疯狂寻找解决方案当前版本不能使用this.props.form

原创 转：前端25个正则提高代码效率

连接导向包含：手机号码的校验身份证的校验邮箱的校验URLIPv416进制颜色的校验日期YYY-MM-DD日期YYY-MM-DD hh:mm:ss整数校验小数校验保留N位小数邮政编号QQ号微信号车牌号只含字母的字符串换包含中文的字符串密码强度的家宴字符串长度N的校验文件拓展名的校验匹配img和src匹配html中的注释匹配html中的style匹配html中的颜色匹配htmlTag(html标签)...

原创 百度地图自定义弹窗样式

Css.BMap_bottom { display: none;}.BMap_pop { > div, > img:nth-child(10) { display: none; overflow: unset; } > div:nth-child(9) { display: block; overflow: unset; } > div:nth-child(8) { /*display: block;*/ .

原创 前台传给后台缩略图，后台返回图片地址，修改同一条数据返回相同地址后页面图片不更新问题

const defaultImage = is3DModal ? require('./3d.png') : `${item.picture_path}?t=${Math.random()}` || require('./analyzer_2/images/default-1.png');解决方法：在返回地址后面添加?t=${Math.random()

原创 js实现点击复制

要实现的效果点击复制onclick方法内容 function copyToClip(content, messageInfo) { var aux = document.createElement('input'); aux.setAttribute('value', content); document.body.appendChild(aux); aux.select(); document.execCommand('copy'); document

原创 列表页新增数据开启新页面如何在新页签保存数据后关闭页面回到列表页自动刷新列表显示出最新添加数据

在新增保存成功后添加对象localStorage.setItem('dataStoreListingNeedReload', true);然后再列表页componentDidMount()监听componentDidMount() { this.loadPermission(); this.loadData(); document.addEventListener('visibilitychange', () => { if ( !docum

原创 js获取本周，本月，本年，上一周，上一个月的开始日期与结束日期时间戳

getRecentlyWeek = () => { let nowData = new Date(); // 获取今天的是周几 let currentDay = nowData.getDay(); // 把currentDay == 0赋值给周日 if (currentDay === 0) { currentDay = 7; } // 获取周一的时间戳 let start = nowData.getTime() - (curr

原创 react-Quill点击工具栏后文本框失焦，重新点文本框刚设置的工具栏颜色样式不生效

为了解决文本框失焦背景：自定义富文本工具栏字体颜色以及背景颜色，但是弹窗关闭的同事文本框失焦解决方法：在关闭颜色选框的方法内添加react-quill内置方法this.reactQuillRef.getEditor().focus();...

原创 antd Input输入框type=number时如何去掉内部上下箭头

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none;}input[type='number'] { -moz-appearance: textfield;}在css文件添加以上代码即可

原创 批量异步请求获取数据方法

批量异步请求获取数据方法背景：有方法A，B，C，在我请求C的时候我需要方法A以及方法B的结果做的传参现象：在页面一加载执行的方法里面分别写入三个方法，按顺序写入，将方法AB的结果放到setstate里面，但是C执行的时候请求接口的参数并没有从ABset进去的获取值获取解决方案： const dataIdPromise = getCorrelationData( params, editModeCorrelationViews

原创 js对对象重命名方法

做个记录，js重命名背景：如果一个方法里面有两个接口，但是接口请求回来都是const {data} = 难免会发生data重名现象解决：const {data:Adata} = 利用重命名方式

原创 CSS给盒子内部标题加padding以及margin不起作用

CSS给盒子内部标题加padding以及margin不起作用可见加的上下padding都超出父盒子解决方案原因：行内元素需要声明才可以对padding以及margin上下有作用

原创 react接口请求post在原有请求数据的基础上，添加两个固定字段

loadData = async () => { const { page } = this.state; let searchPage = Object.assign({}, page, { orderBy: 'create_date', orderSort: 'DESC', }); try { const { data } = await User(searchPage); const dataSource = dat

原创 解决项目中多个页面重复访问同一接口的问题

多个页面进入时都要访问queryAll接口，接口返回数据量大，查找方法解决问题在项目首先加载页面index.html中<script> if (!sessionStorage.getItem('sessionValue')) { //判断是否请求过queryAll $.ajax({ url: '*******queryAll', type: 'GET', async: false, success: func

原创 在同一个页面，子组件引入父组件中加载好的tree

首先，两个文件的位置在carditem里面引入index里面异步加载好的tree，首先在外曾传入index加载好的officeList想要引入这个组件那么可以在caiditem.js里面直接写入并在需要展示的地方

原创 一个接口拼接传两个参数

后台写好的接口在service里面请求这个接口时，需要将要提交的两个参数进行拼接需要传入的两个参数在前台提交

原创 emotion的使用（css-in-js)

import { css } from 'emotion';首先引入let customStyle = css` & .ant-table-tbody { font-size: ${tableFontSize}; color: ${tableFontColor} !important; } &:hover .table-row > td { background: none; }

原创 react将select下拉选框改为可搜索的下拉选框

首先接口需要接受一个我搜索得值，和后台交接，更改接口后，新写接口。/** *查询字典表数据 */export const queryDictionaryCodeByType = (params, name) => request.post( name ? 'customized/dictionary/queryDictionaryCodeByTypeLimit?name=' + name : 'customized/dictionary/queryDicti

原创 React项目预览过程中遇到得问题集锦

1.hashHistory是什么意思？hashHistory是react-router中用来路由传值的。用法:引入包import {hashHistory} from ‘react-router’;路由传值（参数是放在query对象里面）Search = () => { hashHistory.push({ pathname: '/。。。', query: {id: this.state.id}, });}借用原作者...

原创 转：uni-app实现一个简单的选项卡

原作者笔记连接<template> <!-- <map style="width: 100%; height: 600px;" :latitude="latitude" :longitude="longitude" :markers="covers"> </map> --> <view class="content"> <view class="inv-h-.

原创 uni-app如果数据是Html形式的话

uni-app小程序练习中，如果数据是Html形式的话，取到后不能直接显示到页面上。需要操作：rich-text标签可以将它转换

原创 uni-app报错

原创 报错Can't resolve 'styled-component'

react项目报错**注：本来以为像往常一样只要npm intall styled-compinent 就可以的，但是仍然报错，就上网查找解决方案，解决方案如下，具体命令为：npm i styled-components...

原创 安装react-touter-dom时出现run `npm audit fix` to fix them, or `npm audit` for details

npm安装react-router-dom的时候，终端显示run npm audit fix to fix them, or npm audit for details。在网上查找解决方法记录如下：首先提示内容：第一步尝试：终端输入npm audit fix后：第二步：npm fund这应该就是好了吧。。。并没有好用！重启项目后发现报错：最后查了一下可能是因为我之前运行这个项目...

原创 React icon运用遇到报错 error: 'GlobalIcon' is not exported from './statics/iconfont/iconfont'.

报错如下报错原因:是因为我的在下载新的icon.svg导入的时候替换掉了原来的iconfont.js。后来下载的iconfont.js是老版本的，导入到新的项目里面就会有报错，需要将js文件更新成新版本的写法。就是如下面所示内容。注意是开头两行import {createGlobalStyle} from 'styled-components';export const GlobalIc...

原创 模拟蚂蚁森林小球收集能量方法

技术栈：vue jsHTML：<div class="main_contain"> <div v-for="(item,index) in ballList" :key="index" class="ball_small" :style="{top:item.top+'px',left:item.left+'px',transition:'all 2s'}">...

原创 redux报错：Error: Expected the reducer to be a function.

加上括号内的reducers就好了

原创 react练习项目，全局引用后icon变成方块问题

首先这是我的iconfont.js文件代码import {createGlobalStyle} from 'styled-components';export const GlobalIcon = createGlobalStyle `@font-face {font-family: "iconfont"; src: url('./iconfont.eot?t=157836168188...

原创 Error: Actions may not have an undefined "type" property. Have you misspelled a constant?

错误原因：reducer里面而action里面：不一致所以会报这个错误

原创 网上面试题学习总结201912/10

Q1:.viewpoint是什么？没找到准确的解释意思，大概是自适应移动端（第一道题就卡住了）Q2：解释Flex布局，为什么要确定主轴方向，缩小倍数有什么用？弹性布局中元素的大小是高度依赖父容器的大小的。它所具有的“伸缩性”，目标就是为了撑满父元素。重新定义浏览器“书写方式”。为了可以简便的从上到下写。从左到右换行。缩小倍数防止溢出父元素。flex还可以实现一侧固定一侧自适应。例如左侧写出w...

原创 react-学习笔记-10.21

新建项目全局安装react npm install -g create-react-app在自己的文件夹下安装项目 create-react-app todolist todolist为项目名称介绍相应文件夹作用更改网站标签左上角图标只需要更改：...

原创 es6课堂笔记

字符串模板`` 字符串模板：优点: 可以随意换行${变量名字}字符串连接，要死人的。let name =‘Strive’;let age = 18;let str = 这个人叫${name}, 年龄是 ${age}岁;关于字符串一些东西:字符串查找:str.indexOf(要找的东西) 返回索引(位置) ，没找到返回-1str.includes(要找的东西) 返...

原创 php ci框架进行发邮箱验证，注册填写邮箱，生成一个验证连接发送到邮箱，点击收到的邮件连接验证成功即可

首先user字段加上两个字段，一个是生成的随机字符串，一个是是否进行验证，两个字符串然后进行ci配置，主要思路，首先创建好两个字段，进行可发送邮件的mail配置，然后在生成一个随机字符串，加在base_url后面，然后将这个地址发送给注册的用户，点击链接，判断将is_verified变成1.1.mail配置在controller里面加入mail.php，验证是否可以用你的邮箱发出邮件，然...

原创 新项目难点记录：在地图上添加新设备（高德地图）

首先引用高度地图显示出来在项目最外层添加文件文件内容：module.exports = { //... // baseUrl: '/admin/' // configureWebpack: { externals: { 'AMap': 'AMap' // 高德地图配置 } }}然后在...