问题解决
码飞_CC
热爱生活与技术,偏于前端,潜心学习,乐于分享
展开
-
git push代码报错:Failure when receiving data from the peer
clash for windows的默认端口是7890,配置代理即可解决。原创 2024-07-31 08:44:26 · 694 阅读 · 0 评论 -
问题解决:‘telnet‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
打开控制面板–》程序–》启用或关闭windows功能–》勾选Telnet客户端,点击确定即可。指令的时候,发现指令不可用,原因在于系统没安装telnet功能。当在windows终端中运行。原创 2024-02-21 15:40:21 · 776 阅读 · 0 评论 -
80端口被system占用的处理方法
【代码】80端口被system占用的处理方法。原创 2024-01-30 15:51:15 · 491 阅读 · 0 评论 -
Vue 3 + Vite 4 移动端低版本白屏处理
vue3打包后在低版本浏览器或webview中出现白屏,原因就是因为语法兼容问题。根据vite官方文档描述,默认支持 Chrome >=87、Firefox >=78、Safari >=14、Edge >=88。,所以需要我们手动兼容低版本。原创 2023-12-18 14:39:57 · 1434 阅读 · 1 评论 -
git push/pull 超时问题解决
git 超时处理原创 2022-12-14 10:55:37 · 1014 阅读 · 0 评论 -
数据平台前端架构设计
随着部门业务的不断增大,流量渠道的不断增加,公司对于个性化报表与数据分析的需求越来越强烈。非技术同学常常需要依赖 BI 来生成报表,而 BI 的人力有限,无法高效地支撑日常运营的报表与分析的需求。此外,因不同人员构建 SQL 语句的不同,即使是同一指标也可能导致数据口径不统一从而造成沟通上的隔阂。为了满足高效的数据报表生成与分析需求, 实现更加精细的数字化运营目标,低使用门槛的自主数据分析平台 Bee-Known 应运而生。本文主要介绍自主数据分析平台前端的架构设.........原创 2022-06-05 15:48:22 · 691 阅读 · 0 评论 -
Form 表单数据缓存的一种策略
Form 表单数据缓存的一种策略,提升用户表单操作体验,供交流学习原创 2022-03-17 16:21:11 · 2236 阅读 · 1 评论 -
Charles开启 macOS Proxy 时提示权限为只读
解决 Charles开启 macOS Proxy 时提示权限为只读的问题原创 2022-02-24 16:06:27 · 1198 阅读 · 1 评论 -
Chrome 控制台调试hover样式以及hover后才出现的元素
Chrome 控制台调试hover样式以及hover后才出现的元素原创 2022-02-23 15:22:58 · 9780 阅读 · 1 评论 -
微前端子应用路由更改时可能会遇到的坑
手里有个项目(使用 icejs),该项目有作为子应用嵌入到其他主应用中,并且该项目中的部分页面存在以iframe的形式引入到其他的系统中的情况,这样如果对项目相关页面的路由做了调整的话,将会产生404的 bug :页面找不到。举个例子,原来的项目中 routerConfig 配置了一个页面:const routerConfig = [{ path: '/manage/editDashboard/:id', name: '编辑看板', component: EditBoard,原创 2021-11-04 19:42:17 · 1564 阅读 · 0 评论 -
前端获取接口报400错误时返回的响应数据的方式
后端接口在处理请求时,如果发生错误,采用 throw Error() 的方式处理,这样前端请求的结果为:对应的响应数据:这时如果我们在代码中直接采用 try catch 来捕获并输出错误信息时,会发现是以下结果:onError: (err) => { console.log('err', err)}控制台输出:这并不是我们想要的 response 的数据。为什么结果会是这样呢?这里如果直接输出 err,其实等于输出 error.message。我们想要获取接口的返回的数原创 2021-08-17 20:19:54 · 7065 阅读 · 0 评论 -
Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules‘的解决方法
问题mac 使用npm安装包npm i -g xxxx的时候报错了:Error: EACCES: permission denied, access '/usr/local/lib/node_modules',如下:从错误提示可知,我们的操作缺乏权限,对症下药,那么在执行命令时只要赋予管理员权限即可。解决方法在命令行前面添加sudo获取管理员权限,输入管理员密码就行。即将npm i -g xxxx 改为sudo npm i -g xxxx ,再输入密码即可。...原创 2021-07-05 09:59:56 · 6805 阅读 · 0 评论 -
node-heapdump的安装及使用
heapdump可用于V8的堆内存快照记录,我们可以通过使用该模块来查看node服务运行时内存的使用情况,排查内存泄漏的问题。我在windows环境下安装时,并不是一次性成功,在此记录下安装成功的步骤。一、安装执行命令:npm install heapdump1.报 Can’t find Python executable “python” 相关的错误如:stack Error: Can't find Python executable "python", you can set the PYT原创 2021-05-12 19:11:56 · 2756 阅读 · 5 评论 -
Do not use “// @ts-ignore“ because it alters compilation errors问题的处理
使用TS编写代码时,有些情况下,比如第三方的库对象,我们想增加一些属性,并且确认是没问题的,但是TS检查时会报错导致不能正常编译运行,我们通过添加// @ts-ignore来告诉TS该条语句不检查类型问题,此时是可以正常编译了,但是// @ts-ignore这条注释标红了很难受:这个我们可以通过修改.eslintrc.js文件来消除该提示:module.exports = { ... rules: { ... "@typescript-eslint/ban-ts-comme原创 2021-05-12 10:11:42 · 6482 阅读 · 0 评论 -
MaxListenersExceededWarning: Possible EventEmitter memory leak detected.警告的处理
在用nestjs开发node服务的过程中,使用generic-pool创建puppeteer连接池,并发测试时发现控制台有警告信息,如下:(node:30460) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added to [process]. Use emitter.setMaxListeners() to increase limit该信息告诉我们监听事件超原创 2021-05-07 16:36:04 · 38219 阅读 · 3 评论 -
Parsing error: Cannot read file ‘e:\.....\tsconfig.json‘. eslint
import的写法没啥问题,发现报错了:Parsing error: Cannot read file 'e:\.....\tsconfig.json'.这是由于我们配置查找的tsconfig.json文件路径配置有问题,只需配置 .eslintrc.js中的tsconfigRootDir属性(这里我们tsconfig.json文件和.eslintrc.js处于同一目录下):module.exports = { // ... parserOptions: { project: "ts原创 2021-04-14 21:02:12 · 6900 阅读 · 5 评论 -
Require statement not part of import statement. eslint@typescript-eslint/no-var-requires报错修改
修改.eslintrc.js文件的配置即可:module.exports = { ... rules: { ... '@typescript-eslint/no-var-requires': 0, }}原创 2021-04-09 19:50:32 · 4034 阅读 · 0 评论 -
Uncaught SyntaxError: Cannot use import statement outside a module的解决方法
本地html文件中的script标签引入ES6的模块,直接在浏览器中打开该html文件,发现报错了:Uncaught SyntaxError: Cannot use import statement outside a module对应的index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con原创 2021-02-21 11:24:52 · 253785 阅读 · 21 评论 -
React input[type=‘file‘] 连续上传同一文件不触发onChange事件的解决方法
在使用type类型为file的input来上传文件时,发现连续上传同一个文件,第二次以后就不会再触发onChange事件,原因是onChange事件触发的条件为其value发生变化,上传文件时,该input的value值为文件在磁盘中的位置。知道了触发条件以后,我们就可对症下药:改变value值即可。方法1在input元素中添加onClick事件,点击时将其value置空即可。<inp...原创 2019-04-10 20:58:07 · 8144 阅读 · 3 评论 -
前端页面对后端数据的换行显示
有时我们会遇到这种情况,后端传递了一大段包含了换行符的文本内容,在React中,我们直接将这部分内容展示的话,并不会出现换行的效果。如下例子:/* content为从后端获取的数据,例如: content=`hello world! hello world!hello world! hello world!hello world!hello world!`*/&amp;amp;lt;div&amp;amp;g...原创 2018-12-20 20:40:46 · 19766 阅读 · 2 评论 -
React实现元素块随页面滚动而固定在浏览器顶部的一种方式
有一个需求:一个元素块A本来在页面中的正常位置,随着滚动条向下滚动到该元素块时变为固定在浏览器顶端,当滚动条向上滚动到元素块A时又恢复到原来的位置。 解决方法:我们首先在react组件中添加一个boolean类型的状态needFixed,用于判断该元素块A是否需要固定。然后在通过document.getElementById('A_ID').offsetTop获取需要固定的元素块A距...原创 2018-10-24 21:20:24 · 9752 阅读 · 2 评论 -
console.log打印对象时属性缺失的解决方法
文章目录1. 序2. console.log()输出对象属性缺失3. 获取正确的结果3.1 方法1:对象展开3.2 方法2: JSON.stringfy()看字符串1. 序在编写代码时,我们常常用console.log()的方式将信息在控制台中打印出来以帮助我们进行前端调试。一般情况下,我们打印普通值都没有问题,但在打印对象类型时,我们就需要注意点了,要不然可能会出现不符合期望的结果。2. ...原创 2019-05-22 20:53:22 · 5690 阅读 · 2 评论 -
修改input元素placeholder样式的方法
我们时常需要跟input输入框打交道,很多情况下都要对placeholder的内容进行修改,例子:{/* React的写法 */}<input type="text" placeholder={'placeholder'}/>默认情况下的显示如下:我们是没法直接对input元素设置样式来更改placeholder,需要通过伪元素 ::-webkit-input-placeh...原创 2019-06-14 20:36:39 · 25697 阅读 · 1 评论 -
CSS实现自适应布局:子元素项目整体居中,内部项目左对齐
日常工作时,我们可能遇到这样一个布局:一个父元素框框(随着浏览器大小自适应宽度)里面有许多按钮,然后这些按钮(宽度固定)的整体需要在父元素内居中对齐,而按钮整体的内容又是从左往右排列。这里提供一个解决方法,示例如下:有如下代码:<div class="wrap"> <button class="btn">1</button> <butt...原创 2019-08-28 10:38:29 · 4859 阅读 · 2 评论 -
React实现浏览器打印部分内容
React 浏览器打印原创 2019-05-14 20:05:34 · 4873 阅读 · 0 评论 -
解决localhost改为本机IP后网页无法访问的方法
在web开发时,有时我们遇到问题需要同事帮忙看看,或者是开发的一些移动端的页面需要在真机上测试,这时我们就需要通过IP的方式来访问网页。当然,对方想要通过你的IP来访问网页,你们需要在同一个局域网内才行。解决方法将应用的监听改为0.0.0.0,基于webpack的项目把dev的config文件中的host改为'0.0.0.0'即可。如果别人要通过你的IP来访问的话,需要把防火墙给关闭,如果是自...原创 2019-06-17 22:33:48 · 20110 阅读 · 4 评论 -
ERROR in app.bundle.js from UglifyJs Unexpected token: name «element», expected: punc «;» 的错误处理
遇到问题webpack打包时使用UglifyJs(github地址)来压缩美化JS代码,在npm run build时报错了:// webpack.prod.js 内容const merge = require('webpack-merge')const UglifyJSPlugin = require('uglifyjs-webpack-plugin')const common = r...原创 2019-11-26 14:25:33 · 10836 阅读 · 0 评论 -
引入ttf类型的字体不起作用的解决方法
前端引入一种后缀名为.ttf的字体,并在css文件中设置该字体,但是页面中并没有显示新引入的字体:@font-face { font-family: 'myFont'; src: url('./my-font.ttf') format('ttf'); font-weight: 600; font-style: normal;}.my-font { f...原创 2019-11-25 14:17:35 · 12580 阅读 · 1 评论 -
React请求数据的一种优化思路
文章目录1. 前期:分散开发时的阶段2.中期:统一的阶段3. 后期:单次访问只发起1次请求大家在网购或者寄快递时,应该都有碰到地址选择栏,也就是选择省市区。我在开发一个国外快递官网的时候也遇到了这个需求,在这个项目中,由于国外业务刚展开,并不是所有区域都可选的,需要人工维护这份数据(时常会改动),所以地址信息是由后端维护的,当前端页面遇到需输入地址的地方,就向后端发起地址数据的请求。在这,我记...原创 2020-03-17 21:27:12 · 2490 阅读 · 0 评论 -
纯CSS实现气泡框
文章目录用CSS画三角形气泡框正三角形的气泡框斜三角形的气泡框总结在工作中,我们可能会遇到气泡框相关的需求,如下图:这个气泡框我们可以使用纯CSS代码来实现。接下来跟我一起一步步实现吧!用CSS画三角形用CSS画个三角形,相信大家都很熟悉了吧。主要思路:将元素的的宽高设置为0;然后设置相应的边框即可实现。详细来讲就是给某一方向的边框添加宽度以及颜色,然后将其旁边两个方向(或一个)的...原创 2020-03-16 20:33:52 · 3522 阅读 · 0 评论 -
记录使用Git过程中遇到的问题及解决方法
文章目录1. 将某个分支的commit提交到另一个分支上补充:Git命令速查表我们经常使用Git来管理项目开发的版本,这里记录一些我遇到的问题及解决方法。1. 将某个分支的commit提交到另一个分支上在项目开发过程中,有时会穿插进一些小需求、小改动,我们可能就直接在当前功能分支上改了提交了,反正到时要一起发布,没啥影响。但是,可能由于各种不可控因素导致当前版本不能如期发布,而那些小需求、小改动需要提前发布,这时就坑爹了,难道还要再傻乎乎的拉分支写一遍??当然不是!我们可以使用git cherry-原创 2020-09-04 14:47:31 · 747 阅读 · 0 评论 -
Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的解决方法
安装webpack-dev-server包后,配置脚本"dev": "webpack-dev-server",然后执行npm run dev发现报错:internal/modules/cjs/loader.js:883 throw err; ^Error: Cannot find module 'webpack-cli/bin/config-yargs' 从错误信息我们可以看到其实是webpack-cli缺少了config-yargs模块造成的,我的包版本如下:"devDependen原创 2021-02-20 23:12:57 · 7590 阅读 · 2 评论 -
如何将页脚(footer)保持在页面底部
文章目录1. 问题描述2. 解决方案2.1 使用position属性实现(兼容较老的浏览器)2.2 使用Flex实现2.3 使用Grid实现1. 问题描述将footer保持在视觉窗口的底部是常见的需求。当页面的内容主体高度较大(超出屏幕可视区域的高度)时,footer元素直接跟在内容后面即可。但是,当一个 HTML 页面包含少量的内容时,footer元素就会坐落在页面的中间,在下面留下空白,这看起来很糟糕,尤其是在大屏幕上。如下图:2. 解决方案我们先给出基础的页面代码:<!DOCTYP原创 2020-08-24 19:16:24 · 19057 阅读 · 0 评论 -
React Warning: A component is changing an uncontrolled input of type text to be controlled问题解决
这里记录一下React开发过程中遇到的一个Waring及解决方法。一个Input输入框,当你在输入框中输入时,控制台显示Waring,Console 输出如下:Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide原创 2020-08-21 19:27:31 · 4270 阅读 · 0 评论 -
解决npm报错:‘cross-env’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
项目npm start启动时报错了(删除了node_modules文件夹下的.bin和.cache文件夹就会出现该错误),如下图。原因是缺少依赖,在此项目目录下重新下载依赖即可解决该问题:删除node_modules文件夹,重新执行npm install,安装若有问题,可以参考这里:npm install 安装出错时尝试过的方法...原创 2021-01-22 11:29:18 · 11285 阅读 · 2 评论 -
Could not freeze ....., Cannot read property ‘hash‘ of undefined 的解决办法
项目中单独对Antd(或其他包)进行升级时,项目可以正常启动,但是编译过程中会输出一大片的这种红色的错误,如下:看错误日志可知,可能是hardsource出现问题,解决方法:删除 ./node_modules/.cache 后,再npm start重启项目。以上操作完如果还存在问题,可以重新执行一下npm install,再重启一下项目,问题应该就解决了。...原创 2020-12-07 16:56:36 · 5016 阅读 · 1 评论 -
Chrome 代理服务器错误,连接不了网的解决方法
Chrome 代理服务器错误,连接不了网的解决方法新安装的chrome浏览器,输入网址出现如下页面,连接不了网(ERR_PROXY_CONNECTION_FAILED): 解决方法:打开设置页面中的高级,如下:再点开系统中的打开代理设置,如下:再打开连接选项卡下的局域网设置,如下:将代理服务器里面的打钩去掉,再点击确定,如下:此时,重启浏览器再输入网址即可连网,问题解决。...原创 2018-06-05 20:44:12 · 53822 阅读 · 5 评论 -
antd使用:在一个Modal中使用同个form表单实现编辑和新增功能
项目开发中,我们时常会遇到使用Modal弹窗和Form组件搭配实现编辑已有条目和新增条目的功能(如下图),这两个功能所使用到的表单是一样的,唯一的不同点是:编辑条目是要将已有的信息填入表单,而新增条目是表单所有字段为空。既然表单是一样的,我们当然不想重复代码。刚开始的想法是往Form组件传入默认值的方式来实现编辑时的填充功能。该方法编辑的时候表单确实是有传入值填充,但是关闭Modal再点击新增时,发现Form表单还是有值填充,这不符合我们的要求,查看文档发现了一条信息:<Modal />原创 2020-11-18 21:11:29 · 6482 阅读 · 1 评论 -
React input输入框异步校验的处理方式
文章目录前言处理方式1:防抖处理方式2:采用标记前言在日常工作中,我们经常接触到表单验证相关的功能。有些简单的校验(比如输入要求为手机号、邮箱、密码的字符组合等)可以直接由前端进行判断,但是有些复杂多变的判断(比如校验用户名是否存在、特殊行政区提示等)就必须发起请求由后端来验证,然后前端根据后端返回的结果进行提示等处理(这里称该校验的方式为异步校验)。处理方式1:防抖异步校验(选择框)存在...原创 2019-11-08 23:24:44 · 4972 阅读 · 0 评论 -
react-datepicker组件依赖date-fns实现国际化功能时遇到的问题以及解决方法
react时间选择组件react-datepicker的功能非常强大,基本能达到你想要的效果。这里记录一下该时间选择组件实现国际化(多语言)的功能中遇到的问题以及解决方法。先看一下官方给出的解决方法:从上面的的文档中我们可以知道react-datepicker要实现国际化功能是需要依赖date-fns包的,安装好这个包之后,国际化功能就可以展开了。主要分为以下三个步骤:首先,引入DateP...原创 2019-02-01 20:32:48 · 3953 阅读 · 2 评论