生成登录页验证码
1). 生成验证码
在 src
新建 utils
文件夹,然后新建 createCaptcha.js
文件,复制贴入以下代码:
src/utils/createCaptcha.js
1 export default function(num = 6, letters = 'QWERTYUIOPLKJHGFDSAZXCVBNM1234567890') { 2 let tpl = '' 3 let captcha = [] 4 5 try { 6 captcha = [...Array(num)].map(() => letters[Math.floor(Math.random() * letters.length)]) 7 } catch (e) {} 8 9 captcha.forEach(item => { 10 tpl += `<span class="flex1 hcenter">${item}</span>` 11 }) 12 13 captcha = captcha.join('') 14 15 return { 16 tpl, 17 captcha 18 } 19 }
2). 使用验证码
1、打开 src/views/auth/Register.vue
文件,复制以下代码替换原 <script>
:
src/views/auth/Register.vue
1 <script> 2 import createCaptcha from '@/utils/createCaptcha' 3 4 export default { 5 name: 'Register', 6 data() { 7 return { 8 captchaTpl: '' // 验证码模板 9 } 10 }, 11 created() { 12 this.getCaptcha() 13 }, 14 methods: { 15 getCaptcha() { 16 const { tpl, captcha } = createCaptcha() 17 18 this.captchaTpl = tpl 19 this.localCaptcha = captcha 20 } 21 } 22 } 23 </script>
2、查找 <div class="thumbnail"
,添加点击事件处理器 getCaptcha
,并在其子元素上绑定 captchaTpl
:
src/views/auth/Register.vue
1 <!-- 修改 --> 2 <div class="thumbnail" title="点击图片重新获取验证码"> 3 <div class="captcha"></div> 4 </div> 5 <!-- 为 --> 6 <div class="thumbnail" title="点击图片重新获取验证码" @click="getCaptcha"> 7 <div class="captcha vcenter" v-html="captchaTpl"></div> 8 </div>
生命周期钩子created在实例创建完成后立即被调用,此时已经可以访问实例的数据对象和方法了。
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 终于决定:把自己家的能源管理系统开源了!
· C#实现 Winform 程序在系统托盘显示图标 & 开机自启动
· 了解 ASP.NET Core 中的中间件
· 实现windows下简单的自动化窗口管理
· 【C语言学习】——命令行编译运行 C 语言程序的完整流程