此功能基于vue (v2.6.8) +打印稿(v3.3.3333),引入极验(geet v3 +)(官方api),使用其产品:“绑定”模式,页面挂载后初始化ininGeetest,点击登录按钮后先做表单验证,通过后弹出滑块框,拖动验证成功,执行登录方法。
本项目为前后端分离,所以后端部署部分,请自行参考文档操作
后台接口:
开始:/公共/js目录添加jquery-1.12.3.min。js文件和gt.js(下载)在公共/index . html中引入以上添加的两个文件login.vue使用注意事项:要注意在gt。js中,initGeetest已被挂载到窗口对象
页面可能报错:未捕获SyntaxError:意想不到的令牌& lt;
将报错对象添加到与公共同级的静态目录下(没有则新建),修改引入路径即可。
源码:
& lt;脚本lang=皌”比;
从“进口{isValidUsername} @/跑龙套/验证的;
进口{组件,Vue,看}“vue-property-decorator”;
从“vue-router”进口{路线};
从“element-ui进口{ElForm}/类型/形式”;
从“element-ui”进口{加载};
从“vuex-class”进口{行动};
从“进口AuthServices @/服务/user/auth.ts”;
从“@/服务/第三方/进口ThirdpartyServices index.ts”;
const validateUsername=(规则:任何价值:字符串,回调:有)=比;{
如果(!值){
回调(新的错误(“用户名不能为空'));//}else if (! isValidUsername(值)){//回调(新的错误(“请输入正确的用户名'));
其他}{
回调();
}
}；
const validatePass=(规则:任何价值:字符串,回调:有)=比;{
如果(!值){
回调(新的错误(“密码不能为空'));//}else if(价值。长度& lt;5){//回调(新的错误(“密码不能小于5位'));
其他}{
回调();
}
}；
@ component ({
名称:“登录”,
}）
出口类默认登录扩展Vue {
@Action(身份验证/登录)私人login_action !:CCS.LoginAction;
私人loginForm={用户名:密码:“};
私人loginRules={
用户名:[{触发:“模糊”,验证器:validateUsername}),
密码:[{触发:“模糊”,验证器:validatePass}),
}；
私人加载=false;
私人重定向:字符串|未定义=定义;
私人captchaEntity:任何;//私有loadingInstance:任何;
@Watch(美元路线,{立即:真})private>
& lt; div类=發ogin_form_wraper”比;
& lt; div类=發ogo_show”比;
& lt; img src=" https://www.yisu.com/zixun/require(@/资产/图片/logo_w328.png)”在
& lt;/div>
& lt; img类=癴orm_bg”: src=" https://www.yisu.com/zixun/require(@/资产/图片/login_form.png)”在
& lt; el-form ref=皉efform”类=自动完成“登录表单”=皁n”标签位置=白蟆?
:模型=" loginForm”:规则=發oginRules”比;
& lt; el-form-item道具=坝没北?
& lt; el-input v模型=" loginForm。用户名“name="用户名" type=" text "自动完成=" "占位符="用户名”/比;
& lt;我class=" iconfont icon-zhanghaodenglu icon_prefix”祝辞& lt;/i>
& lt;/el-form-item>
& lt; el-form-item道具=懊苈搿北?
& lt; el-input v模型=" loginForm。密码“name="密码" type="密码"自动完成=" "占位符="密码”
@keyup.enter。本机=" handleLogin "/比;
& lt;我class=" iconfont icon-mima icon_prefix”祝辞& lt;/i>
& lt;/el-form-item>
& lt; el-form-item类=發ogin_btn”比;
& lt; el-button v=" !加载login_btn_click“@click.native.prevent=祝辞登录& lt;/el-button>
& lt; el-button:加载="加载" v-else @click.native.prevent=癶andleLogin祝辞登录中& lt;/el-button>
& lt;/el-form-item>
& lt;/el-form>
& lt;/div>
& lt;/div>
& lt;/template>
& lt;风格lang=氨省眘coped>
@ import“~ @/资产/风格/var.styl”;
@ import ~ @/资产/风格/页面/login.styl”;
.login-container
通过
& lt;/style>
