前端
关注
分享
扫一扫
前端
芒果终结者
。。。。。。。。。
展开
-
xlsx冻结单元格
其实SheetJs也是支持修改导出文件的样式的，不过是在它的专业版中， SheetJs 分为社区版和专业版，社区版是开源的，但是却不支持修改导出文件的样式，专业版拥有更多的功能，这其中就包括修改样式，但是如果需要使用专业版，要邮件联系SheetJS 的开发者，去咨询价格，购买它。文件，并且对导出文件的样式进行一些修改，比如颜色、字体、合并单元格等，所以我找到了xlsx-style这个项目，它可以对导出的。xlsx版本不同，改造的文件内容也是不用的，不过改动的地点都差不多，下面针对不同版本的改造进行说明。原创 2023-10-11 17:54:49 · 1277 阅读 · 3 评论 -
获取树形选中的节点的定级节点和父级节点
【代码】获取树形选中的节点的定级节点和父级节点。原创 2023-05-04 17:10:09 · 340 阅读 · 1 评论 -
mac真机调试h5攻略
对于mac，需要安装android和adb配置，才可以在chrome的调试工具中看到将要调试的页面。安装后需要配置adb，参考以下文章：https://www.jianshu.com/p/61339291c9e2。如果查看手机设备时，已添加的设备不是devices，而是【command not found: adb】，则需要刷新环境变量【source .bash_profile】。如果第一次配置环境变量，则该文档应该是空的。该命令的作用是如果不存在.bash_profile文件，则创建该文件；原创 2023-04-27 17:02:41 · 2944 阅读 · 0 评论 -
vconsole调试工具报错及解决方案
第一次遇见调试工具报错，无法正常使用，后来经过真机调试，发现是服务端开启了安全模式openSecurity=true, vconsole无法写入style,导致js报错。vue h5项目，想在手机上调试，装了vconsole调试工具，打包部署后发现在苹果手机上显示正常，在安卓手机上显示异常：底部显示了。2. 将npm install vconsole 改为 通过cdn方式引入vconsole, 样式通过style src 引入。1. 关闭openSecurity。原创 2023-04-27 16:00:53 · 2276 阅读 · 0 评论 -
性能分析收藏地址
Chrome的Performance面板 - 简书如何监控 JavaScript Web 应用内存及内存问题初解_WJP丶的博客-优快云博客javascript 释放内存（js如何释放闭包内存）_小熊移动原创 2023-03-13 09:57:00 · 109 阅读 · 0 评论 -
排查Javascript内存泄漏
简单总结一下排查内存泄漏的常见流程： 1. 用performance面板记录操作一段时间内的内存变化，找出可能发生内存泄漏的操作。2. 用“three snapshot”技巧，记录下发生泄漏前后的内存快照 3. 用comparison视图对泄漏前后的内存快照进行比较，找出泄漏的对象。4. 重点关注 Vue Component, Detached HTMLDivElement等Constructor。希望这篇文章对同样在排查内存泄漏问题的你有所帮助 :)转载 2023-03-13 09:46:02 · 824 阅读 · 0 评论 -
单行文字垂直居中和多行文字正常的功能实现
点击切换单行文字和多行文字显示，要求单行垂直居中和多行文字正常原创 2022-07-22 09:37:53 · 224 阅读 · 0 评论 -
requestAnimationFrame实现由快到慢的锚点定位滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>锚点定位</title> <style> * { margin: 0; padding: 0; } .tops { position: fixed; top: 0; le.原创 2022-03-09 16:23:08 · 651 阅读 · 0 评论 -
原型和原型链
原型JS声明构造函数(用来实例化对象的函数)时，会在内存中创建一个对应的对象，这个对象就是原函数的原型原型规则1. 所有的引用类型（数组、对象、函数）都具有对象特性，即可自由扩展属性（除了“null”以外）var obj = {}; obj.a = 100;var arr = []; arr.a = 100;function fn() {}fn.a = 1002. 所有的引用类型（数组、对象、函数） 都有一个__proto__属性(隐式原型)，属性值是一个普通的对象// 继原创 2022-02-26 18:17:03 · 184 阅读 · 1 评论 -
qiankun报错调试小技巧
有时候single-spa可能会报一些我们现在无法理解的错误，我们可能需要去做代码调试，阅读源码时碰到不理解的地方也需要编写示例 + 单步调试，但是默认的是已经打包压缩后的代码，不太方便做这些，大家可以在node_modules目录找到single-spa目录，把目录下的package.json中的module字段的值改为lib/single-spa.dev.js，这是一个未压缩的bundle，利于代码的阅读的调试，当然需要重启应用。====================================原创 2022-01-20 09:56:07 · 1158 阅读 · 0 评论 -
mac安装nvm-sh
如果之前安装了nodejs，需要先卸载nodejs卸载命令：1，命令行输入：which node #查看node安装位置，一般都在/usr/local/node2，命令行输入：sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}安装nvmcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/in原创 2022-01-19 14:20:59 · 1316 阅读 · 0 评论 -
chrome真机调试Android
1. 打开Android手机的调试模式将手机与电脑用数据线连接，确保电脑上安装了手机的驱动，手机打开调试模式2.打开chrome, 输入网址： chrome://inspect/#devices点击inspect按钮，会弹出一个新的窗口，上面会显示手机上的页面如果打开白屏，可以尝试下翻墙或代理...原创 2021-11-18 15:38:29 · 3279 阅读 · 0 评论 -
chrome真机调试ios
chrome真机调试ios原创 2021-11-18 15:18:38 · 4927 阅读 · 1 评论 -
Node.js REPL(交互式解释器)
Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境，类似 Window 系统的终端或 Unix/Linux shell，我们可以在终端中输入命令，并接收系统的响应。Node 自带了交互式解释器，可以执行以下任务： 读取- 读取用户输入，解析输入的 Javascript 数据结构并存储在内存中。 执行- 执行输入的数据结构 打印- 输出结果 循环- 循环操作以上步骤直到用户两次按下ctrl-c按钮退出。或输...原创 2021-11-17 15:26:00 · 810 阅读 · 0 评论 -
Axios取消请求 - CancelToken
Axios官网axios中文文档|axios中文网 | axios (axios-js.com)http://www.axios-js.com/zh-cn/docs/#%E5%8F%96%E6%B6%88案例：import request from '@/utils/request'import axios from 'axios'export function queryUserInfo(data, _this) { const CancelToken= axios.CancelTok原创 2021-09-28 13:12:03 · 261 阅读 · 0 评论 -
vue lib 打包后的cdn引用
<!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>Wb.原创 2021-06-08 13:46:03 · 258 阅读 · 0 评论 -
GIT 创建VUE-CLI项目遇到上下选择失效问题
GIT 创建VUE-CLI项目遇到上下选择失效问题vue create 项目名称改成winpty vue.cmd create 项目名称原创 2021-05-27 10:18:09 · 371 阅读 · 0 评论 -
vue项目npm run serve启动成功，但页面报Vue is not defined的解决方案
vue项目，npm run serve运行成功，但在浏览器上输入地址，报Vue is not defined错误原因是把通过cdn引入的文件给拆分了单个字符，如下图出现问题的原因：public/index.html文件里面，使用cdn加载js的代码是这样的//public/index.html<!-- 使用CDN的JS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn &&原创 2021-05-25 13:17:41 · 4664 阅读 · 3 评论 -
解决ie浏览器el-select选择后出现光标的问题
使用element-ui中的el-select, 作为切换当前用户的状态（在线，忙碌，离开），在chrome浏览器下显示是正常的，但在ie（11）浏览器下，切换用户状态后，会出现光标闪烁的问题，如下图，‘忙碌’后面是闪烁的光标解决方案：因为是input引起的，我们只需要给input加上UNSELECTABLE属性，让UNSELECTABLE=“on”即可，这里我们不用ref获取dom，使用id，可以直接定位到input, 直接给input添加属性。代码如下：<el-select原创 2021-05-20 15:57:09 · 2623 阅读 · 0 评论 -
在函数组件中使用react-redux
创建redux/hooks.ts文件import {useSelector as useReduxSelector, TypedUseSelectorHook} from 'react-redux';import { RootState } from './store';export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector;store.js文件const store = cr原创 2021-04-22 18:19:25 · 1402 阅读 · 0 评论 -
类组件中使用react-redux
react-redux 官网地址：https://react-redux.js.org/安装react-reduxnpm install react-redux在index.tsx文件中，引入react-reduximport store from './redux/store';import {Provider} from 'react-redux';ReactDOM.render( <React.StrictMode> <Provider sto.原创 2021-04-22 17:28:45 · 1032 阅读 · 0 评论 -
redux的使用
设计思想（1）Web 应用是一个状态机，视图与状态是一一对应的。（2）所有的状态，保存在一个对象里面。基本原则整个应用只有唯一一个可信数据源，也就是只有一个 Store State 只能通过触发 Action 来更改 State 的更改必须写成纯函数，也就是每次更改总是返回一个新的 State，在 Redux 里这种函数称为 ReducerRedux工作流store 数据仓库，通过createStore创建状态树store，通过订阅store.subscribe将stat.原创 2021-04-22 12:47:07 · 218 阅读 · 0 评论 -
react event事件
event.target 事件发生的元素event.currentTarget 事件处理绑定的元素示例：import React from 'react';import style from './ShoppingCart.module.css';import { FiShoppingCart } from "react-icons/fi";interface Props{}interface State{ isOpen : boolean;}class S...原创 2021-04-16 17:49:47 · 432 阅读 · 0 评论 -
css module模组化
使用react最大的优势就是模组化，何为模组化，就是每个jsx或者tsx文件就被视为一个独立存在的原件，原件所包含的所有内容也同样都应该是独立存在的。但是如果我们只是使用一个简单的import关键词来import整个css文件，将会直接引入整个文件，而不是按需加载，这样处理就极有可能对css造成全局污染或者冲突，从而就无法达到我们组件化的目的了。那么从组件的角度我们应该怎么处理呢？很简单，我们只需要把import './index.css'换成 import style from './index.原创 2021-04-16 12:44:32 · 862 阅读 · 1 评论 -
给一个已经存在的react项目添加ts支持
比如一个已经存在的react项目my-appcd到my-app项目目录cd my-appnpm install --save typescript @types/node @types/react @types/react-dom @types/jest安装好依赖包后，讲my-app项目目录下的 js 文件的后缀 js 改为 tsx 就可以了...原创 2021-04-16 10:51:21 · 1984 阅读 · 0 评论 -
tsconfig配置文件讲解
搭建基于ts的react项目后，可以看到项目目录下有个tsconfig.json文件打开这个tsconfig.json{ "compilerOptions": { "noImplicitAny": false, //不需要显示的声明变量的类型any "target": "es5", //编译后的目标javascript版本， ES5, ES6/ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ESNext "lib":原创 2021-04-16 10:41:18 · 5863 阅读 · 0 评论 -
webpackChunkName
/*webpackChunkName:"register"*/ 代码分隔出来的js文件名constRegister=lazy(()=>import(/*webpackChunkName:"register"*/'./views/register'));原创 2021-04-15 18:11:41 · 3828 阅读 · 0 评论 -
react配置homepage并去掉sourcemap
打包build生成的文件index.html，里面的默认的路径是跟目录/ ，如果想改变路径，可以配置homepage配置homepagepackage.json文件，添加"homepage":"./"如果不想生成打包的map文件，可以将package.json文件中的nodescripts/build.js 修改为 setGENERATE_SOURCEMAP=false&&nodescripts/build.js（注意：false和&&之间不能有空格...原创 2021-04-15 18:08:03 · 1261 阅读 · 1 评论 -
react创建新项目
npm install -g create-react-app 全局安装create-react-app reactproject 新建并对react项目进行命名（注:项目名称不能有大写）或者npx create-react-app reactproject 新建并对react项目进行命名（注:项目名称不能有大写）新建项目中报错：原因：网络原因，解决办法：//换源npm config set registry https://registry.npm...原创 2021-04-15 17:52:26 · 132 阅读 · 0 评论 -
web移动端真机调试工具
web移动端真机上调试的两种工具：1. vconsole直接在html页面中引入vConsole的JS文件<script src="vconsole.min.js"></script><script> // 初始化vConsole var vConsole = new VConsole(); console.log('hellocode')</script>页面会出现vConsole小图标，原创 2021-03-19 11:46:41 · 605 阅读 · 0 评论 -
vue 渲染大数据优化方案
思路减少对DOM节点的渲染，通过滚动函数节流实现滚动后事件来动态渲染数据一、Vue自定义指令 （通过自定义指令隐藏数据）二、使用 pl table(轻松解决1w+数据量)链接：https://www.jianshu.com/p/714ac44da077vxe-table文档：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api演示：https://xuliangzhan_admin.gitee.io/vxe-table/..原创 2021-03-18 13:55:16 · 1347 阅读 · 0 评论 -
vue-awesome-swiper遇到的坑
1. 自动删了部分依赖包，导致运行失败通过cnpm install swiper vue-awesome-swiper --save 安装的是最新版本vue-awesome-swiper 4.1.1swiper 6.4.15安装后 npm run dev 运行失败，原因是安装swiper vue-awesome-swiper依赖包的过程中自动把node-sass，axios，vuex依赖包自动删除了解放方法：重新安装node-sass，axios，vuex依赖包就好了2.不能..原创 2021-02-26 11:12:04 · 804 阅读 · 0 评论 -
webpack 入口与输出
配置文件webpack.config.js中引入node的path模块const path = require('path')const config = { entry:'./src/index.js', output: { path: path.join(__dirname,'./dist'), filename: 'bundle.js' }}module.exports = config入口 entry输出output中原创 2021-01-26 16:15:28 · 128 阅读 · 0 评论 -
创建nodejs空项目
1.创建nodejs空项目npm init -y创建后在文件夹内生成一个package.json文件，里面是默认的一些配置信息{ "name": "webpack_demo", "version": "1.0.0", "description": "webpackdemo", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1"原创 2021-01-26 15:35:59 · 1128 阅读 · 0 评论 -
vue chrome devtools调试工具的安装
在vue官网 我们找到 Cookbook页面 中的‘替代方案’鼠标点击红框里的 【chrome版本】，打开的地址是这样的:https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd如果打不开连接，可以复制【nhdogjmejiglipccpnnnanhbledajbpd】，这个是chrome上devtools扩展的id然后打开https://chrome-ext..原创 2020-11-20 14:27:13 · 1545 阅读 · 0 评论 -
vue的三种跳转方式
1.跳转方式1.1直接跳转to里边写上跳转的路径<router-linkto="/team">跳转方式1</router-link>1.2. 动态跳转<router-link:to="{name:'team',params:{userId:123}}">跳转方式2</router-link><router-link :to="{name:'team', params:{userId:456}, query:{plan:'...原创 2020-11-20 11:50:49 · 2670 阅读 · 0 评论 -
css加载顺序
css样式默认加载顺序：样式表的元素选择器选择越精确，则其中的样式优先级越高。id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式。对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高。就可以先加载相应的块。...原创 2020-11-18 10:28:41 · 449 阅读 · 1 评论 -
CSRF跨站请求伪造原理和防御
如何进行：当你在某网页登录后，在没有关闭网页的情况下，收到别人的链接。例如：http://xxx.xxx.xxx.xxx/dva/csrf/?password_new=1&password_conf=1&Change=Change# 点击链接，会利用浏览器的cookie把密码改掉。主要原理：在没有关闭相关网页的情况下，点击其他人发来的CSRF链接，利用客户端的cookie直接向服务器发送请求。防御手段：检测RefererAnti-CSRF token机制业务上要求原创 2020-11-17 14:25:53 · 177 阅读 · 0 评论 -
cookie, localStorage, sessionStorage的区别和使用
cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否已经登录过该网站。localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在。sessionStorage：当用户的浏览器窗口关闭时，数据会被清除。创建和访问localStorage：//1 设置数据let forgetData = {phone:vm.phone};localStorage.setItem("forget原创 2020-11-17 14:00:42 · 153 阅读 · 0 评论 -
vue头部保持不动，尾部一直在最底部
需求：想头部保持不动，当滚动条下拉到一定高度的时候，头部固定不动；当滚动条下拉小于一定高度的时候，头部恢复到正常的文档流里。实现方法：1.使用动态class<div class="g-header-container" :class="{'fixed': isFixed}"> <c-header /></div><div class="g-view-container" ref="scrollOne"> <r原创 2020-11-13 18:45:47 · 2867 阅读 · 0 评论