电商管理后台的登录流程

**一登录的流程

1.登录的form表单

    <!-- ref="loginFormRef" 代表重置表单 --><el-form class="wzl_login_form" :model="loginForm" :rules="loginFormRules" ref="loginFormRef"><!-- 用户名 --><!-- prop="username 代表验证" --><el-form-item prop="username"><el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input></el-form-item><!-- 密码 --><el-form-item prop="password"><el-input prefix-icon="iconfont icon-3702mima" v-model="loginForm.password" type="password"></el-input></el-form-item><!-- 登录按钮 --><el-form-item class="wzl_btns"><el-button type="primary" @click="login">登录</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form><!-- 登录表单区域结束-->

2.登录的表单校验

data() {return {// 这是登录表单的数据绑定对象loginForm:{username:'',password:'',},//这是表单的验证正则的对象55loginFormRules:{username:[{ required: true, message: '请输入登录用户名', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],password:[{ required: true, message: '请输入登录密码', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 6 个字符', trigger: 'blur' }],}};},

3.登录的接口调用

 methods: {//   点击重置按钮，重置登录表单resetLoginForm(){this.$refs.loginFormRef.resetFields();},login(){if(this.loginForm.username == "" || this.loginForm.password == ""){this.$message.error("用户名和密码不能为空");return false;}//获取线上接口this.$axios.post("https://www.liulongbin.top:8888/api/private/v1/login",{username:this.loginForm.username,//用户名password:this.loginForm.password,//用户密码}).then(res=>{console.log(res)if(res.meta.status == 200){//成功信息提示this.$message.success(res.meta.msg);// 登录成功吧token值存到本地sessionStorage.setItem("wangzhaolong",res.data.token);//登录成功跳转到后台首页this.$router.push('/admin/wanghome')}else{//失败提示的信息this.$message.error(res.meta.msg)}})}}

4.你对登录的流程以及总结？

我们先在data中定义一个loginForm数组，数组里面存放登录的用户名username和登录的密码password
在通过el-form :model 进行双向绑定，然后在input框内绑定对应的属性名
然后我们在methods方法里进行掉接口
我们通过this.$axios.get(“路径名”,后面跟上对应的参数)，然后判断他后台返回来的状态如果等于200的情况下，让他跳转到后台的首页并且把他的token值存储到本地，然后提示用户登录成功，不等于200的情况下让他，提示用户登录失败

电商管理后台的登录流程相关推荐

电商管理后台功能介绍
电商管理后台功能介绍管理员登录.退出用户管理 1.查看用户列表.可以使用分页跳转页码查看 2.查询指定用户 3.添加用户 4.修改用户信息 5.删除用户权限管理角色列表 1.添加角色 2.查看 ...
黑马VUE电商管理后台笔记记录
电商后台项目遇到的问题 1..eslintrc.js 中 '@vue/standard' 需要删掉或者注释掉 2.不能直接在 vue ui 里面安装 less-loader和less依赖,因为版本问题 ...
vue-shop电商管理后台
第一天 - 项目创建在gitee上创建仓库安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装vue ...
电商管理后台Vue实例
一.安装Mysql 二.安装navicat Navicat 是一套快速.可靠并价格相宜的数据库管理工具, 专为简化数据库的管理及降低系统管理成本而设.它的设计符合数据库管理员.开发人员及中小企业的需 ...
Vue电商系统后台API接口
项目演示入口 ===> 1. 电商管理后台 API 接口文档 1.1. API V1 接口说明接口基准地址:http://127.0.0.1:8888/api/private/v1/ 服务端已 ...
Vue 电商PC后台管理(ElementUI)
Vue 电商PC后台管理(ElementUI) 1.项目概述 1.1电商项目基本业务概述根据不同的场景,电商系统一般都提供了PC端.移动 APP.移动 Web.微信小程序等多种终端访问方式. 1.2 ...
电商平台后台管理系统--环境搭建与管理员登录（一）
将之前写好的ssm复制,重新命名为myecpbm,然后修改相关文件名和配置,文件目录结构和要修改的项目名如下图一图一 1.选中改文件,Window==>show view==>Navig ...
电子证书管理系统前台_电商平台后台之商品管理系统组成模块
"前端用户的一小步,后台系统的一大步",平时常见的功能如购物车.优惠券等,看似简单,实则在后台要经过很多条件的校验.多系统间的信息流转.下面小猪电商介绍下电商平台后台之商品管理系统 ...
《电商系统后台统计报表模块》需求分析与设计的课程小结
<电商系统后台统计报表模块>需求分析与设计的课程小结 1)分工情况介绍,小组分工合作情况介绍张顺程-选题,功能分析,建模 2)选题讨论电商后台的统计报表也是非常重要的一个功能模块,一个 ...

电商管理后台的登录流程

**一登录的流程

电商管理后台的登录流程相关推荐

最新文章

热门文章

电商管理后台的登录流程

**一 登录的流程

电商管理后台的登录流程相关推荐

最新文章

热门文章

**一登录的流程