基于Ant Design vue框架登录demo

我们直接进入正题吧~~~
先来看下效果图

那么前端代码呢~~~
不着急，这就双手奉上哈~~

<a-col :span="12"><div class="login-body"><a-formid="formLogin"class="user-layout-login"ref="formLogin":form="form"@submit="handleSubmit"><a-tabs:activeKey="customActiveKey":tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"@change="handleTabClick"><a-tab-pane key="tab1" tab="账号密码登录"><a-alert v-if="isLoginError" type="error" showIcon message="账户或密码错误"/><br /><a-form-item><a-inputsize="large"type="text"placeholder="请输入帐户"v-decorator="['account',{rules: [{ required: true, message: '请输入帐户' }], validateTrigger: 'change'}]"><a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" /></a-input></a-form-item><a-form-item><a-inputsize="large"type="password"autocomplete="false"placeholder="请输入密码"v-decorator="['password',{rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}]"><a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" /></a-input></a-form-item></a-tab-pane></a-tabs><a-form-item style="margin-top:24px"><a-buttonsize="large"type="primary"htmlType="submit"class="login-button":loading="state.loginBtn":disabled="state.loginBtn">登录</a-button></a-form-item></a-form></div></a-col>

handleSubmit(e) {/**@Param 防止冒泡*/e.preventDefault()const {form: { validateFields },state,customActiveKey,Login} = thisstate.loginBtn = trueconst validateFieldsKey = customActiveKey === 'tab1' ? ['account', 'password'] : ['mobile', 'captcha']// validateFieldsKey是用来声明带有账号和密码的一个总的字段validateFields(validateFieldsKey, { force: true }, (err, values) => {if (!err) {/** @description 将用户名和加密的密码到后端进行查询验证,并会走Login方法进入到下一阶段进行流程的走向*  @param  路径走向说明：会走到src\store\modules\user.js中的Login方法* @fileName Login.vue*/const loginParams = { ...values }loginParams.account = values.accountloginParams.password = md5(values.password)Login(loginParams).then(res => this.loginSuccess(res)).finally(() => {/** @description state.loginBtn = false 进行状态的刷新* @param 就是说当我们输入账号和密码输入错误时，在提示的同时，也要刷新此登录按钮* @fileName Login.vue*/state.loginBtn = false})} else {setTimeout(() => {state.loginBtn = false}, 600)}})}

具体走的Logig方法只是参考哈：

Login({commit}, userInfo) {return new Promise((resolve, reject) => {login(userInfo).then(response => {const result = response.data// eslint-disable-next-line no-unused-varsconst authorities = 'login'// if (result.authorities && result.authorities.length > 0) {if (authorities || authorities.length > 0) {Vue.ls.set(MENU, authorities, null)// commit('SET_AUTH', result.authorities)commit('SET_INFO', result.user)} else {reject(new Error('你没有权限，请联系管理员'))}commit('SET_NAME', {// name: result.user.name,name: '123',welcome: welcome()})// commit('SET_AVATAR', result.user.avatar)commit('SET_AVATAR', '123')resolve(response)}).catch(error => {reject(error)})})},// 退出Logout({commit,state}) {return new Promise((resolve) => {logout(state.token).then(() => {resolve()}).catch(() => {resolve()}).finally(() => {commit('SET_TOKEN', '')commit('SET_ROLES', [])Vue.ls.remove(ACCESS_TOKEN)})})}}

温馨说明：

路径说明：

以上流程只是仅供参考哈~~~只是个人觉得把重要的逻辑所罗列出来而已。若是觉得那里有问题，可以留言，大家一起进步，谢谢来客的查看。共勉！！！

基于Ant Design vue框架登录demo相关推荐

基于Ant Design vue框架之三删除功能细分
我们还是老规矩,先上效果图吧~~ 需要看整个页面的小盆友可以点下面这个路径哈~~ 页面路径:总页面展示继续上干货吧~翠花,上代码~~ <a-button type="danger&q ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
基于Ant Design UI框架的React项目
概述这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目详细代码下载:http://www.demodashi.com/demo ...
Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值简化了渲染的子组 ...
ant design vue简单登录界面
<template><div class="login-container"><h2 class="login-title"> ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
ant design vue table 高度自适应_很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
Vue3:基础项目UI框架PC端（Element ui，view-ui-plus，Ant Design Vue）
1.Element ui 文档已经更新至Vue3,可以放心使用,在使用Element ui的时候注意在使用弹性布局的时候,Element ui中的Table 表格会出现缩放无法自适应问题. 安装 $ ...
基于Ant Design of Vue实现时长组件 duration
最近遇到一个需求,需要一个输入时长的组件,在经过一番寻找后没有合适的,最终自己动手写一个(实现了v-model双向绑定),记录一下,也给小伙伴们提供一个方便. 本示例基于ant design of v ...

基于Ant Design vue框架登录demo

基于Ant Design vue框架登录demo相关推荐

最新文章

热门文章