效果图

1.template部分

<div><el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules"><h3 class="login_title">系统登录</h3><el-form-item label="用户名" prop="userName"><el-input v-model="form.userName" placeholder="请输入账号"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input show-password v-model="form.password" placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button></el-form-item></el-form></div>

2.style部分

这里我用的是less编写，

需要下载less和less-loader

<style lang="less" scoped>
.login-container {width: 400px;border:1px solid #eaeaea;margin: 180px auto;padding: 35px 35px 15px 35px;border-radius: 15px;box-shadow: 0 0 25px #cac6c6;background-color: #ffffff;box-sizing: border-box;.login_title {text-align: center;margin-bottom: 40px;color: #505458;}.el-input {width: 198px;}.login_button {margin-left: 105px;margin-top: 10px;}.login_register {width: 70px;height: 40px;text-align: center;margin-top: 10px;}
}

3.vue部分

（1）.引入封装的axios接口，方便后面联调

import {GetLogin} from "@/Api/api";

这里每个人的都不一样，这只是我的封装

（2）表单

trigger

触发方式

String

click/focus/hover/manual

click

required

是否必填，如不设置，则会根据校验规则自动生成

boolean

—

false

blur

在 Input 失去焦点时触发

(event: Event)

data() {return {form: {userName:'',password:'',},rules: {userName: [{required: true,trigger: 'blur',message: '长度在6到16个字符',min: 6, max: 16,}],password: [{required: true,trigger: 'blur',message: '请输入密码',min: 6, max: 16,}],}}},

（3）.methods部分

validate

对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

Function(callback: Function(boolean, object))

methods: {//提交方法submit() {this.$refs.validate((valid) => {if (valid) {// 封装的接口使用GetLogin({// 表单的数据userName: this.form.userName,password: this.form.password,}).then(({data}) => {// console.log(data)if (data.code === 200) {//将token存储在本地localStorage.setItem('token',data.data.token)//若登录成功则跳转到指定路由this.$router.push('/')} else {this.$message.error(data.data.rules.message)}})}})}}

4.完整代码

<template><div><el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules"><h3 class="login_title">系统登录</h3><el-form-item label="用户名" prop="userName"><el-input v-model="form.userName" placeholder="请输入账号"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input show-password v-model="form.password" placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button></el-form-item></el-form></div>
</template><script>
import {GetLogin} from "@/Api/api";export default {name: "AppLogin",data() {return {form: {userName:'',password:'',},rules: {userName: [{required: true,trigger: 'blur',message: '长度在6到16个字符',min: 6, max: 16,}],password: [{required: true,trigger: 'blur',message: '请输入密码',min: 6, max: 16,}],}}},methods: {//提交方法submit() {this.$refs.validate((valid) => {if (valid) {// 封装的接口使用GetLogin({// 表单的数据userName: this.form.userName,password: this.form.password,}).then(({data}) => {// console.log(data)if (data.code === 200) {//将token存储在本地localStorage.setItem('token',data.data.token)//若登录成功则跳转到指定路由this.$router.push('/')} else {this.$message.error(data.data.rules.message)}})}})}}
}
</script><style lang="less" scoped>
.login-container {width: 400px;border:1px solid #eaeaea;margin: 180px auto;padding: 35px 35px 15px 35px;border-radius: 15px;box-shadow: 0 0 25px #cac6c6;background-color: #ffffff;box-sizing: border-box;.login_title {text-align: center;margin-bottom: 40px;color: #505458;}.el-input {width: 198px;}.login_button {margin-left: 105px;margin-top: 10px;}.login_register {width: 70px;height: 40px;text-align: center;margin-top: 10px;}
}
</style>

若有不足或错误之处，欢迎指点

【Vue2注册登录界面】Vue2+elementUI编写一个登录页面，路由式开发，后台管理系统登录界面相关推荐

elementui 搭建布局页面路由_【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局...
前言大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局
前言大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
C# 淘宝商品微信返利助手开发-（九）编写一个vue页面用于复制淘口令
系列教程一目录:返利助手原理系列教程二目录:返利助手开放文档以及帐号申请地址系列教程三目录:返利助手开发(1)API介绍系列教程四目录:返利助手开发(2)淘宝分享的内容如何只取淘口令系列教程五 ...
编写一个jsp页面selectMusic.jsp, 该页面使用select(下拉列表)提供一些歌曲名
题目: 编写一个jsp页面selectMusic.jsp, 该页面使用select(下拉列表)提供一些歌曲名, 单击提交键提交给当前页面, 然后当前页面播放用户选择的音乐(音频文件保存的Web服务目录 ...
python后端脚手架_flask-adminlte-scaffold是一个Python环境下的WEB后台管理系统脚手架...
flask-adminlte-handler 简介 flask-adminlte-handler是一个Python环境下的WEB后台管理系统脚手架,目标是用极少量的代码,快速构建小型WEB应用.请勿在 ...
【Vue 实战项目】后台管理系统登录页详解附源码
提示:前端查漏补缺,仅代表个人观点. 文章目录一.先看效果图二.实战步骤 1. 创建项目 2. 引入库 3. 登录页关键代码三.页面源代码总结提示:项目源代码除了登录页面还有动态路由一.先 ...
网上书店后台管理系统UI界面分享
网上书店后台管理系统UI界面分享分享一个自己做的项目用到的布局和配色. 喜欢的朋友可以参考.
后台管理系统-------登录功能@zj-zhangjie
后台管理系统-------登录功能实现(element-ui) 登录页面代码(login): <template><div class="login">&l ...
基于easyui 1.3.6设计的后台管理系统模板界面
原文:基于easyui 1.3.6设计的后台管理系统模板界面源代码下载地址:http://www.zuidaima.com/share/1843477461879808.htm
【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
bilibili在线视频演示地址: [前端代码实例]使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能效果图: 完整代码: <!DOCTYPE ...

【Vue2注册登录界面】Vue2+elementUI编写一个登录页面，路由式开发，后台管理系统登录界面

效果图