- 博客(51)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 去除滚动条
chrome.div::-webkit-scrollbar { display: none;}火狐.div { scrollbar-width: none;}IE.div { -ms-overflow-style: none;}
2022-02-15 17:25:49
395
转载 Git配置教程: 同时配置github和gitlab的SSH
1.首先，要找到位于用户下的.ssh文件cd ~/.ssh2.然后, 需要设置全局的name和email(这里注意,哪个常用设置哪个,我是公司常用,就设置的公司的)git config --global user.name 'xxx'git config --global user.email '[email protected]'3.接下来, 开始生成秘钥文件. 这里直接两个都生成一下ssh-keygen -t rsa -C '[email protected]' // GitLab// Ent
2021-12-23 13:55:28
2060
1
转载 【React】Hooks入门教程（二、React最常用的四种钩子）
这个 API 是 React 的未来，有必要深入理解。本文谈谈我的理解，简单介绍它的用法，帮助大家快速上手。阅读本文需要有 React 基础。如果你还没学会 React，可以先看一下它的教程。[更新] 我后来又写了一篇《轻松学会 React 钩子：以 useEffect() 为例》，补充了对 Hooks 设计思想的解释，建议大家可以先阅读那篇文章。一、组件类的缺点React 的核心是组件。v16.8 版本之前，组件的标准写法是类（class）。下面是一个简单的组件类。import React.
2021-12-13 10:43:43
510
转载 【React】Hooks入门教程（一、轻松学会React钩子）
我本来不想碰它们了，觉得框架一直在升级，教程写出来就会过时。但是，最近我逐渐体会到 React 钩子（hooks）非常好用，重新认识了 React 这个框架，觉得应该补上关于钩子的部分。下面就来谈谈，怎样正确理解钩子，并且深入剖析最重要的钩子之一的useEffect()。内容会尽量通俗，让不熟悉 React 的朋友也能看懂。欢迎大家参考我以前写的《React 框架入门》和《React 最常用的四个钩子》。一、React 的两套 API以前，React API 只有一套，现在有两套：类（clas.
2021-12-13 10:36:53
677
原创 iPad刷机的简洁教程（忘记密码怎么办？）
需要准备的硬件：电脑，IPad，数据线（可以连接电脑和IPad的带有USB头那种）需要准备的软件：iTunes、IPad固件1、iTunes下载 官网2、ITunes识别到IPad安装完成后打开ITunes，长按IPad的Home键的同时将数据线连接电脑3、在百度搜索下载IPad固件提供一种较快的下载途径：下载爱思助手进行固件下载（助手建议只下载固件，刷机到官方的ITunes进行）4、回到ITunes，同时shift + 恢复：长按电脑的shift键的同时点击恢复按钮 - 出现文件弹
2021-11-29 13:56:27
14833
转载 Dva: loading模块引入及实践
dva 中页面过渡效果封装的很好，下面介绍常用的两个 js 库。之前对 dva-loading 理解存在误区，认为只要在 index.js 中配置一下就没事了，事实上 dva-loading 只是提供当前异步加载方法的状态（异步加载中状态为 true，异步加载完成状态为 false），对应加载样式由各自组件自己控制，如：Antd 中 Table 组件自身的 loading 属性。并添加完整流程示例代码。一、过渡组件 dva-loading传统做法比如请求一个用户页面，刚进去的时候由于要去服务器请求数
2021-11-23 13:55:37
1269
转载 debounce函数的相关实例分析（实现防抖动）
一、前言以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。window对象的resize、scroll事件拖拽时的mousemove事件射击游戏中的mousedown、keydown事件文字输入、自动完成的keyup事件实际上对于window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法。
2021-11-23 10:17:59
443
原创 classnames工具的使用（实现样式的条件控制）
classNames参考资料 - https://www.npmjs.com/package/classnamesUsage with React.jsThis package is the official replacement for classSet, which was originally shipped in the React.js Addons bundle.这个包是 classSet 的正式代替，classSet 是最初应用于 reactjs 的扩展包。One of its p
2021-11-22 16:56:33
864
原创 setState机制、源码以及回调用法
1. setState定义setState作为react中的重要部分，将对组件 state 的更改排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式。2. setState是同步还是异步？setState只在合成事件和钩子函数、生命周期函数中是“异步”的，在原生事件和setTimeout 中都是同步的setState很多时候并不是立即执行，所以在setState之后立即调用state可能不会得到理想的
2021-11-22 15:47:07
1799
转载 react.js antd-table 可编辑表格验证
最近做需求,需要在一个表格里编辑字段,验证提交.项目用的是antd的组件,看了下table组件,官网有给编辑的例子,好咧,拿过来用了下,发现问题.官网的实现写得很复杂,而且最主要的一点是只能在输入框获取焦点时调验证规则.但是在表格外面不能调用验证方法调用.与实际需求不符合,于是自己写了一个,记录下来。需求: 表格输入时验证字段,提交时点击验证字段主要思路: 先写好字段验证错误的样式,设置一个字段,通过字段动态增加样式来实现验证提示的效果这个表格是放在一个弹框里的,弹框组件updateForm.ts
2021-11-15 16:46:10
1375
原创 Refs 访问 DOM 节点
什么是RefsRefs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。DOM节点获取焦点以下代码实现：点击按钮，Input框获取焦点class CustomTextInput extends React.Component { constructor(props) { super(props); // 创建一个 ref 来存储 textInput 的 DOM 元素 this.textInput = React.createRef()
2021-11-15 16:36:18
571
原创 浏览器网页宽高汇总（offsetwidth、clientwidth、scrollwidth...）
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:
2021-11-11 15:17:33
320
转载 Git教程：cherry-pick 实现部分提交整合到其他分支
git cherry-pick 教程对于多分支的代码库，将代码从一个分支转移到另一个分支是常见需求。这时分两种情况。一种情况是，你需要另一个分支的所有代码变动，那么就采用合并（git merge）。另一种情况是，你只需要部分代码变动（某几个提交），这时可以采用 Cherry pick。一、基本用法git cherry-pick命令的作用，就是将指定的提交（commit）应用于其他分支。$ git cherry-pick <commitHash>上面命令就会将指定的提交commitH
2021-11-08 14:16:10
4150
原创 JS实现表格的添加，删除，搜索和排序
代码<!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>.
2021-11-05 17:22:47
344
原创 mongodb安装以及错误解决
一、安装下载社区版mongodb – 点击进入社区版块下载download点击下载安装注意选择custom自定义安装选择【安装路径】如图所示打勾，写上【service name】写上路径可视化工具不勾选安装完成后出现这条提示，点击ignore配置环境变量...
2021-10-22 15:00:58
2525
转载 json对象数组的创建、遍历、添加、删除、修改、js的splice()用法
1 创建 （1）第一种方式：常见项目ajax调用后返回的都是json对象数组 （2）第二种方式：手动构造json对象数组 2 遍历：共四种方法 （1）$.each() （2）forEach （3）for in （4）for 3 添加：共三种方法 （1）在json对象数组的末尾添加一个json对象 （2）在json对象数组的最前面添加...
2021-10-20 10:20:38
1875
原创 express第一部分：安装和使用
基于nodejs的web开发框架了解一个框架的开始。看一眼express的新手指南 guide.html或者直接跳过看我下方的总结。开始使用express1. 手动创建模板新建目录myapp$ mkdir myapp目录下新建文件package.json，写入代码:{ "name": "myapp", "description": "my first express app", "version": "0.0.1", "private": true, "depende
2021-10-15 14:00:54
139
转载 Buffer对象
Buffer对象1. 概论2. 与二进制数组的关系3. 迭代器4. Buffer构造函数5. 类的方法Buffer.isEncoding(encoding)Buffer.isBuffer(obj)Buffer.byteLength(string[, encoding])Buffer.concat(list[, totalLength])6. 实例属性length7. 实例方法write()slice()toString()toJSON()1. 概论Buffer对象是Node处理二进制数据的一个接口。它是
2021-10-09 13:18:14
374
原创 React及时更新状态
问题：在dispatch请求接口数据 或者 更新state状态的时候，更新不及时，导致后方代码对该数据进行操作时出现错误。做法：//1在你想及时更新的代码外层套一个setTimeout，时间设置为0该方法将内代码放在进程的最后执行，执行完毕后才进行下一步操作。setTimeout(()=>{ this.setState({ }) this.props.dispatch({ })},0)//2状态更新之后，在后方使用新状态的地方重新获取数据（在页面不刷新的状态下，通过重新this
2021-08-20 18:10:33
893
原创 2021-07-20 项目 - 关于Antd表单校验
简要的说明一下项目中用到的校验前提紧要：React，Antd3.0，表单校验用Form.create({1})(2)包装组件1: 附加的配置项在1中写入 name:'Doctor_self'，那么包装组件中的表单字段id就有了Doctor_self前缀详见 Form-API2: 组件名const App = Form.create({ name: 'Doctor_self' })(Doctor);export default App;包装之后，组件就有了this.props.form下
2021-07-20 17:56:14
320
转载 2021-07-16 转载 - UmiJS应用框架
UmiJS应用框架介绍umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，目前内外部加起来已有 50+ 的插件。特性开箱即用，内置 react、react-router 等 类 next.js 且功能完备的路由约定，同时支持配置的路由方式完善的插件体系，覆盖从源
2021-07-16 11:27:26
296
原创 2021/07/05 Error - Vue网络图片加载失败问题
图片防盗链一、原理先说说防盗链的原理，http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referer。图片服务器通过检测 Referer 是否来自规定域名，来进行防盗链。如果盗用网站是 https 的 protocol，而图片链接是 http 的话，则从 https 向 http 发起的请求会因为安全性的规定，而不带 referer，从而实现防盗链的绕过。比如现在在 cnode 这里，由于我们启用了 https，所以任何 http 的图片几乎都可以直接贴过来并显示了。官
2021-07-05 17:35:52
360
原创 2020/07/01 Vue - 一直在更新
首先，我们先了解一个.vue页面的组成<template> 模板部分：这个页面的html部分</template><script> js部分: 引入，以及数据处理部分</script><style> css部分：样式</style>重点了解script标签里面的相关内容<script>import { dataSource } from '../assets/js/dataSour
2021-07-05 16:37:12
95
原创 2021/07/01 Error - less版本过高
Vue 安装less和less-loader之后运行，出现如下问题：less和less-loader的版本不匹配把less-loader的版本降到 5.0.0 解决问题直接覆盖yarn add less-loader@^5.0.0
2021-07-01 15:08:41
165
原创 2021/06/28 Error - 因为在此系统上禁止运行脚本powershell
运行工具：vscode错误步骤：用cpm和yarn安装依赖时发生错误解决方法：在vscode的终端中输入意思为按照提示设置当前作用域的使用者Set-ExecutionPolicy -Scope CurrentUser请为以下参数提供值”时，输入remotesigned如果以上方法不管用，可以尝试以管理员方式打开powershell进行操作，网上都有教程。但是这个方法对我的问题不管用。...
2021-06-28 14:54:03
118
原创 2021/06/22 JavaScript
Javascript –1.基本变量Number String Boolean Undefined Null2.引用类型Object类型 Array类型 Date类型 RegExp类型 Function类型 基本包装类型（Number，Boolean，String）3.正则表达式语法：new RegExp(pattern/modifiers);/pattern/modifiers;用法:var patt = new RegExp(“e”);document.write(patt.
2021-06-22 17:23:15
85
转载 2021/06/21 JavaScript - DOM和BOM学习
JavaScript 的组成 ECMAScript ，DOM，BOM。DOM：文档对象BOM：浏览器对象 ，对浏览器对象进行操作一、浏览器对象JavaScript可以获取浏览器提供的很多对象，并进行操作window不仅作为全局作用域，而且表示浏览器窗口window的属性 :1.innerWidth 和 innerHeight ：浏览器内部的宽高，去除菜单栏工具栏和边框的元素后，网页的净宽高。2.outerWidth 和 outerHeigth ：浏览器的全部宽高window的方法：w
2021-06-21 17:05:06
131
原创 Tip: appendChild能添加id节点不能添加class节点集合
<script> //1 function $( s ) { return document.getElementsByClassName( s ); }; //2 function $$( s ) { return document.getElementById( s ); } function LoadIframe () { var newIframeObject = document.createElement( "IFRAME" );
2021-06-21 14:23:35
291
原创 从零快速打开一个Python项目
目录1. 下载Python2. 安装Python3. 配置环境4. CMD进入python5. pip更新&下载依赖6. 运行py文件1. 下载Pythonpython 3.7.3的链接https://www.python.org/downloads/release/python-373/进入页面下滑到最底下Files部分，选择相应版本点击下载64位的window选择以下版本2. 安装Python点击下载完成的exe文件进行安装，全部默认下一步就可3. 配置环境右击此电脑
2021-03-10 13:21:57
962
原创 Tip -- 加粗字体 打印出来后不显示加粗
屏幕中显示正常，打印出来却不是粗体了。在保证没有拼写错误的前提下，有可能在公共样式中把标签初始化成了font-weight:normal只要在公共样式文件中进行修改就可以了。❀
2021-02-24 10:40:09
2851
原创 DangerouslySetInnerHTML
Dangerously Set innerHTML用于在代码中插入一段HTML不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击 的原因之一。我们的设计哲学是让确保安全应该是简单的，开发者在执行“不安全”的操作的时候应该清楚地知道他们自己的意图。 dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的，以此来警告，它的 prop 值（ 一个对
2021-02-05 13:16:42
2176
转载 React路由传参 -- ( params, query, state, search)
1.params<Route path='/path/:name' component={Path}/><link to="/path/2">xxx</Link>this.props.history.push({pathname:"/path/" + name});读取参数用:this.props.match.params.name优势 ： 刷新地址栏，参数依然存在缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。2.query<
2021-02-05 10:25:55
3923
2
原创 前端5 --- windows 对象
在JavaScript中，一个浏览器窗口就是一个window对象（这句话很重要）。图中有3个窗口，也就是3个不同的window对象。 简单来说，JavaScript会把一个窗口看成一个对象，这样我们就可以用这个对象的属性和方法来操作这个窗口。实际上，我们每次打开一个页面时，浏览器都会自动为这个页面创建一个window对象。 window对象存放了这个页面的所有信息，为了更好分类处理这些信息，window对象下面又分为很多对象，如下图所示。window对象下的子对象子对象说明
2021-01-18 14:42:49
677
原创 文本在DIV中垂直居中显示
1 图片为了看清楚结构，加了黑色边框2 代码*{ background-attachment: fixed;}img{ float: left; width:30px; height: 30px; overflow: hidden; padding:10px; border:1px solid #000;}.all-wraper{ display: inline-block; background-color: #fff
2021-01-15 17:40:33
207
1
转载 webpack究竟做了什么
今时今日，做前端不用个webpack好像都被时代抛弃了一样，每天开发的时候npm run dev，该上线了npm run build，反正执行个命令刷刷地就打包好了，你根本无需知道执行命令之后整个过程究竟干了什么。webpack就像个黑盒，你得小心翼翼遵循它的配置行事，配好了就万幸。这使得我很长一段时间以来，都对webpack毕恭毕敬，能跑起来的代码就是最好的代码，千万别乱动配置。终于有一天，我忍不住要搞清楚webpack究竟做了什么。我们为什么需要webpack去搞清楚webpack做了什么之前
2021-01-15 11:30:18
404
原创 Redux --- 简单实现一个todoList (4) --- redux-thunk中间件
比如在Dispatch一个Action之后，到达reducer之前，进行一些额外的操作，就需要用到middleware（中间件）。在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告，调用异步接口或者路由。目的有了react-thunk后，我们可以把 TodoList.js 中的 componentDidMount 业务逻辑放到这里来编写。也就是把向后台请求数据的代码放到actionCreators.js文件里。这样所有的业务逻辑都在redux中，方便集中管理。步骤1安装yarn a.
2021-01-11 15:38:47
108
原创 Redux ---简单实现一个todolist (3) - 用axios获取数据
之前的列表数据在reducer中写死了。这篇文章药实现从后端接口获取了数据，如何可以放到Redux的store中。1用 mockAPI 模拟出数据,复制地址https://5f48b1de57a10f001600ddf3.mockapi.io/api/todoList21.在组件的生命周期中获取到以上数据 – 2. 通过action吧数据发送到reducer – 3. 在reducer中进行列表数据的初始化componentDidMount(){ axios.get("https
2021-01-11 14:05:41
139
原创 Redux ---简单实现一个todolist（2）
目的进行优化处理，将可以集中管理以及太过于冗杂的代码合并到一个文件目录在原来的基础上，/store新添加两个文件actionTypes 和actionCreator将所有的action的type移动到actionTypes把所欲的action的请求移动到actionCreator便于管理和修改代码actionTypesexport const CHANGE_INPUT = 'changeInput';export const ADD_ITEM = 'addItem';export c
2021-01-07 13:39:11
111
原创 Redux ---简单实现一个todolist (1)
目录其中 /store 包含index.js和reducer.js1首先完成没有任何功能的UI页面TodoListimport React from 'react'import {Input, Button,List } from 'antd';import store from './store'; //引入export default class TodoList extends React.Component { constructor(props){
2021-01-07 10:54:21
302
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人