vue通用后台管理（登录页面）

1.这里是一个form表单，有两个表单域一个是用户名，一个是密码，还有一个底部的 button 按钮，点击button会将表单的内容提交到我们的后端。

2.找到router下的index.js 新建一个路由

3.view下面新建一个文件夹 Login/login.vue

4.将第3中的login.vue组件写成1中的那个结构。

表单则需要引入form，elementui的form,首先给form里面model这个数据呢给他起个名称叫做form即 :model='' form '' 。 data数据中把form这个对象给定义出来 form：{}

status-icon 这个属性表示表单校验的时候他的一个图标

表单要有校验功能，则需要添加一个 rules,然后出传入的属性也叫rules 即 :rules='' rules '' 我们对于rules 的定义，

第一个我们的用户名，我们起名叫username，然后我们定义我们的校验内容，首先required：true 他是必填的，如果校验不通过我们需要给他一个提示 message：'' 请输入用户名 '' ，另外呢还有一个触发的方式 trigger：'' blur '' 他是鼠标失去焦点触发。我们对用户名称有一个长度的限制，最小的一个长度为3位 min:3,同时我们给他添加一个校验的文案 message:" 用户名长度不能小于3位 "，接着我们一样的也需要加上一个触发方式 trigger：'' blur '' 到这里user的这个校验就完成了。

另外一个是 password 密码校验。

也是必填，信息文案 message：" 请输入密码 " ，也是失去焦点触发

配置完成之后，再给form添加ref 给他起个名称form 即 ref=" form " 通过ref来获取我们这个form的实例，方便我们调用form下面的属性和方法。

另外我们给他一个 label-width 这个是它名称的一个宽度。 label-width=" 100px "

再起个类名称 class=" login-container "

<template><el-form:model="form"status-icon:rules="rules"ref="form"label-width="100px"class="login-container"><!-- 系统登录 --><h3 class="login_title">系统登录</h3><!-- 用户名 --><el-form-item label="用户名" label-width="80px" prop="username" class="username"><el-inputtype="input"v-model="form.username"auto-complete="off"placeholder="请输入账号"></el-input></el-form-item><!-- 密码 --><el-form-item label="密码" label-width="80px" prop="password"><el-inputtype="password"v-model="form.password"auto-complete="off"placeholder="请输入密码"></el-input></el-form-item><!-- 登录按钮 --><el-form-item class="login_submit"><el-button type="primary" @click="login" class="login_submit">登录</el-button></el-form-item></el-form>
</template><script>
export default {name: 'Login',data() {return {form: {},rules: {username: [{required: true,message: '请输入用户名',trigger: 'blur',},{min: 3,message: '用户名长度不能小于3',trigger: 'blur',},],password: [{required: true,message: '请输入密码',trigger: 'blur',},],},}},methods: {login() {},},
}
</script><style lang="less" scoped>
.login-container {border-radius: 15px;background-clip: padding-box;margin: 180px auto;width: 350px;padding: 35px 35px 15px 35px;background-color: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;
}
.login_title {margin: 0 auto 40px auto;text-align: center;color: #505458;
}
.login_submit {margin: 10px auto 0 auto;
}
</style>

页面显示的最终结果：

vue通用后台管理（登录页面）相关推荐

vue中后台管理登录后的token管理
在做后台管理系统的时候,登录后token管理很重要.上代码,有瑕疵,有待改善,见谅. import Vue from 'vue' import Router from 'vue-router' imp ...
网站后台管理-登录页面
一.要实现的功能 1.登录页面有用户名和密码的验证,用户名和密码不能为空,长度在一定范围之内. 2.用户登录后,将用户的登录信息保存在session中. 3.注重安全性,不能在地址栏输入地址就能直接访 ...
vue通用后台管理系统（保姆级）--持续更新中
配合目录使用更加友好哦,文章中分享的项目搭建是完全从0-1搭建,完全适用于小白,可用于vue练手项目,目前还在持续更新中,本篇文章不会断更,因工作原因,只能晚上给大家更新,感觉还行的可以给个关注或者收 ...
SpringBoot+Vue+Mybatis-plus 博客（一）：完成博客后台前端登录页面、后端登录接口
SpringBoot+Vue+Mybatis-plus 博客:个人博客介绍及效果展示 SpringBoot+Vue+Mybatis-plus 博客(一):完成博客后台前端登录页面.后端登录接口 Spr ...
Vue实现后台管理案例
Vue实现后台管理案例(★★★) 案例效果: 点击左侧的"用户管理","权限管理","商品管理","订单管理",&quo ...
vue+elementUI 后台管理极简模板
vue+elementUI 后台管理极简模板写在前面此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建好了一个后台管理系统的基础框架,教你如何在此基础上快速开 ...
Axure经典案例高保真交互下载（数据统计图高保真原型+雷达图+条形图+折线图+web端通用后台管理原型+统计表、统计分析+用户画像分析）
Axure原型作品内容包括:数据统计图高保真原型+雷达图+条形图+折线图+web端通用后台管理原型+统计表.统计分析+用户画像分析+认证监控预警以下是Axure部分作品图片截图展示,想看交互效果的请 ...
Bootstrap4+MySQL前后端综合实训-Day02-PM【新闻管理后台（登录页面、首页）、#left＞a:nth-child(4) {}】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录主页 #left>a:nth-child(4) {} 登录页主页 #left& ...
VUE通用后台管理系统（一）登录
先看效果 1)安装vue脚手架,项目配置,项目启动,这一步不做过多赘述,假设你已经成功启动了项目 2)配置路由 1.src/router/index.js中进行路由设置,代码如下 import Vue ...

vue通用后台管理（登录页面）

vue通用后台管理（登录页面）相关推荐

最新文章

热门文章