![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web开发
文章平均质量分 78
栀椩
编程学习中。。。
展开
-
FastApi中的常见请求类型
后端开发语言中,我钟情于node,高效的异步处理真是让我眼前一亮,同时,简单易懂的语法也让我非常倾心但是但是,因为考虑要写一个深度学习算法的后端接口,所以不得不选用python作为后端进行开发,并不是我不喜欢Python,相反,Python作为我的第一语言,我同样非常喜欢,只不过我更喜欢用它来做数据分析关于Python的后端框架,在Django和fastapi中,我最终选择了fastapi。原创 2024-07-02 11:01:16 · 600 阅读 · 0 评论 -
vue3中的图片懒加载指令及全局注册
最近重新刷了一遍黑马的小兔鲜前端项目,发现有个懒加载的指令之前还没有用过。而且写法相对固定,因此记录一下首先,懒加载(Lazy Loading)的作用是延迟加载某些资源或组件,直到需要它们的时候再进行加载。这种技术通常用于优化性能和资源利用率,特别是在处理大量数据或复杂的应用程序中。通过懒加载,可以减少初始加载时间和资源消耗,提升用户体验,同时在需要时动态加载内容,避免不必要的加载和占用内存,通常用在处理前端图片时。原创 2024-06-27 17:15:16 · 294 阅读 · 0 评论 -
docker+vue云服务器打包镜像相关操作
容器化部署似乎成了当前一个非常主流的趋势,无论是前端还是后端,流行的操作就是给你一个镜像地址,让你自己去拉取镜像并运行镜像。这似乎是运维的工作,但是在没有专有运维的情况下,不得不自己先了解一下。docker相对来说还是比较麻烦的,需要对服务器有一定的了解,还要对Linux命令比较熟练,然而我对这两个都不熟悉,摸索了一段时间,记录一下自己打包docker镜像的完整过程。原创 2024-05-30 11:18:27 · 834 阅读 · 0 评论 -
node+vue3的websocket前后端消息推送
前期写web项目时,前端获取数据的方式一般是向后端发起数据请求,然后后端向前端发送数据,然后对数据进行渲染,这是最常规的一种数据通讯方式,适用于绝大部分前后端分离的项目实际上还有一种场景,需要后端向前端主动发送数据,然后前端更新视图,这种一般出现在数据大屏显示项目中。后端每间隔一段时间向前端发送数据,然后驱动前端更新页面,使用的技术是websocket,研究了一段时间,算搞明白是怎么回事了先看看最终前端的展示效果这里我用的后端是node,服务框架用的是express首先安装express和ws,我的安装包信原创 2024-04-16 18:04:03 · 909 阅读 · 3 评论 -
vue3页面导出为PDF文件
尝试了很多方法,都没有找到完美的解决方法目前网上有个思路,就是将页面先转存为图片,然后将图片另存为PDF文件记录一下完整过程。原创 2024-04-11 14:55:31 · 931 阅读 · 0 评论 -
react+vite+antD+reduce+echarts项目完整记录
之前写前端项目,都是用的vue,从最开始的vue2到后来的vue3,断断续续写了3年,打包工具也从webpack转到了vite,全局数据管理工具从vuex转到了pinia。总体而言,vue3对比vue2,有非常明显的提升,vite比webpack打包的速度更是快了无数倍,至于pinia和vuex,因人而异,我更喜欢pinia,组合式api的写法深得我心。总而言之一句话,我是全方面拥抱了vue3的新技术栈,当然,除了TS,TS对后端比较友好,我只能算半个后端,用不用无所谓。原创 2024-03-28 18:05:02 · 1255 阅读 · 0 评论 -
react+redux完成登录页面及token的存取和登录保持
关于登录页面,我在写vue项目的时候,写了很多篇博客来记录。原因是登录确实比较复杂,涉及前后端联调、全局数据管理、浏览器本地存储等多个环节的技术。框架换成react后,逻辑是一样的,但是技术栈及语法却完全不一样了,有必要记录一下整个过程。首先看看登录界面,简单的两个输入框,和一个登录按钮,用的antDesign的UI框架。原创 2024-03-27 10:23:50 · 1251 阅读 · 0 评论 -
react组件通讯
原理就是通过props传递自定义属性,与vue原理一样,但比vue更容易理解。原创 2024-03-26 11:57:22 · 915 阅读 · 0 评论 -
vue3中的文字滚动播报
之前UI框架一直使用的elementPlus,有个需求,需要在页面上写个滚动播放新闻的功能,发现UI框架居然没有这个组件。花了一下午,在ChatGPT的帮助下,总算写成功了,先看最终展示效果web页面滚动播放文字视频被压缩的稀烂了,GIF又没法上传,截个图看看吧直接上代码:原创 2024-03-14 18:01:56 · 1062 阅读 · 1 评论 -
vue3中watch侦听器的使用
侦听器(watch)是vue的核心语法之一,用于监听数据的变化情况。在写项目时经常会遇到,但经常忘记,重新学习了一下尚硅谷的vue3视频,记录一下最新的用法情况。原创 2024-03-07 16:07:14 · 1037 阅读 · 0 评论 -
vue3项目中使用mapv
目前mapv在vue框架中的使用案例还是比较少的,官网给的示例都是原生写法,写在项目中不是这里报错就是那里报错🙈,几乎可以把人整崩溃。不知道怎么回事,百度地图的开发团队似乎更加倾向于react或者原生,而对vue的支持明显不够,对国内开发者不太友好。不管是mapv还是echarts,似乎都存在各种各样的坑,尤其是设计地图的开发展示另外,开源是一把双刃剑,有些开源的作者简直提供的就是一堆垃圾代码,如果不能维护好,建议先不要开源(个人意见)真的是春节前的最后一篇技术博客了,希望来源永无bug。。原创 2024-02-06 18:26:40 · 1933 阅读 · 2 评论 -
vue3项目中的404页面
春节前的最后一篇技术博客了写了不少vue项目,发现一直没有正确处理404页面。也就是说404页面是为了防止用户访问不存在的路由地址而设计的,当用户访问一个不存在的地址时,这个地址将会重定向至404页面。原创 2024-02-05 11:47:37 · 2329 阅读 · 0 评论 -
vue3+echarts绘制某省区县地图
工作中经常需要画各种各样的图,echarts是使用最多的工具,接近春节,想把之前画的echarts图做一个整合,方便同事和自己随时使用,因此用vue3专门写了个web项目,考虑之后不断完善其中有这么个需求,需要展示某省各区县的数据,写在vue3项目中,最终展示结果如下:大体的思路如下:主要用的程序语言是JavaScript和Python下面详细介绍,有些技术细节也是自己经常遇到的,通过这段时间强化训练,感觉对echarts越来越熟练了首先上地址,阿里云数据可视化平台,感谢阿里和高德提供如此牛逼的工具然后选择原创 2024-01-26 09:15:54 · 1823 阅读 · 1 评论 -
vue3中的插槽使用
vue插槽分三种,默认插槽、具名插槽和作用域插槽,实现在同一个组件中填充不同的内容,项目中也经常会遇到,自己写的可以复用的组件中,经常会用到前2种,而UI组件库中经常会用到作用域插槽,记录一下用法。原创 2024-01-15 15:40:58 · 679 阅读 · 0 评论 -
vue3中组合式api的常用方法
记录一下vue3中常用的组合式api,包括计算属性computed、监听器watch及watchEffective。原创 2024-01-12 15:40:06 · 549 阅读 · 0 评论 -
node后端+vue前端实现接口请求时携带authorization验证
我们在写web项目时,后端写好接口,前端想要调用后端接口时,除了登录注册页面,所有的请求都需要携带authorization,这样是为了避免随意通过接口调取数据的现象发生。这是写web项目时最基础的点,但是也挺麻烦的,涉及前后端好几个地方的编码,经常忘记怎么写的,现在记录一下。大体就这么几个步骤,下面细化。原创 2024-01-11 16:43:15 · 2121 阅读 · 0 评论 -
VUE3实现点击按钮下载文件功能
在写vue项目时,有个需求是点击表格中某一行的下载按钮,然后开始下载这一行对应的文件,效果如下:表格每行的最右侧的蓝色按钮就是点击下载,这里涉及到原生的JavaScript写法,长期在写vue项目,原生的写法都很陌生了,记录一下先上组件的原始代码:我用的是vue3+setup语法糖写法,代码比较长,关注一下与下载相关的代码原创 2023-12-29 08:50:59 · 4529 阅读 · 0 评论 -
JavaScript数组常用方法v2
数组名.push(数据)就是往数组末尾添加数据就是这个数组的长度。原创 2023-12-21 15:37:46 · 902 阅读 · 0 评论 -
ElementPlus中的分页逻辑与实现
分页是web开发中必不可少的组件,element团队提供了简洁美观的分页组件,配合table数据可以实现即插即用的分页效果。分页的实现可以分成两种,一是前端分页,二是后端分页。这两种分页分别适用于不同的业务场景,分页写了无数回了,但一直记不住,因此记录一下这两种分页效果的逻辑和实现。原创 2023-12-14 09:36:25 · 3293 阅读 · 1 评论 -
vue3父组件调用子组件el-dialog对话框
在写项目的时候,经常要使用父子组件通讯,我已经写了很多篇博客来介绍父子组件通讯了,vue中的父子组件通讯方式有差不多10来种,最常用的就那么一两种,这里我介绍其中我认为最基础的两种。因为目标是在父组件中,通过点击按钮事件来打开子组件中的el-dialog对话框,所以比传统的父传子要复杂一点。原创 2023-12-13 08:43:44 · 2829 阅读 · 6 评论 -
vue3项目中使用iconfont图标
写前端项目时,经常要用到iconfont图标,我最原始的方法是吧iconfont图标下载为png/svg文件,然后在文件中作为资源引入,后来发现这么搞太不专业了记录一下相对比较靠谱的使用方法。原创 2023-12-05 18:26:54 · 2350 阅读 · 1 评论 -
ElementPlus自定义表单验证
/ 密码的验证规则![0-9]+$)(?!if (!callback(new Error('密码必须是由6-20位字母+数字组合'))} else {callback()核心在于正则表达式。原创 2023-12-01 14:44:58 · 321 阅读 · 0 评论 -
Element-plus消息框显示不正常解决方案
不知道问题出现在哪里,反正就是点击按钮并没有在页面上弹出对应的框,而是在某个角落显示,经常遇到,老是忘记怎么写,记录一下解决方案。在main文件中引入message和message-box对应的样式文件就可以了,我怀疑这是由于局部引入时没有引入样式文件造成的。原创 2023-11-29 14:42:22 · 241 阅读 · 1 评论 -
css实现鼠标悬停时元素的显示与隐藏
注意,悬浮是悬浮在layer的父元素也就是menu上,悬浮时,设置display:block;感觉这个功能经常会遇到,但一直没弄明白具体怎么实现的,现在仔细学习了一下,总算搞清楚了。首先看正常情况下,鼠标未悬浮时layer的样式。跟着B站黑马学习小兔鲜项目,有个点记录一下。上面是完整代码,关键在于layer的样式。原创 2023-11-13 15:53:02 · 2616 阅读 · 0 评论 -
CSS中的栅格布局
在写前端项目的时候,我之前一直习惯使用flex布局,flex布局写起来比较随心,几乎可以实现任意形式的页面布局。不过自从B占看到某位大佬的grid布局后,发现布局居然还可以这么玩,正好自己在写一个vue3的项目,需要写几个大屏展示方案,用栅格布局实现了一下,发现真香看一下最后的实现效果,真实效果比这个好很多,因为有数据和地图,但这里主要记录怎么使用栅格布局,所以我只将精髓页面分上中下三部分,整体使用flex布局,排列方向是column。上面是标题,中间是数据看板,下面是展示的核心内容上面也是用的flex布局原创 2023-10-30 10:22:00 · 333 阅读 · 1 评论 -
ElementPlus表格中的背景透明
最近写大屏,用到elementplus中的el-table,为了让显示效果好看一点,需要把表格的白色背景调整为透明,与整个背景融为一体。可以参考的资料非常少,大部分都是ElmentUI的方法,在某个前端开发群里问了一下解决方案,大佬给出的解决方案直接让我拍案叫绝,记录一下,以后翻起来更容易。原创 2023-10-20 16:34:00 · 1202 阅读 · 1 评论 -
在线地图获取城市路网数据
近期科研项目中,需要获取城市路网数据,于是详细阅读各大在线地图api接口,总结出来这么一条可行的思路:1. 首先获取城市轮廓2. 根据城市轮廓把城市分割成若干个小块3. 在每个小块中根据在线地图的POI检索接口,检索小块中的道路,获取道路清单4. 根据道路清单去获取道路经纬度数据原创 2023-09-25 16:11:31 · 1671 阅读 · 0 评论 -
vue3中使用第三方插件mitt实现任意组件通讯
组件通讯是vue3组合式开发的核心之一,现在我在写代码时,一个组件的代码超过了200行,基本都会拆分组件。原创 2023-08-18 15:37:11 · 1495 阅读 · 0 评论 -
前端CSS文字阴影text-shadow记录
;height;;;</</</</</效果:下面代码只放CSS部分。原创 2023-08-06 16:27:45 · 781 阅读 · 0 评论 -
解决vue3+echarts关于无法获取dom宽度和高度的问题
不过还有个问题得说一下,很明显,我用了elementplus作为UI框架,我特别喜欢el-card这个组件,所以很多时候我都用它来做布局,但是我在用的时候,发现我很难掌握它的布局规律,尤其是在结合echarts画图的时候,各种dom相关的问题层出不穷,所以我不得不放弃使用el-card,二是自己用div来做布局。第二个报错是说不能获取到echarts对应dom的宽或高,这个问题一般出现在设置dom节点的宽和高时,用了百分比形式,ECharts的宽高默认是以像素为单位的,并不能直接使用百分比来设置。原创 2023-08-04 14:34:45 · 6657 阅读 · 2 评论 -
vue项目登录页面实现记住用户名和密码
下次再登录,就会根据上一次的勾选状态来判断是否填充form输入框,逻辑如下。挂载页面时,判断localstorage中是否有需要的对象。记录一下实现的逻辑,应该分两步来理解这个逻辑。因为逻辑比较简单,就不再画图了。原创 2023-07-27 15:27:59 · 2595 阅读 · 2 评论 -
vue3中动态设置echarts图的高度
近期写个vue3项目,中间要使用echarts图,因为要适配不同的显示器,简直快被搞疯了。这个问题搞了无数次,但每次都会遇到,记录一下本次的解决方案。原创 2023-07-24 11:16:49 · 2020 阅读 · 0 评论 -
vue3使用provide&inject实现祖孙组件通讯
之前在使用vue2时,写过一篇博客记录简单来说,父传子通过自定义属性,子传父通过自定义事件,兄弟间通过事件总线。也有更直观的vuex实现任意组件之间的数据通讯,但写起来实在太复杂vue3父子组件传值方式类似,只是写法有所变化,同时取消了事件总线,依然可以使用vuex,不过我更倾向于在vue3中使用pinia实现数据管理,最近写的项目也都是用的pinia,虽然推荐这种写法,但其实原理和vuex一样,都挺复杂还有一个问题,就是祖孙组件之间的数据通讯,按理说pinia或者vuex都可以实现。原创 2023-07-13 09:28:52 · 342 阅读 · 0 评论 -
vue3+pinia用户信息持久缓存(token)的问题
对博主来说,这是个相当复杂的问题。当初在使用vue2+vuex进行用户信息持久登录时,写了不下3篇博客,确实是解决了问题,博客链接如下第一篇博客是记录前端如何使用token,简言之,就是先把后端传过来的token写入到浏览器的localstorage缓存中,前端在处理路由之前,先检查localstorage中有没有token,有token就放行,没有token就跳转到登录界面第二篇博客是发现token过期后的处理方式,最后我的vue2项目都没有使用这篇博客中的解决方案,而是使用了第三篇博客的解决方案。原创 2023-07-06 14:15:58 · 4508 阅读 · 0 评论 -
JavaScript数组常用方法
JavaScript数组常用方法方法名语法作用返回值原数组示例push数组名.push(数据)往数组末尾添加数据原数组的长度是var arr = [10, 20, 30, 40]res = arr.push(20)console.log(arr);//[10,20,30,40,20]console.log(res);//5unshift数组名.unshift(数据)往数组头部添加数据原数组的长度是var arr = [10, 20, 30, 40] r原创 2023-04-21 10:56:59 · 699 阅读 · 0 评论 -
宝塔面板部署node+vue项目注意事项
如果服务器上没有安装宝塔面板,需要先安装,安装流程如下:从宝塔官网主页进去,点击下载安装,然后点击在线安装输入服务器IP和密码在服务器上安装宝塔面板等待一段时间,安装完成之后,会弹出一个对话框,告诉你宝塔面板的地址、用户名和密码在浏览器上输入面板地址,然后输入用户名和密码即可连接到云服务器。原创 2023-03-28 14:29:54 · 4345 阅读 · 0 评论 -
CSS样式记录
记录一些个人遇到的花了很久才解决的CSS样式问题,长期更新。原创 2023-03-07 16:33:12 · 2908 阅读 · 0 评论 -
百度地图API添加自定义标记解决单html文件跨域
因为要往百度地图上添加一些标注点,而且这些标注点要用自定义的图片,而且只能使用单html文件,不能使用服务器(也别问为什么,就是这么个需求),做起来遇到了一些问题记录一下过程先上一下百度地图JS API的地址复制代码,设置自己的AK,改一下代码,基本上就能实现添加标注点了效果如下:代码如下(代码和百度API上有一点不一样,直接复制就行了):自定义标注现在我想把红色的标记点换成自己本地的图片,如下这个图片正常的写法应该如下:如果这么写,不开启服务器的话,就会涉及到跨域的问题,这个图片在页面上是显示不出来原创 2023-02-17 15:49:45 · 8687 阅读 · 1 评论 -
vue+node+mysql全栈项目完整记录
因工作需要,近半年一直在写B/S架构的项目。博主作为门外汉coder,其实刚开始会的语言只有Python和matlab。matlab作为博主研究生期间写论文的主要工具,参加工作以后就很少用了。后面因为要做数据分析相关的工作,所以自己学了一下Python,包括qt界面开发相关的技术。个人觉得Python作为后端开发语言,其实已经很强大了。现在在后端开发领域之所以java依旧是王者,主要是因为很多项目都是java开发的,用java维护起来更加方便。被大家诟病的弱类型语言,其实Python3已经可以强制类型了。原创 2023-01-17 11:26:38 · 20837 阅读 · 19 评论 -
vuex笔记
vuex笔记,供博主自己查阅原创 2022-12-15 15:57:47 · 12735 阅读 · 0 评论