为了系统安全,不能是js前端生成图形码,容易在本地就被破解和获取。
一般是前端请求,通过服务后台生成图形码流,返回给前端显示,然后提交业务时,校验图形码。
三、源代码:
1、/ components / captcha.vue
<uni-popup ref="popup" type="center">
<div class="popup-content">
<image style="width: 130px; height: 50px; background-color: #eeeeee;" :src="captchaBase64" />
<div style="text-align: right;font-size: 12px;">
<a href="javascript:void(0);" title="点我换一个" @click="queryList()" class="tar cup c43a3c1">看不清?</a>
</div>
<div style="margin-top: 10px;">
<uni-easyinput v-model="formData.captcha" placeholder="请输入图形码" @keyup.enter.native="submit()" autocomplete="off" clear focus />
</div>
</div>
<div class="popup-footer">
<button type="primary" class="btn-submit" @click="submit" :disabled="formData.captcha?false:true">{{btnTitle || '验证'}}</button>
</div>
<div class="popup-close" @click="close">
<uni-icons type="close" size="25" color="#bbb"></uni-icons>
</div>
</uni-popup>
......
......
2、/ pages / login.vue
......
<captcha ref="captcha" title="请输入图片验证码" :btn-title="'发送短信验证码'" type="getLoginSms" :req-data="captchaData" @success="captchaSuccess()"></captcha>
......
源码链接:vue+uniapp实现图形验证码功能-插件(附源码)
源码链接:vue+uniapp实现图形验证码功能-插件(附源码)
源码链接:vue+uniapp实现图形验证码功能-插件(附源码)
三、附:发短信相关安全机制
基础学习:
前端最基础的就是 HTML , CSS 和 JavaScript 。
网页设计:HTML和CSS基础知识的学习
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
动态交互:JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。