vue 登录页面逻辑详解

登录页面

<template>
	<div class="login">
		<el-form
			ref="loginForm"
			:model="loginForm"
			:rules="loginRules"
			class="login-form"
		>
			<h3>vue公众号后台管理系统</h3>
			<el-form-item prop="username">
				<el-input
					v-model="loginForm.username"
					type="text"
					auto-complete="off"
					placeholder="账号"
				>
					<svg-icon
						slot="prefix"
						icon-class="user"
						class="el-input_icon input-icon"
					></svg-icon>
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input
					v-model="loginForm.password"
					type="password"
					auto-complete="off"
					placeholder="密码"
					@keyup.enter.native="handleLogin"
				>
					<svg-icon
						slot="prefix"
						icon-class="user"
						class="el-input_icon input-icon"
					></svg-icon>
				</el-input>
			</el-form-item>
			<el-form-item prop="code">
				<el-input
					v-model="loginForm.code"
					auto-complete="off"
					palceholder="验证码"
					style="width: 63%"
					@keyup.enter.native="handleLogin"
				>
					<svg-icon slot="prefix" icon-class="valiCode" class="el-input__icon input-icon"></svg-icon>
				</el-input>
				<div class="login-code">
					<img :src="codeUrl" @click="getCode" class="login-code-img" />
				</div>
			</el-form-item>
			<el-checkbox
				v-model="loginForm.rememberMe"
				style="margin: 0 0 25px 0"
			>