- 博客(35)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 axios取消请求，解决接口返回顺序错乱问题
下面的方案适用于系统中的某个请求的取消，项目的请求使用axios封装使用场景：当页面有多个 tab，例如年、月、日的列表数据，当点击切换的时候要获取对应的数据，此时如果快速点击在tab直接反复横跳会出现下面的问题：重复请求，切换了tab旧的页面已经看不见，没必要存留如果使用同一套UI组件，只是数据的改变，异步的原因可能当前tab请求已经结束，然后旧的请求后结束，导致当前的页面的数据渲染出来对应不上tab使用了去解决这个问题，下面讲解如何去封装。
2024-04-07 11:09:11
586
原创 antd Table 动态数据 合并单元格（合并行）
最近处理table的时候 遇到了要合并同一列的几行的情况，比如第一列的前面三行都是同一个对象的名字，此时合并显示比较妥当，但是数据是后端接口来的，而且可以筛选条件，搜索出来的数据就是动态的长度，可能这次需要合并前面的五行， 在原有的静态数据的合并的基础上，需要加上一个合并的逻辑代码。，遇到需要合并的行，设置rowSpan的数量为需要合并的行总数，然后把后面的rowSpan设置为0（不渲染该位置），否则这个表格就会乱套。下面就是我们合并了 ‘分类’ 列下面的 【1,2】行 ，【4,5,6】 行。
2024-01-06 15:26:05
2767
原创 React 元素拖拽教程 react-dnd 实现拖拽
h5原生的拖拽处理起来过分的繁琐，而社区已经提供了成熟的库react-dnd来帮助我们实现这些细节，我们只需要关心业务逻辑即可。下面的内容主要是适用于单个元素的拖拽，从一个容器中拖入另外一个容器中，没有实现真正的DOM层面的运动，实际是通过拖拽的事件监听操纵数据层的变化，从而触发页面的渲染导致得更新，注意！没有真正的dom移动那么炫酷的效果一个完整的拖拽流程分为两部分：拖动+放置下面进行展示。
2024-01-04 21:15:36
1065
2
原创 div/canvas实现放大镜、图片局部放大效果
放大图片的需求，一般是在原有的渲染之上，额外添加一个放大框，当鼠标在原图上移动，放大框内就以当前的鼠标为中心，局部放大一定范围，在淘宝商城中是常有的实现。下面将用两种实现。1、使用divimage标签，原理是放大框中有一个图片，这个图片是放大后的，放大框大小固定，图片超出的部分隐层，只需要调整图片的位置即可2、使用两个canvas其中一个用于渲染原图，另外一个做放大框，通过找到鼠标在原图位置，再选择出需要放大的范围，通过canvas方法渲染到放大框中原图：这个可以下载下来去测试代码。
2023-06-08 17:08:54
2060
2
原创 umi 嵌套路由 redirect 报错 Maximum update depth exceeded
umi4 父路由直接跳转到指定的子路由，umi 嵌套路由 redirect 报错 Maximum update depth exceeded
2023-05-06 17:37:06
818
原创 react-router-dom v5 路由模块化
在项目中的 react-router 通常是需要模块化的，抽离出所有的路由配置，下面是在create-react-app中对路由进行模块化，实现嵌套路由的路由模块化
2023-02-01 13:52:48
203
原创 一行代码解决input框只能输入两位小数的数字
使用elementUI 的 <el-input>标签，然后在oninput事件中使用正则表达式<el-input v-model="msg.pay" oninput = 'value = (value.match(/^[0-9]+(\.[0-9]{0,2})?/g) ?? [""])[0]' />
2022-04-30 09:00:00
789
原创 JS函数复制文本内容到剪切板（兼容所有浏览器）
原理：创建input DOM节点再删除该节点，调用 document.execCommand("Copy"); 方法应用：当我们需要一个点击事件把 文本内容 复制到剪切板的时候，只需要在自己定义在工具类.js 文件中，引用一下就行，我定义在utils.js中src/utils/tool.js 中定义// 复制内容到剪切板, 成功返回trueexport function copyString(string){ if(!string) return false let dom = docume
2022-04-19 11:11:33
806
3
原创 前端项目使用Leaflet引入离线地图
前端引入地图（内网离线）由于网络等限制，可能需要对地图的展示、打点、显示等操作我们的步骤是下载瓦片地图，将瓦片地图静态文件放置在服务器引入绘制地图的第三方插件，这里使用 Leaflet，在Js代码中初始化地图按照 Leaflet 开发文档行事1、下载瓦片地图这一步让后端去操作，下载后mysql会多一张数据表，导出成瓦片地图放在服务器1.1 下载工具需要使用下载工具：MapDownloader链接: https://pan.baidu.com/s/1LOZdklEtkF5lqa9
2022-04-01 11:11:31
10511
38
原创 reac组件，Component 与 PureComponent
我们可以看到react提供了两种组件的类型，一开始学习的时候都是使用Component，但是React提供了另外一个 PureComponent， 纯组件，目的是： 优化渲染import React, { Component } from ‘react’;import React, { PureComponent } from ‘react’;Component在React Component的生命周期中，有一个shouldComponentUpdate方法。这个方法默认返回值是true。这意味
2022-03-30 16:41:02
1245
原创 Vue-router路由跳转 页面的状态保留 与 强制刷新页面
1、遇到的问题当我们使用 Vue 去实现一个比较大型的SPA单页面的应用时候，通常使用到了vue-router，此时会出现一种场景：左侧是菜单、右侧是页面内容，点击不同的菜单时有时候需要对页面的内容进行以下三种操作1. 保留状态（例如新增页面 需要保持状态）2. 刷新页面（列表页面）3. 根据情况进行 保留 或者 刷新（两种情况动态判断）对以上问题进行探讨，需要用到 vue-router 中的 <keep-alive> 标签 和 路由跳转携带参数 去解决问题。2、解决2.1 对.
2022-02-08 19:16:00
17404
4
原创 Vue自定义指令对页面内容鉴权
当我们使用vue写管理项目时候，经常会遇到需要对页面内的DOM节点进行鉴权的操作，常用的做法都是直接使用vuex 进行获取权限列表，今天觉得 太麻烦直接使用Vue 的自定义指令去做。直接在 main.js 文件中加入如下内容，通过去localstorage中拿到权限列表，这里不去Vuex中获取，因为我们刷新页面时候可能会重置vuex 仓库，丢失了权限，而且这样写就很方便，相当于全局自直接定义了一个方法（指令），直接在DOM挂载的生命周期去插入一些操作// 自定义指令Vue.directive('p.
2021-12-22 21:55:08
691
原创 React-hook 实现 todoList
前言初学 JS 的时候相信大家都写过一个经典案例 ：TodoList列表，曾经的也用 React 重写过，这次要用 React Hook 函数组件去实现了。去Github 上把代码拉下来 ???? react-hook-todolist// 1、clonegit clone https://github.com/chen-zuo/react-hooks-todoList.git// 2、进入文件夹cd react-hooks-todoList// 3、安装依赖npm i// 4、运行
2021-08-07 15:20:16
417
原创 React Hook 理解使用 useState、useEffect、useContext、useRef、自定义hook
React Hookreact hooks 的出现，是对 react 中无状态组件的一种升级，使得函数组件也能state 和 生命周期React Hooks 要解决的问题是状态共享，是继 render-props（渲染属性） 和 higher-order components（HOC；高阶组件） 之后的第三种状态逻辑复用方案，不会产生 JSX 嵌套地狱问题。1. useStatehooks 的能力，就是让我们在函数组件中使用 state, 就是通过 useState 来实现的const [
2021-07-28 11:35:35
1417
原创 Vue Vue-router 项目中报错Error: Avoided redundant navigation to current location: “/xxx“.的解决方案
vue-router 时出现路由冗余项目中报错 Error: Avoided redundant navigation to current location: “/xxx”. 的解决方案报错显示路由重复，对功能没有影响。router 文件下 index.js 中添加下面代码即可 // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 const originalPush = Router.prototype.push Router.prototype.
2021-06-24 09:42:49
197
原创 前端查看节点已绑定的 addEventListener监听事件
项目中一个节点绑定了多个监听事件 addEventListener ，由于害怕监听事件没有很好的去除，强迫症觉得万一浪费了内存多不好，想查看一下节点绑定了什么监听事件，无奈JS没有很好的方法去发现，Chrome DevTools命令行API提供了多种方式来观察和检查事件监听器使用monitorEvents()监听某一类型的事件。使用unmonitorEvents()停止监听。使用getEventListeners()获取DOM元素的监听器。使用Event Listeners Inspector(.
2021-06-23 18:26:23
5972
原创 Element-ui 的全局引入和按需引入
在项目中我们通常需要使用到 Element- UI 这个组件库，想要随时在任意页面使用我们需要在全局引入，而且其中的组件并不全是都能被使用到，于是根据需要可以仅引入部分组件以 Vue项目 为例全局引入在入口文件 main.js 中写，引入全部组件 // main.js import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; impor.
2021-06-22 11:48:51
6313
1
原创 微信小程序 实时监听this.data数据变化
在Vue中，对于state中的数据 Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：监听属性 watch。在小程序的开发工作中遇到了同样的情况：**需要对当前页面data中的某一个或者几个数据进行实时监听**如果能有一个通用方法进行监听，可以统一解决类似的问题。
2021-06-21 16:50:52
11485
原创 sockjs-node/info? resource: net::ERR_SSL_PROTOCOL_ERROR 报错
问题综述Vuecli3 npm run serve启动项目，然后就看到了控制台一直报错解决方案找到/node_modules/sockjs-client/dist/sockjs.js找到代码的 1605行 try { // self.xhr.send(payload); 把这里注掉 } catch (e) { self.emit('finish', 0, ''); self._cleanup(false); }解析sockjs-node 是一个J
2021-06-21 11:57:00
475
原创 vuex 入门
VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。调试工具：vue devtoolsVuex就像眼镜：您自会知道什么时候需要它。1、state在store中定义数据，在组件中直接使用：目录：store/index.jsexport default new Vuex.Store({ // state相当于组件中的data，专门用来存放全局的数据 state: { num: 0 }, getters: {}, mut
2021-06-07 11:44:46
82
原创 2021 前端面试题
2021 前端面试H5DTD的作用是什么？什么是怪异模式？什么是标准模式？二者有什么差别（举例）？产生的历史原因是什么？使用时需要注意什么？HTML5是什么？有哪些新特性？新增了哪些语义化标签？新增了哪些表单元素？和h5有啥关系？你是如何理解 HTML 语义化的？meta viewport 是做什么用的，怎么写？HTML 和 XHTML 有什么区别？使用 data-* 属性有什么用？<script>、<script async> 和 &l
2021-04-12 14:48:07
143
原创 React class组件、react-hook函数组件分别实现五子棋
react实现五子棋前言：使用create-react-app脚手架简单搭建，一共就用到一个组件：gobang.js，不用安装其他依赖，纯 js、css实现，组件代码放在最后了。分三步：1、画出了UI，棋盘棋子 。2、点击下棋落子。 3、落子后判断输赢效果如下目录结构1、画出UI在state中 初始化一个长度为20的得数组 border: Array(20).fill(null)通过数组去循环2次生成20*20的一个棋盘，在每个格子中放入一个<div className="
2021-04-08 20:48:28
834
原创 JavaScript高频手写题目（面试）
1 debouncefunction debounce(fun, wait = 2000) { let timer = 0; return function(...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { fun.aplly(this, args) }, wait) }}2 throttlefunction throttle(fun, wait= 2000){ let
2021-02-23 16:17:24
290
原创 dva数据流向（入门）
1、Dva全局架构.├── mock // mock数据文件夹├── node_modules ├── public ├── src │ ├── assets │ ├── components // 组件│ ├── models // dva最重要的文件夹，所有的数据交互及逻辑都写在这里│ ├── routes // 就是react中主要页面│ ├── services // 放请求借口方法的文件夹│ ├── utils│ ├── index.c
2021-02-23 16:09:52
1134
1
原创 redux入门，从单文件到项目结构到异步redux
1、配置 Redux配置Redux开发环境的最快方法是使用create-react-app工具。在开始之前，确保已经安装并更新了nodejs，npm和yarn。我们生成一个redux-shopping-cart项目并安装Redux：create-react-app redux-shopping-cartcd redux-shopping-cartyarn add redux # 或者npm install redux首先，删除src文件夹中除index.js以外的所有文件。打开index.js
2021-02-23 09:59:03
188
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人