后台管理登录页需要的配置以及和代码

1.login.vue

<template>
  <div class="login">
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span>登录页</span>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"  class="demo-ruleForm">
        <el-form-item label="账号" prop="uname">
          <el-input type="text" v-model="ruleForm.uname"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="text" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()" style="width: 100%">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { setToken } from '@/utils/token.js'
import { loginAPI } from '@/api/index.js'
import {validateUname,validatePassword} from '@/utils/validete.js'
export default {
  data() {
    
    return {
      ruleForm: {
        uname: '',
        password: ''
      },
      rules: {
        uname: [{ validator: validateUname, trigger: 'blur' }],
        password: [{ validator: validatePassword, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm() {
      // 点击判断
      this.$refs.ruleForm.validate(async (bValidateRes) => {
        if (bValidateRes) {
          try {
            const {data: { message, status, token, username }} = await loginAPI(this.ruleForm.uname)

            console.log( message, status, token, username );

            if (status === 200) {
              setToken('username', username)
              setToken('token', token)
              this.$message({ message, type: 'success' })
              this.$router.push('/home')
            }

          } catch ({ message }) {
            this.$message({ message, type: 'error' })
          }
          
        } else {
          this.$message({ message: '输入错误', type: 'error' })
        }
      })
    }
  }
}
</script>

<style lang="less">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(../image/bg.1b93b72e.jpg) no-repeat;
  background-size: 100%;
}
.box-card {
  width: 500px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%);
}
.el-card{
  background-color: rgba(0, 0, 0, 0.2);
  color: aliceblue;
}
.el-form-item__label{
  color: aliceblue !important;
}
</style>

2.在utils文件夹里，创建validete.js文件：写以下代码

export var validateUname = (rule, value, callback) => {
  const reg = /^[\w-]{4,16}$/
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else if (!reg.test(value)) {
    callback(new Error('用户名输入错误'))
  } else {
    callback()
  }
}
export var validatePassword = (rule, value, callback) => {
  console.log(rule,'rule');
  const reg = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (!reg.test(value)) {
    callback(new Error('密码输入错误'))
  } else {
    callback()
  }
}

3.router配置

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes=[
  {
    path:'/',
    redirect: '/login'
  },{
    path:'/login',
    name:'/login',
    component:()=>import('@/views/login.vue')
  },{
    path:'/home',
    name:'home',
    component:()=>import('@/views/home.vue')
  },{
    path:'*',
    component:()=>import('@/views/error.vue')
  }

]
const router= new VueRouter({
  routes
})
export default router


最后在main.js里导入以下