自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(29)
  • 收藏
  • 关注

原创 使用swiper轮播echarts图表时出现的图表不显示的问题

开发项目可视化大屏的需求,有一块需要循环轮播展示echarts图表,于是选用了比较流行的swiper插件,但是实际开发时确发现,轮播到最后一个图的时候,图表并没有显示。于是,开始排查问题原因。注意vue项目中,图表不要使用ref绑定dom,因为编译后ref会消失,swiper复制的时候slide上面是没有ref的。给图表绑定相同的类名,初始化图表的时候,通过for循环初始化。

2023-10-25 10:33:47 798

原创 Vue项目中使用require的方式导入图片资源,本地运行无法打开的问题

无意中发现,项目中一个require导入的图片图标,在file协议下居然可以正常显示,然后就比对了一下不同之处,发现这个图标图片打包的时候被编译成了base64了。于是就查了base64图片的特殊之处,查找得知base64格式的图片是不需要发请求获取的(一般是减少页面请求优化的手段之一,但是存在会使图片体积增加的问题)。其中有一块需要展示一个拓扑图,绘制拓扑图时用了定义了一个图片节点,然后图片的导入方式是 require的方式,然后本地npm run dev启动的时候可以正常显示,没有任何问题。

2023-10-24 19:19:04 775

原创 关于单机流程编排技术——docker compose安装使用的问题

正式为了解决上述问题,于是有了流程编排的思想,让开发者通过编写对应的配置文件,让docker自动的帮我们按配置文件中书写的顺序来执行对应的容器。常用的流程编排技术有以下两种:docker compose 和 k8s。前者是单台机器上的流程编排技术,后者是多机上的流程编排技术。我们主要介绍docker compose的安装及使用过程中的问题。

2023-10-22 12:05:39 442

原创 Vue3踩坑指南

项目使用的还是vue-cli搭建的,底层还是webpack,没有使用新的vite搭建。

2023-10-22 11:38:33 703

原创 使用Vscode终端设置window环境变量设置不上

可能是Vscode终端的问题,可以通过电脑自带的CMD去设置环境变量,通过echo查看,发现是没有问题的。

2023-10-18 23:57:36 756

原创 venv\Scripts\activate : 无法加载模块“venv”

即:将 venv\Scripts\activate 替换成 cd Scripts , 执行 activate。老实说,我是按照python Web框架——Flask的官网去做的,可以却报了上述的错误。

2023-03-16 10:10:45 3095

原创 关于使用passport-jwt做token校验时,接口一直返回Unauthorized

之前学习node的时候使用过 passport-jwt去校验token,当时使用的数据库是mongodb,现在想把数据库换成mysql,可是接口一直报Unauthorized。看了不少同样问题的文章,大都是更改下图中的代码:但是每一种都试过,没有任何效果。于是乎开始了长达3个小时的问题原因探究。最后如果你也遇到了类似的问题,试了好多方案无果,不妨解析一下token,看一下token携带的信息是否又问题。...

2022-06-22 17:24:40 1000

原创 关于iview表单组件中表单项是动态渲染时,校验规则不起作用的问题

需求描述:最近项目有一个小需求是这样的,表单中的某些表单项是动态渲染的,当表单中的某一字段符合条件的时候,调用后台接口获取数据,根据后台返回的数据再为表单增加对应的 FormItem。问题描述:需求确实不难,但当我实际写的时候遇到一点问题,动态渲染的表单项校验规则失效了。。。下面我们来理一下需求的实现思路,找一找问题的原因。需求思路:下面我们结合代码来理一下:iview Form表单控件 model属性绑定的值,name,num是动态渲染的表单项v-model的值,为了方便后续扩展并没有直接

2022-05-19 15:51:20 1157 1

原创 使用single-spa实现微前端踩坑指南

微前端

2022-03-15 10:31:34 2309 1

原创 为iview分页组件添加跳转按钮

对iview分页组件进行二次封装,添加跳转按钮最近的一个项目要求使用iview进行页面的搭建。项目完成在测试的时候,测试人员说页面的分页组件缺少跳转到某一页的按钮。我告诉他直接输完页码点回车就好了,但是测试说用户不知道回车怎么办。好吧,我还能说些什么呢,改吧,发现iview分页组件没有类似的效果。只能自己上手对iview组件进行改造了。。尝试方案一:有问题自然想到是度娘,网上的方案几乎都是,使用原生js的模拟事件,通过点击跳转按钮去模拟iview页码输入框的Enter事件。下图是网上的通用做法:

2021-12-29 14:44:20 621

原创 Node实现一个文件导出功能(一)

最近项目有一个需求是这样的:前端页面一个导出按钮,用户点击导出时,将页面表中的数据导出未excel格式的文件。项目配置:前端:Vue + element-ui + axios后端:Node + express项目代码:前端页面前端代码 exportExcel(){ this.$axios.post('/api/export',{}, { responseType: 'arraybuffer' }) .then(res => { const link = doc

2021-06-09 12:48:27 446

原创 关于使用jquery.wordexport.js如何设置导入文档的页边距问题(超详细,亲测可用)

问题描述最近项目要求修改导出的word文档页边距。如下图所示:原来使用wordexport.js默认导出的页边距是标准的,需求是将页边距改为窄。解决的步骤一:首先将页面直接导出,然后使用word打开,在word中将页边距改为窄(不会使用word改页边距的自行百度)。然后将文件另存为html格式的文件。使用编辑器打开后,找到与为修改前的代码有何不同之处。图片所示,是我的项目对应的不同之处。解决的步骤二:找到jquery.wordexport.js插件,使用编辑器打开源码。然后在上图所示的

2021-02-19 16:25:14 2084 1

原创 关于使用PrimeNg组件库,图标及组件样式不显示的问题

问题描述在使用angular开发时,使用PrimeNg组件库中的一些图标,和日期输入的组件,但是页面上图标不显示,组件样式无效果。问题解决我导的是别人的项目,使用cnpm install安装时prime组件直接安装了最新版的,没有按照package.json中规定的版本安装。于是,我删除了node_modules文件夹,重新用npm install安装了一下,就可以了。最后具体为什么我也不知道,其他人使用cnpm就可以安装匹配的版本,我的就不行。如果你也遇到类似的问题,可以试试这种方法。...

2021-01-27 20:22:49 702

原创 关于angular路由跳转报:Uncaught (in promise): Error: Cannot match any routes.的问题

问题描述今天在使用angular框架进行路由跳转的时候,控制台出现了Uncaught (in promise): Error: Cannot match any routes. 这样的错误。看来几篇帖子给出的答案都是路由路由路径的没填对,但是我检查了十几遍路径没有问题呀!!!我的解决办法我将路由表中的精确匹配配置项删除就好了。(pathMatch: ‘full’) 没错就是括号里这项。如果你有和我一样的问题,不妨试试这种方法。...

2021-01-25 22:02:20 4310 1

原创 angular开发中使用第三方UI组件库,关于如何更改组件内部样式的问题

首先区分修改的样式位于哪里?1.修改的样式位于组件自定义的class中类似于上图的情况,背景的样式位于组件自定义的ui-inputtext类中,此时可以直接通过 /deep/ui-inputtext{background:#000} 进行修改2.想要修改的样式位于element.style中比如说上图,我想要修改top属性,如果还是按照第一种方法结果会发现没有效果。那么此时就这样做。/deep/ui-inputtext{top:10px !important}学习过程中遇到的问题,特此记录一下

2021-01-22 17:22:39 870

原创 使用iView组件库中的table组件时,如何实现数据的异步加载

问题描述使用iView组件库进行项目开发时,在项目的某处使用到了table组件,当我希望table中是数据是从后台获取的(异步加载的),但是总是报 “Error in render: “TypeError: Cannot read property ‘0’ of undefined” 的错误。问题详情使用官方提供的 :data=‘data1’,从data1中获取要往表格中插入的数据。然后在data1中我将从后台获取到的数据进行赋值。此时编译运行时就会出现这样的错误。问题解决更改 :columns=

2021-01-15 09:58:47 1079

原创 在Vue中使用axios.all方法发送并发请求时遇到的错误axios.all is not function解决办法

问题描述在项目中使用axios.all发送并发请求,项目跑起来时报axios.all is not function解决办法错误的原因是由于all是静态方法,静态方法的调用只能通过类名点(className.)的方式调用,而我们导入到Vue项目中的是axios的实例。所以解决办法就是在你创建的实例中将静态方法赋值给我们的实例。具体代码如下:其中service是我创建的axios实例的名称。如果你后面有用到spread方法也将它添加进去。最后成功获取到请求的数据。...

2020-11-26 14:40:37 1445

原创 关于input标签的类型为checkbox时,添加checked属性时遇到的问题

问题描述我想通过js控制checkbox的checked属性,但是当我通过element.style.checked=true为某个元素添加checked属性时发现没有效果。问题解决最后试了几种方法发现竟然是直接通过element.checked = true为该元素添加checked属性。不懂就问问题虽然解决了,可是不明白。难道checked属性不是元素的样式属性吗?还有没有类似的属性是直接通过element. 的方式修改的?希望社区中各位社友能传道解惑。...

2020-11-25 17:39:47 651

原创 移动端屏幕适配常用方案的原理解析

前言前端人员在做移动端开发时经常要考虑屏幕适配的问题。如果开发用的是Vue等一些前端框架,那么webpack等一些工程化工具会提供好多用于移动端适配的插件。知其然而不知其所以然,对于一个人的成长是不利的,所以查阅了好多资料总结了移动端屏幕适配方案的原理,在这里分享给大家。(原生js实现)移动端屏幕适配之简单适配方案简单代码实现var ratio = 18.75; //设定系数是为了方便px与rem的换算,750的设计稿系数一般都为18.75var viewWidth = document.docu

2020-11-19 16:24:33 447

原创 在Vue中使用Swiper插件时滑到最后一个滑块回弹效果

问题描述今天开发项目时第一次使用了Swiper插件,使用过程中遇到了一点小问题。我的预期是第一个滑块和最后一个滑块的触底回弹效果,可实际却是这样。第一个滑块可以正常向左回弹,但最后一个却没有向右回弹。(见下图)向右滑没有回弹,甚至直接滑出了屏幕尝试方案之前没用过swiper,看到这种情况第一次想到的办法是 :滑块滑动时获取swiper-wrap的translate3d中的X值,然后判断x是否小于-634,如果小于将其值改为-418。虽然也实现了,但代码看着好麻烦。问题的最终解决学任何一款插件

2020-11-18 16:52:12 1897

原创 关于在Vue中使用Swiper插件时的常见问题

常见问题在Vue中使用Swiper插件错误可能多种多样,但是问题的原因终归就那么几点。1.swiper插件的引入路径是否正确2.swiper的css样式引入路径是否正确3.使用swiper时相应的类名是否书写正确,一定要按官方规定的类名书写...

2020-11-18 11:39:35 290

原创 关于flex布局伸缩项为img时,图片不收缩显示的问题

问题描述今天使用flex伸缩盒布局时,伸缩容器container的宽度317px,伸缩项是两张img,宽度为181px。按理说当伸缩项宽度和大于伸缩容器时,伸缩项会收缩显示。但是实际上并非如此。尝试的方法我起初认为是不是还要为伸缩容器或者伸缩项设置其他属性。但是,当我将img换成div时,div却收缩显示了,此时我并没有给伸缩容器或者伸缩项添加其他伸缩相关的属性。div宽高也和img完全一样然后,我以为div是块级显示模式,而img是行内块显示模式。于是试着将为img添加display:bl

2020-11-13 10:22:50 1449

原创 使用前端插件时用到插件中某些结构时发现无论怎样布局元素都不能按照自己的设置改变

解决办法尝试给用到的结构整体加上一个div标签(其他标签应该也可以,但没试过)

2020-11-12 17:15:59 70

原创 关于vue组件开发过程中一直报错:This relative module was not found:

问题描述在项目过程中,当我在路由映射表中添加url和对应组件时一直报This relative module was not found:这样的错误。检查了十几遍发现组件创建,导出,引入都没错,一时间心态崩了。最后问题的解决在看了二十几遍后才发现原来是组件导出时 name属性那里多了一个空格,才导致This relative module was not found,提示该组件找不到。好吧,检查时一个空格还真难看出来。特意写出这次教训,大家有类似的问题可以看看组件name那里是否多字母,缺字母,多空

2020-11-12 17:14:14 45982 4

原创 关于执行gulp命令报这样的错误:gulp : 无法加载文件 C:\Users\dalv\AppData\Roaming\npm\gulp.ps1

问题描述按照教程安装了gulp,但是命令行执行gulp相关命令时总是报错:gulp : 无法加载文件 C:\Users\dalv\AppData\Roaming\npm\gulp.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。尝试方案网上的方案大多是以管理员身份运行windows powershell,然后输入set-ExecutionPoli

2020-10-30 16:25:28 778

原创 vue中使用element ui时想要更改官方标签的某些样式时,一般不要在scoped中更改,要在全局的style标签中更改

vue中使用element ui时想要更改官方标签的某些样式时,一般不要在scoped中更改,要在全局的style标签中更改

2020-10-30 13:31:24 232

原创 element ui对拥有子菜单的菜单项添加点击事件无效的解决方案

由于element ui会阻止拥有子菜单的菜单项的点击事件,所以通过添加原生点击事件@click.native的方式解决。

2020-10-28 11:34:41 2826

原创 Vue中路由跳转时出现路由重复跳转的问题解决方案

第一种方案出现这种问题是由于安装的vue-router版本太新的问题。所以第一种方案简单直接,直接在命令行中重新安装旧版本的vue-router。yarn add vue-router@3.0 -S第二种方案在vue-router的index.js文件中添加下列代码:import Vue from ‘vue’;import Router from ‘vue-router’;const originalPush = Router.prototype.pushRouter.prototype.p

2020-10-28 09:35:12 4225

原创 关于element ui中引入官方的NavMenu时出现点击某个子菜单时,所有的子菜单全都展开问题

问题描述使用官方代码,为项目添加了多级导航菜单。但是,当我点击某个菜单的某一项时发现,不止当前菜单项的子菜单展开了,所有菜单项子菜单全都展开。解决方法这是由子菜单项的index属性引起的,但我们为每个子菜单项的index属性添加相同的值时就会出现这种情况。所以为每个子菜单项添加不同的index属性值就可解决。...

2020-10-26 18:02:02 2952 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除