After_wade-CSDN博客

转载解决h5页面在ios中可以拖动的bug

参考链接：http://www.javashuo.com/article/p-bfdsqpgw-y.html

2021-12-30 09:58:31 1783

原创获取menu菜单第一个子节点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

2021-05-25 14:31:23 252

原创 React刷新页面保存tab切换栏的tabList和activeKey

import {React,useState} from 'react'import storage from './util/storage'const app = () => { const [tabList,setTabList]=useState(storage.get("tabList")||"") const [activeKey,setActiveKey]=useState(storage.get("activeKey")||[]); const listen

2021-04-25 13:36:30 1106

原创递归遍历树形图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc

2021-03-31 22:03:32 229

原创 react中限制input框输入表情和特殊字符

//表情const emojiReg=/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g；//特殊字符const scReg=/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im;利用input的value和onChange属性， if (!emojiReg

2021-03-29 19:26:36 2199

原创 dva引入页面分别在类式组件和函数式组件中的使用

类式组件：import React from "react";import {Component} from 'react';import { connect } from "dva"; //从dva中导入connectimport {Button} from "antd"; class Counter extends Component { constructor(props){ super(props) } //做dispatch分发的方法，相当

2021-03-11 19:15:25 2309

原创实现点击伪元素才有点击事件（相当于间接只给伪元素绑定事件）

实现思路：1.给伪元素的父元素绑定响应事件，然后给这个父元素设置pointer-enents:none;给伪元素设置pointer-enents:auto;（这种情况适用于父元素的子元素只有伪元素需要绑定事件）2.利用事件冒泡机制：给伪元素的父元素绑定响应事件，然后给这个父元素设置pointer-enents:none;给需要触发监听的元素设置pointer-enents:auto，然后在响应方法中通过e.target.tagName来判断分别执行的逻辑。...

2021-03-05 11:11:57 1154

原创 css实现列表信息最多展示三行然后...打点

今天写h5移动端碰到个需求，需要实现列表信息最多展示三行然后…打点，在这里记录一下。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,

2021-03-05 11:02:23 1356 1

转载 react实现多选框切换样式逻辑

import React, { Component } from 'react'class App extends Component { constructor(props) { super(props); this.state = { checkboxItems:[ {content:"吃",checked:false}, {content:"喝",checked:false}, {content:"玩"

2021-03-04 14:28:15 567 1

原创 axios笔记

axios1.HTTP 相关1.1MDN文档https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview1.2**HTTP 请求交互的基本过程 **前后应用从浏览器端向服务器发送 HTTP 请求(请求报文)后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回 HTTP 响应(响应报文)浏览器端接收到响应, 解析显示响应体/调用监视回调1.3HTTP请求报文1. 请求行:method urlGET /produc

2021-01-25 10:24:43 151

原创 react脚手架配置代理

react脚手架配置代理总结方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明：优点：配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理。工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）方法二第一步：创建代理配置文件在src下创建配置文件：src/setupProxy.js编写setupProxy.js配置具体代理规则：const

2021-01-18 14:34:43 282

原创 antd的按需引入与自定义主题

1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json…“scripts”: {“start”: “react-app-rewired start”,“build”: “react-app-rewired build”,“test”: “react-app-rewired test”,“eject”: “react-scripts eject”},

2021-01-18 14:10:16 413 1

原创 react-router笔记总结

react-router前端路由的基石_history：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>前端路由的基石_history</title></head><body> <a href="http://www.atguigu.com" onclick="return push('/test1

2021-01-18 14:05:59 437

原创 react组件生命周期（包含新旧版本）

1.对组件生命周期的理解组件从创建到死亡它会经历一些特定的阶段。React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。2.生命周期（旧）生命周期的三个阶段（旧版本，react17之前)初始化阶段: 由ReactDOM.render()触发—初次渲染 constructor() componentWillMount() render() componentDidMount()

2021-01-11 16:41:01 403 1

转载 react报错Can‘t perform a React state update on an unmounted component. This is a no-op, but it indicat

我们在react开发中经常遇到这个报错：经过查阅资料后解决了这个报错，在这里记录一下。这句话大概意思是：我们不能在组件销毁后设置state，防止出现内存泄漏的情况关于react中切换路由时报以上错误，实际的原因是因为在组件挂载（mounted）之后进行了异步操作，比如ajax请求或者设置了定时器等，而你在callback中进行了setState操作。当你切换路由时，组件已经被卸载（unmounted）了，此时异步操作中callback还在执行，因此setState没有得到值。解决方法：一、在卸载

2021-01-06 15:01:11 879

翻译给antd中table表格奇偶行设置不同样式（背景颜色交替）

今天在写大屏的时候碰到一个需求，需要将table表格展示的数据每一行背景颜色交替，翻阅资料后，完成了这个需求。如下图：table组件中有个rowClassName属性，让我们可以通过给每一行添加不同的类名然后设置不同行的样式jsx代码：import React, { Component } from 'react';import {Layout,Select,Table} from 'antd'import './index.less'const { Option } = Select;

2020-12-29 16:47:30 6234

原创解决bizcharts折线图中坐标文本颠倒

先上图片，今天在使用bizcharts的折线图统计数据的时候发现当坐标系的值设为小数或者字符串的时候，坐标系上面的文本会颠倒位置 // 折线图数据 //mock一下data数据 const linedata = []; let arr=[1,0.2,0.3,0.8,0.8,0.9,0.9,0.9,0.4,0.4,0.5,0.6,0.7,0.3,0.5] for(let i=14;i>=0;i--){ l.

2020-12-16 17:30:41 759

原创 BFC的特性

BFC（块级格式上下文）• BFC会阻止垂直外边距（margin-top、margin-bottom）折叠• 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。• 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。

2020-11-20 11:43:19 293

原创 js中伪数组（也叫类数组）

1. 伪数组的特点:* Object对象* length属性* 数值下标属性* 没有数组特别的方法: forEach(), push(), pop(), splice()// 自定义一个伪数组<script> <script> var weiArr = {} weiArr.length = 0 weiArr[0] = "zjw" weiArr.length = 1 weiArr[

2020-11-16 15:47:05 2386 1

原创 js中将一条数据的value值添加为需要的key值

今天在写react项目时，需要将后台传过来的6条数据整合显示到antd的table组件上，需要为数据添加例如“2020-11-02”的日期字段，value为staffName，这里记录一下整合过程。<script> var arr = [ { "id": 1, "staff_shift_id": 1, "shift_time": "2020-11-08", "shift_id

2020-11-10 19:29:45 806

转载 js根据指定日期到接下来的一周日期的日期数组

2020-11-10 16:44:44 367

原创 js键值映射

后台返回的是收费方式的id，我们前端需要将id转换为为对应的字符串向用户展示//js键值映射export default function chargeTypeChange(value) { var chargeTypeGroup = { "-1":"未知类型", "0":"现金", "1":"微信", "2":"支付宝", "3":"刷卡", "4":"转账" }; return .

2020-10-28 11:06:55 1402

原创 js把字符串数组转换为数字数组然后用reduce累加

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js把字符串数组转换为数字数组然后累加</title></head><body> &l

2020-10-27 19:55:19 524

转载 js中判断数组中是否存在某个对象

var arr=[{"appId":"3","appName":"慧管(西蓝花)"}, {"appId":"4","appName":"慧服务(西蓝花)"} ]var obj={"appId":"3","appName":"慧管(西蓝花)"}if(JSON.stringify(arr).indexOf(JSON.stringify(obj)) === -1){ console.log('不存在') arr.push(obj)}else{

2020-10-21 17:01:53 2572 3

原创 js中foreach嵌套遍历两个数组并输出

今天对接口的时候发现一个需求，需要将两个数组中的每一项拼凑在一起成为一条记录，然后再将每一条记录push进一个新数组，再发请求。之后用两个foreach嵌套遍历解决了这个需求<script> let arrA=['1','2','3','4','5'] let arrB =['2020-10-1','2020-10-2','2020-10-3'] let arrC=[] arrA.forEach(item1=>{ arrB.forEach(

2020-10-21 11:08:24 9136

转载 js 中使用var与省略var 定义变量的区别

在js中定义变量的时候，我们习惯了用var，其实省略var也可以用的。今天总结一下，使用var或省略var 定义变量的区别1、var 私有变量，只能在当前js使用，或者在当前作用域使用，定义私有变量，不能delete；2、省略var定义变量，如a = “sss”, 定义了一个全局变量对象a，a没有被delete掉前，我们可以直接在浏览器console输入a即可看到结果，在任何一个js都可以调用这个对象，可以选择delete。不建议省略var，省略var的时候要慎重省略var会带来以下：

2020-10-18 21:09:11 1104

原创 JavaScript根据开始时间和结束时间计算具体礼拜几

今天碰到一个需求，需要根据时间搓（）的开始时间和结束时间计算出具体礼拜几然后显示在table里的表头上，于是写一个下面的timeCount方法，传入开始时间和结束即可，比如 timeCout（“2020-10-1”，“2020-10-7”）即可调用；function getDate(datestr){ var temp = datestr.split("-"); var date = new Date(temp[0],temp[1],temp[2]); return date;}

2020-10-16 19:12:47 367

原创 js中用map方法给数组添加新属性和过滤不要的属性

onSubmit = () => { const { validateFields, resetFields } = this.props.form; validateFields((err, values) => { if (!err) { console.log(values) debugger if (this.store.modalTit

2020-10-14 13:38:32 2885

原创 ajax请求接口导致status为canceled的解决方法

如图所示：今天在对接口的时候，发现请求变红，status显示为cancel，刚开始觉得是请求超时，然后经过调试后发现，请求的参数能进后台接口，但是前台拿不到返回的信息。场景复现：FilterForm.jsimport React from 'react';import { Form,Input, Button,DatePicker} from 'antd';import { inject, observer } from 'mobx-react';const FormItem = Form.

2020-09-30 15:41:58 6815

原创前台分页和后台分页

最近在做后台管理系统项目中遇到分页的需求，今天把做项目中关于分页的笔记分享一下。分页实现技术(2种)1). 前台分页请求获取数据: 一次获取所有数据, 翻页时不需要再发请求请求接口: 不需要指定请求参数: 页码(pageNum)和每页数量(pageSize) 响应数据: 所有数据的数组2). 基于后台的分页请求获取数据: 每次只获取当前页的数据, 翻页时要发请求（触发onchange事件发请求）请求接口: 需要

2020-09-25 19:41:12 853

翻译学习es6的笔记总结

es6的笔记总结1.let和const<script> // var 声明的变量往往会越域 // let 声明的变量有严格局部作用域// {// var a = 1;// let b = 2;// }// console.log(a); // 1// console.log(b); // ReferenceError: b is not

2020-09-22 20:23:36 114

原创 react中的高阶函数和高阶组件

高阶函数1). 一类特别的函数a. 接受函数类型的参数b. 返回值是函数2). 常见接受函数类型的参数：a. 定时器: setTimeout()/setInterval()b. Promise: Promise(() => {}) then(value => {}, reason => {})c. 数组遍历相关的方法: forEach()/filter()/map()/reduce()/find()/findIndex()返回值是函数：d. 函数对象的bind()..

2020-09-14 22:00:50 544

原创 react中setState的用法（学习react过程中的笔记）

react中setState的用法setState()更新状态的2种写法1). setState(updater, [callback]), updater为返回stateChange对象的函数: (state, props) => stateChange 接收的state和props被保证为最新的2). setState(stateChange, [callback]) stateChange为对象, callback是可选的回调函数, 在状态更新且界面

2020-09-11 22:24:43 562

原创 js中动态展示icon图片

let docHead = document.getElementsByTagName('head')[0];let newLink = document.getElementsByTagName('link');newLink[0].outerHTML = "<link rel='shortcut icon' href='/assets/images/" + icoImg + "'>"

2020-09-08 22:25:46 931

原创前端实现元素水平垂直居中的4种常用方式

前端实现元素水平垂直居中的4种常用方式方式一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素水平垂直居中</title></head><s

2020-09-08 22:03:48 786

原创 react中componentWillReceiveProps(nextProps)生命周期函数的理解

在react的componentWillReceiveProps(nextProps)生命周期中，可以在子组件的render函数执行前，通过this.props获取旧的属性，通过nextProps获取新的props，对比两次props是否相同，从而更新子组件自己的state。这样的好处是，可以将数据请求放在这里进行执行，需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。

2020-08-28 13:30:36 3000

原创 koa学习笔记

一.koa框架介绍Node.js 是一个异步的世界，官方 API 支持的都是 callback 形式的异步编程模型，这会带来许多问题，例如：1、callback 嵌套问题 2、异步函数中可能同步调用 callback 返回数据，带来不一致性。为了解决以上问题 Koa 出现了。Koa – 基于 Node.js 平台的下一代 web 开发框架koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，可以免除重复繁琐的回调

2020-08-24 20:15:02 215 1

原创 node学习笔记

一.Nodejs介绍Node.js是什么？Node.js 诞生于 2009 年，由 Joyent 的员工 Ryan Dahl 开发而成, 目前官网最新版本已经更新到 12.0.0版本，最新稳定的是10.15.3。Node.js 不是一门语言也不是框架，它只是基于 Google V8 引擎的 JavaScript 运行时环境，同时结合 Libuv 扩展了 JavaScript 功能，使之支持 io、fs 等只有语言才有的特性，使得 JavaScript 能够同时具有 DOM 操作(浏览器)和 I/O、

2020-08-24 20:14:28 109

原创 React 路由、Redux、React-Redux

一、React 路由安装：npm install react-router-dom --saveReactRouter三大组件：Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器。Route:路由规则匹配组件，显示当前规则对应的组件Link:路由跳转的组件注意：如果要精确匹配，那么可以在route上设置exact属性。二、Redux介绍Redux 是 JavaScript 状态容器，提供项目中的状态管理。redux的三个重要概念：store: 数据仓库a

2020-08-24 20:14:00 256

原创 react学习笔记

创建项目1.安装脚手架Create React App。npm install -g create-react-app2.创建项目create-react-app reactapp(项目名称可以自定义)React Jsx1、JSX执行更快，编译为JavaScript代码时进行优化2、类型更安全，编译过程如果出错就不能编译，及时发现错误注意：1、JSX必须要有根节点。2、正常的普通HTML元素要小写。如果是大写，默认认为是组件。JSX表达式1、中间如果需要插入变量用{}2、{}中间可

2020-08-24 20:12:01 141

react中Father.js

空空如也