vue实现登录时的图片验证码（纯前端）

蔚落 2023-09-30 10:31 23阅读 0赞

`提示：这里只将我成功运行出来的案例放在这里供大家参考`

## 一、图片验证码 ##

经过我一天的查询，[《vue实现登录时的图片验证码》][vue]，这篇博客效果比较好，代码基本没有什么问题的。效果如下，点击图片即可刷新验证码  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_17_color_FFFFFF_t_70_g_se_x_16]  
其中一些变量、方法的解释：  
identifyCodes：生成验证码的规则  
identifyCode：验证码  
makeCode（）：生成验证码的方法  
refreshCode（）：刷新验证码的方法

（其实只要你把那篇博客的代码直接照搬就行了）

## 二、可能存在的问题 ##

### 1. Module not found:Error:Can\`t resolve ‘less-loader’ ###

参考博客：[初学Vue 遇到Module not found:Error:Can\`t resolve ‘less-loader’ 问题][Vue _Module not found_Error_Can_t resolve _less-loader_]，大家去看一下就行了。

[vue]: https://www.jb51.net/article/210830.htm
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6027353861b04925972bc05205b6d38a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_17,color_FFFFFF,t_70,g_se,x_16
[Vue _Module not found_Error_Can_t resolve _less-loader_]: https://blog.csdn.net/xtjatswc/article/details/103156302

发表评论取消回复

表情：

评论列表（有 0 条评论，23人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实现登录时的图片验证码（纯前端）

`提示：这里只将我成功运行出来的案例放在这里供大家参考` 一、图片验证码经过我一天的查询，[《vue实现登录时的图片验证码》][vue]，这篇博客效果比较好，代码基本

蔚落/ 2023年09月30日 10:31/ 0 赞/ 24 阅读

相关 html页面实现登录验证码功能（纯前端）

html+css+javascript简易实现注册或登录时实现验证码功能：原文链接：https://blog.csdn.net/weixin\_41472431/artic

阳光穿透心脏的1/2处/ 2023年09月28日 10:13/ 0 赞/ 48 阅读

相关登录中的图片验证码功能实现

添加kaptcha依赖 <dependency> <groupId>com.github.axet</groupId> <artifactId>k

旧城等待，/ 2022年12月27日 07:56/ 0 赞/ 228 阅读

相关 SpringBoot + Hutool 实现图片验证码登录

文章目录准备一个登录页面导入 Maven 依赖使用 Hutool 工具生成验证码 LineCaptcha 线段干扰的验证码

怼烎@/ 2022年12月05日 12:14/ 0 赞/ 993 阅读

相关 Vue前端接收后端返回的图片、验证码图片

[https://blog.csdn.net/qq\_43477721/article/details/106100824][https_blog.csdn.net_qq_43

柔光的暖阳◎/ 2022年11月11日 05:16/ 0 赞/ 206 阅读

相关前端设置，验证码登录

<group class="shadow" gutter="0"> <x-input v-model="mobileCaptcha" place

一时失言乱红尘/ 2022年10月27日 13:53/ 0 赞/ 194 阅读

相关纯前端生成验证码

纯前端生成验证码生成验证码的方法： function code_draw() { var canvas_width = $('ca

ゝ一世哀愁。/ 2022年10月12日 15:58/ 0 赞/ 227 阅读

相关使用图片验证码进行登录验证

需求：后端系统登录时使用图片验证码验证登录效果： ![97cb7cdf761348639c5df974e66bd751.jpg][] 使用 4 位数字加字母组合验证码登

妖狐艹你老母/ 2022年08月28日 01:47/ 0 赞/ 341 阅读

相关 JavaWeb 登录实现图片验证码

主要思路： 1）打开页面生成随机验证码图片，可更换图片，通过java后端实现。同时把生成的验证码保存在session作用域中。 2）用户输入验证码，提交

缺乏、安全感/ 2022年04月10日 03:25/ 0 赞/ 500 阅读

相关 Vue纯数字验证码

该验证码为4个数字生成的验证码，亲自验证点击切换，验证码组件Identify.vue可直接复制使用提示: 该验证码图片缩小后数字经常看不清所以在这里仅仅是实现，没有详细进行

谁借莪１个温暖的怀抱￠/ 2022年03月26日 09:06/ 0 赞/ 319 阅读