这个是前后端分离的逻辑,所以我们先看前端
Login.vue
<template>
<div class="login-wrap">
<el-form ref="form" label-width="80px" :model="loginForm" class="login-from">
<h2>品有购后台管理系统 - 登录</h2>
<el-form-item label="用户名">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item label="验证码">
<el-col :span="11">
<el-input v-model="loginForm.code"></el-input>
</el-col>
<el-col class="line" :span="2"> </el-col>
<el-col :span="11">
<el-image style="width: 100px; height: 35px" :src="verify.src"></el-image>
<i class="el-icon-refresh" size="mini" @click="verifyCode"></i>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" class="login-btn" @click="login">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
verify: {},
log