- 博客(63)
- 收藏
- 关注
RSS订阅
原创 docker入门之部署前端项目，以create-react-app为例
1.github上先下载create-react-app的源码git clone https://github.com/facebook/create-react-app.git执行ls查看一下并cd 进入该项目.2.在项目根目录下创建Dockerfile文件,并编写以下内容vi Dockerfile // 创建文件编写内容：# node版本号FROM node:15-alpine# 工作目录WORKDIR /create-react-app# 添加所有文件到create-rea
2021-09-05 22:50:22
4267
6
原创 JS 根据对象的属性值进行排序
遇到了个bug,从后端拿到数据（对象且无序），需要图表x轴展示该数据值a。调用Object.values(),自动排好了序，刚开始没在意，测试的时候就出问题 了…于是就自己重新写了个排序，就记录一下~Object.values()：获取属性值，返回的是一个数组，用该方法获取的属性值有跟for…in一样的迭代顺序。其中for…in的迭代顺序跟执行环境有关系，并不是固定的按照某种（比如从大到小）方式来排序的。在对整数型数组进行排序时，不建议利用for…in的迭代顺序。因为如果涉及到增删改节点的话，使用for
2020-05-20 11:01:46
6996
8
原创 vscode 无法打开默认浏览器
大佬链接：https://blog.youkuaiyun.com/Ziskaa/article/details/98969807之前一直也是使用的VSCode，突然出现默认浏览器打不开的问题，记录一下以备不时之需嘻嘻嘻：在设置里面设置了默认浏览器也没用，解决办法：在扩展中找到open in …没有的需要自己先install。点击设置—》安装另一个版本选择1.1.0版本就可以了。...
2020-01-02 15:41:37
13533
8
原创 react 接入企业微信登录组件
执行命令yarn start，运行项目，将原本的127.0.0.1替换为可信域名https://18x.xxx.cn即可。把某web登录页替换成使用企业微信的扫码登录。成功安装CA会生成cert以及key两个文件。
2023-05-30 16:17:28
2051
原创 create-react-app运行报错：process is not defined
解决：安装依赖：react-error-overlay：6.0.9pakage.json为：详情可参考文档issue：https://github.com/facebook/create-react-app/issues/8238
2022-05-26 18:02:27
532
原创 create-react-app运行报错: JavaScript heap out of memory
背景： create-react-app搭建react项目，默认使用最新版本，react@18.0.2.自行改为17.0.2版本+配置less.使用pnpm下载依赖。start报错:FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory截图：大致是：node运行时， 内存溢出。找了一波 各种设置node内存，环境变量啥的 没用。最终有效解决方案为：
2022-05-26 17:52:55
1037
原创 react重新下载依赖报错：‘Link‘ cannot be used as a JSX component.
报错原因：启动老项目，执行reinstall成功之后（reinstall为项目自配置脚本：）项目可运行，但代码类型校验没通过，报错如下：f12查看定义类型的位置，从而定位到错误 是@types/react中类型报错，然后查看package.json中版本号为18.0.6：npm中查看这个包文件，18.0.6为最新刚发版的，大胆猜测一波，因为没固定版本号 在重新install的时候安装了最新版本，从而导致项目中跟最新版本的东西有些对不上，所以报错了。于是 在大胆解决一波，在package.jso
2022-05-05 22:37:49
4297
8
原创 js小tips：通过两个数组获取新的数组对象值
小tip~ 感觉经常用 随手记一下 也比较简单。实现要求： const newData = [{a: 3}, {b: 2}, {c: 1}, {d: 2}, {e: 1},] const enumObj = { a: '属性1', b: '属性2', c: '属性3', d: '属性4', e: '属性5', }; 通过传入newData，得到以下返回值： [ { name: '属性1', cur
2021-11-23 10:20:49
733
原创 npm i 报错：remote: HTTP Basic: Access denied
报错截图：没有权限，解决办法：1.git remote -v 看一下origin分支2. git ls-remote -h -t <鉴权失败的git仓库地址>3. 输入账号密码，确保正确，不要输错了这样就成功啦再运行一下git config --global credential.helper store 保存账户密码。...
2021-09-06 14:39:15
723
6
原创 企业微信踩坑记录
第一次接触，一步一个坑，一个都没落的踩完了，记录一波~~项目背景：企业微信接入h5网页应用，获取群ID跟userID。步骤：1.先看文档，如何接入JS-SDK参考文档：https://open.work.weixin.qq.com/api/doc/90000/90136/905122.跟着步骤走，一来就有一行红字，自己不看，踩坑别怪我所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名)，且可信域名必须有ICP备案且在管理端验证域名归属看了，跟着步骤乖乖走，坑还是来了：设置可信域名
2021-08-30 15:11:47
2026
7
原创 vscode powershell 运行ts-node 报错
具体报错情况：复现：window10, 在外部CMD 全局安装了ts-node,执行ts-node -v 显示版本号安装成功。在vscode中打开终端，新建ts文件并使用ts-node test.ts 报错。出现原因：cmd上面运行的脚本在powershell上不能运行，powershell的执行策略限制了其执行。解决办法：查看powershell的执行策略，并针对用户更改执行策略具体操作如下：打开vscode powershell，执行命令查看执行策略：Get-ExecutionPolic
2021-08-13 15:14:47
1085
原创 dva 入门学习
dva = React-router + Redux + Redux-saga数据流向： 内部设置state（model的状态数据），通常为一个对象（可为任何值），仅由dispatch发起的action去更改. 注：同步行为：reducers —> 更改state （纯函数—同输入必同输出) 异步行为：effect —> reducers ----> 更改state.Models: 操作时保证state为全新对象，无任何引用。
2021-08-12 11:17:23
2042
原创 如何使用js来实现一个发布订阅模式
我都不知道发布订阅模式是个啥,咋谈实现??发布-订阅模式:按照专业的话来说:“发布-订阅是一种消息范式,消息的发送者(称为发布者)不会将消息直接发送给特定的接收者(订阅者),而是将发布的消息分为不同的类别,无需了解有哪些订阅者;同理,订阅者也可以对一个类或者多个类有兴趣,但也只关注有兴趣的部分,无需了解存在哪些发布者”.按照流氓的话来说就是: 发布者跟订阅者一起有一个小家,但是两个人从来不交流,也不想见面.有一天.发布者在家里搞了一系列骚操作,移沙发,搬酒柜,贴墙纸…,订阅者晚上下班回去,她只关注
2021-07-09 10:32:31
2986
5
原创 Promise.all && Promise.any && Promise.race三者有什么区别？使用场景是什么？
promise.all(Iterator)：接收一个可迭代对象，如数组，传入promise状态全为resolve状态，则返回成功状态。否则只要存在一个reject，则返回reject状态。使用场景：1.前端发起多个请求并根据请求顺序获取和使用数据；2.合并多个请求结果并处理错误promise.any(Iterator):接收一个可迭代对象，如数组，传入的promise状态只要有一个为resolve，整个则返回成功状态。全为reject，即返回reject状态。使用场景：从最快的服务器检索资源，如果
2021-05-29 10:58:59
1435
原创 this指向三剑客：call apply bind
共同点，众所周知都是改变this的指向(也就是函数执行时的上下文)区别，就先看看传参吧～call:call接受的是一个参数列表，其中第一个参数表示函数运行时的this值;如果没有传入第一个参数，this 的值将会被绑定为全局对象.如：Function.call(thisArgs,args1,arg2...)返回值：使用调用者提供的 this 值和参数调用该函数的返回值，没有则返回undefined。例如：使用call调用父构造函数(继承）function Product(name,p
2021-05-17 16:12:30
106
原创 eslint 代码检查报错： error Unary operator ‘++‘ used
源代码：for循环中使用i++；操作符++不能被使用。…一脸懵逼，不都是这么写的吗？？什么鬼哟～～然后去查了一下eslint 官网 果然有鬼：https://eslint.org/docs/rules/no-plusplusdisallow the unary operators ++ and – (no-plusplus)Because the unary ++ and – operators are subject to automatic semicolon insertion, dif
2021-04-29 14:30:27
1615
原创 react-hooks 基于antd库 实现对树组件节点名称的编辑
唉～～ 一看就会的功能，自己上手还是花了四十多分钟近一个小时的样子,又是脑子会了系列…antd中的Tree组件本身不支持对节点数据名称进行修改的功能，但是TreeNode的Title属性支持自定义。解题思路：1.修改的时候，弹出一个编辑框，然后对节点名称进行编辑。2.将节点名称直接渲染成一个input框，输入修改。因为是面试题，有时间限制问题，所以这里用的是我认为最简单直接的方法。稍微难点在自己去构造递归函数，函数接受两个参数，一个是node,即编辑框传出来的修改value（一定要带上key），
2021-04-11 21:38:13
1382
2
原创 手动实现一个 promise.all
众所周知，js是一门单线程的语言。所谓单线程就是从上往下执行，也就是同步执行，跟代码顺序有关。业务中涉及到的异步开始是利用回调函数跟事件来解决的，但也因此出现了一个叫回调地狱的问题（也就是回调函数再回调，反复回调好多次…)。于是es6提供了一个叫promise的对象来解决这个问题。这里不对promise展开赘述，不太清楚的可以移步：https://es6.ruanyifeng.com/?search=%3F.&x=8&y=7#docs/promise1.Promise.all的用法P
2021-03-27 17:26:51
744
原创 react 使用dom-to-image 将html转为图片并保存
dom-to-image将html转化为图片的核心主要是SVG的标签，该标签可以包含任意的html节点
2021-02-07 13:33:57
6391
3
原创 git clone之error: RPC failed； curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL,
远程git clone 别人的项目报错，报错原因在于服务器的SSL证书没有经过第三方机构的签署，解决步骤如下：（既然证书认证有问题，那…我就先忽略一下嘛）首先，在clone项目的时候，前面加上env GIT_SSL_NO_VERIFY=true,设置忽略证书错误env GIT_SSL_NO_VERIFY=true git clone https://.....（那也不能全忽略了呀，证书是安全保障的东西，全忽略了总要出点事，那…那我就再限制一下忽略范围嘛）clone成功了之后，cd 进入该项目，
2021-02-04 17:36:32
538
原创 antd TreeSelect获取父节点的值
在antd对Treeselect组件的渲染中，onChange事件是无法获取父元素的值的，官方解释是处于对性能的考虑，没有对父元素进行关联。文档末尾也给出了如何获取父元素值的方法，解题思路是：根据treeData的数据结构利用递归回溯去查找父节点的值忠于文档～import React from "react";import { TreeSelect } from "antd";import { Post } from "../../api/index";const valueMap = {}
2021-01-11 22:00:46
8282
原创 解决npm -v突然失效 无反应
问题：之前还是正常的，更换node版本 执行了npm config set prefix “D:\Program Files(×86)\nodejs\node_global” 跟 node_cache之后，连npm -v都没反应了解决办法：删除c/administor/[name]/这个目录下面的.npmrc 就可以了具体原因…我也还没弄清楚 参考的大佬的答案 这里记录一下有知道原因的 欢迎讨论哦~~...
2020-11-26 23:28:51
2674
原创 echarts 绘制横向柱状图 并下载echarts图表
效果图如下:代码如下:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
2020-10-29 17:48:18
1456
原创 js 表格自动循环滚动,鼠标移入暂停
看公司项目代码(react),觉得很常用,我就自己用js写了一下demo.(基本还是源代码,我不知道参考的是哪个大神的,所以…侵删.)放在这里一下 以后方便直接用~~效果:自动向上滑动,鼠标一进去暂停滑动.(动图…没有哈哈哈哈哈)放代码 可直接运行:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w
2020-10-27 16:45:26
1872
原创 JS 一行代码 获取数组最大值与最小值
let dpartArr = [].concat(dpart1, dpart2, dpart3, dpart4, dpart5, dpart6, dpart7,); // 获取数组最大值 let dpartArrMax = Math.max.apply(null, dpartArr);
2020-10-12 10:58:40
162
原创 Node 内存溢出及V8垃圾回收机制
先奉上大佬文章地址表示感谢:https://www.jianshu.com/p/74a466789ff4问题复现,题目和代码如下//给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。//// 你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。////// 示例://// 给定 nums = [2, 7, 11, 15], target = 9//因为 nums[0] + nums[1] = 2
2020-10-10 16:00:40
335
原创 学习笔记之常用数组api 改变原数组和不改变原数组的有哪些?
复习了一下数组的常用api,练习的是一些自己容易混淆或者是忽略的参数和细节~先把总结写在前面:改变原数组的操作:pop / push / shift / unshift / splice / reverse(反转数组) / sort不改变原数组的操作:concat / filter / join / slice / reduce / findIndex /forEach / map<!DOCTYPE html><html lang="en"><h
2020-09-16 17:31:51
1005
原创 react 虚拟DOM及diff算法
什么是Virtual DOM?为什么要使用它?在vue,react这些框架中,都是通过监听数据的变化而相应的去渲染我们的视图.但是如果每次修改数据就去操作一次DOM树,这在性能上无疑是大打折扣的.虚拟DOM的出现就是为了解决这个问题,并且起到协调的作用.本质上就是在js和真实DOM树之间做了一个缓存,具体原理是:每次当数据发生变化时,渲染机制先在虚拟DOM上去改变视图,然后再跟实际DOM树作比较(作比较用到的是虚拟DOM的diff算法),再在实际ＤＯＭ上更新差异部分(也就是这个时候才去操作实际DOM树,渲
2020-09-15 17:51:29
240
原创 JS 连等赋值操作
偶然看到s的一道题,嗯…又进去了~不过,不踩坑你就不知道自己遗漏了什么知识直接看题:var l = m = 10; (function(){ var l=m=20; })();console.log(l); console.log(m); 关于js的连等操作符,是从右往左执行的,每次连等操作符的执行都可能会伴随产生一个全局变量.以上代码可以解析为:var l = m ;m = 10; // m是个全局变量,而不是用var定义的局部变量(function(){ m
2020-09-14 16:17:31
1445
原创 react antd表格中渲染一张或多张图片
使用antd table中显示一张图片，代码如下：const columns = [ { title: "姓名", dataIndex: "name", width: 100 , // table列定宽 可不设 fixed: "left" // 固定列的位置 }, { title: "联系电话", width: 150, dataIndex: "phone" }, { title:"显示一张图片", width
2020-09-03 01:49:42
2794
5
原创 react 项目总结
最近公司走了个前端，终于还是让我体验了一波996…真的超级忙~ 哭泣做的项目也不难，但还是收获很大，记录一波~1.深拷贝和浅拷贝：拷贝拷贝按字面来说就是复制嘛。不过，深浅之间的差别在于拷贝的第三方数值的改变会不会对原对象产生影响。假设c浅拷贝了a,改变c的值有可能会导致a的值也跟着产生变化，这就是浅拷贝。原因在于浅拷贝的值存放在堆里，地址存放在栈里，变量赋值引用的是变量的值，变量指针（指向存储变量的一块内存）的存储仍然指向的是同一个地方,所以当c发生变化时,可能会导致a引起变化。就像是a,c来自于同一存
2020-08-11 18:01:34
395
原创 小白搞一波深拷贝 浅拷贝
拷贝:顾名思义就是复制嘛,不过，深浅拷贝之间的差别在于拷贝的第三方数值的改变会不会对原对象产生影响.浅拷贝就是新对象复制的是已有对象中非对象属性的值和对象属性的引用,对象属性不会复制到内存举个例子obj ={name:‘dress’,{color:‘red’}} newObj浅拷贝obj,复制name的值,当新对象的name发生改变时,原对象(也就是obj)的name不会发生改变;color为对象属性,只会拷贝一份相同的内存地址,新对象中的color值发生改变,原对象中color的值也要改变
2020-08-07 17:11:40
399
原创 react 代码分割 export && export default
代码分割其实就是为了避免打包时候的代码体积过大而导致加载时间过长出现的一种优化手段吧.简单来说也就是引入并使用外部js文件的方法,使用代码分割有两种写法,推荐第二种.第一种:我在math.js里面export了一个add函数import("./math.js").then(math => { console.log(math.add(1, 2)) // 3});第二种使用方式// 头部引入文件import { add } from './math'; //使用如下:cons
2020-08-03 11:29:51
876
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人