【Springboot+Vue】做一个权限管理后台（八）：shiro实现手机号免密登陆

效果展示

前端设计

主要在登录界面增加了手机号登录：

	<template>
	  <div class="login-container">
	    <el-tabs v-model="activeName" type="card">
	      <el-tab-pane label="账号/密码登陆" name="name">
	        <el-form
	          :rules="nameRules"
	          label-position="left"
	          label-width="0px"
	          v-loading="loading"
	          :model="nameLoginForm"
	          ref="nameForm"
	          status-icon
	        >
	          <h3 class="login_title">系统登录</h3>
	          <el-form-item prop="account">
	            <el-input
	              type="text"
	              v-model="nameLoginForm.username"
	              auto-complete="off"
	              placeholder="账号"
	            ></el-input>
	          </el-form-item>
	          <el-form-item prop="checkPass">
	            <el-input
	              type="password"
	              v-model="nameLoginForm.password"
	              auto-complete="off"
	              placeholder="密码"
	            ></el-input>
	          </el-form-item>
	          <div></div>
	          <el-form-item style="width: 100%">
	            <el-button type="primary" @click.native.prevent="submitNameClick" style="width: 100%">登录</el-button>
	          </el-form-item>
	        </el-form>
	      </el-tab-pane>
	
	      <el-tab-pane label="手机免密登陆" name="phone">
	        <el-form
	          :rules="phoneRules"
	          label-position="left"
	          label-width="0px"
	          v-loading="loading"
	          :model="phoneLoginForm"
	          ref="phoneForm"
	          status-icon
	        >
	          <h3 class="login_title">系统登录</h3>
	          <el-form-item prop="phone">
	            <el-input
	              type="text"
	              v-model="phoneLoginForm.phone"
	              auto-complete="off"
	              placeholder="手机号"
	            ></el-input>
	          </el-form-item>
	          <el-form-item prop="checkCode">
	            <el-input v-model="phoneLoginForm.checkCode" auto-complete="off" placeholder="5位验证码">
	              <template slot="append">
	                <span v-if="!send" @click="sendCheckCode">{
   {
   msg}}</span>
	                <span v-else>{
   {
   msg}}</span>
	              </template>
	            </el-input>
	          </el-form-item>
	          <el-form-item style="width: 100%">
	            <el-button
	              type="primary"
	              @click.native.prevent="submitPhoneClick"
	              style="width: 100%"
	            >登录</el-button>
	          </el-form-item>
	        </el-form>
	      </el-tab-pane>
	    </el-tabs>
	  </div>
	</template>
	<script>
	import {
    get, post } from "@/utils/http";
	export default {
   
	  data() {
   
	    var phoneCheck = (rule, value, callback) => {
   
	      var value = this.phoneLoginForm.phone;
	      if (!value) {
   
	        return callback(new Error("年龄不能为空"));
	      }
	      var reg = /^[1][3,4,5,7,8][0-9]{
   9}$/;
	      if (!reg.test(value)) {
   
	        return callback(new Error("请输入正确的手机号"));
	      }
	      callback();
	    };
	    var nameCheck = (rule, value, callback) => {
   
	      var value = this.nameLoginForm.username;
	      if (!value) {
   
	        return callback(new Error("用户名不能为空"));
	      }
	      callback();
	    };
	    var passwordCheck = (rule, value, callback) => {
   
	      var value = this.nameLoginForm.password;
	      if (!value) {
   
	        return callback(new Error("密码不能为空"