springboot+vue+elementsUI 实现分角色注册登录界面

一、项目简介

一共分为三个角色：管理员、用户、设计师

登录功能：账号+密码+身份选择，登录成功后跳转到各身份对应的页面

注册功能：只允许用户和设计师注册，用户可以直接注册成功，设计师提交材料后注册需要管理员审核成功后方可注册成功。

注册页面要求必填：

账号：用户自定义，注册成功后不可修改，同一个角色下账号不重复，不同角色账号可以重复。

二、注册

1.前端

先上目录文件：

 

（1）register.vue文件

template部分：

<template>
  <div class="register-container">
    <!-- 根标签 -->
    <el-form
        :model="form"
        status-icon
        :rules="rules"
        ref="form"
        label-width="100px"
        class="register-form">

      <h1 class="title">注 册</h1>
      <el-form-item label="账号" prop="useraccount">
        <el-input v-model="form.useraccount"
                  placeholder="账号作为登陆的唯一方式，一旦注册成功不可更改！"
                  maxlength="20"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="userpsd">
        <el-input
            type="password"
            v-model="form.userpsd"
            placeholder="请输入密码"
            autocomplete="off"
            maxlength="16"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
            type="password"
            v-model="form.checkPass"
            placeholder="请再次输入密码"
            autocomplete="off"
            maxlength="16"
        ></el-input>
      </el-form-item>

      <el-form-item label="姓名" prop="username">
        <el-input v-model="form.username" maxlength="20"></el-input>
      </el-form-item>

      <el-form-item label="性别"  prop="sex" style="text-align:left">
        <el-radio-group v-model="form.sex" >
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
        </el-radio-group>
        </el-form-item>

      <el-form-item label="年龄"  prop="age" style="text-align: left">
        <el-input v-model="form.age" maxlength="2"></el-input>
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone" maxlength="11" @input="onInput('keyName', $event)"></el-input>
      </el-form-item>

      <el-form-item label="地址" prop="address" style="text-align: left" >
        <v-distpicker :placeholders="placeholders" v-model="form.address"
                      @province="onChangeProv"
                      @city="onChangeCity"
                      @area="onChangeArea"></v-distpicker>
      </el-form-item>

      <el-form-item label="目的" prop="roleId" style="text-align: center">
        <div style="margin-top: 20px">
          <el-radio v-model="form.roleId" label="1" border size="mini">我是客户，我想装修房子</el-radio>
          <el-radio v-model="form.roleId" label="2" border size="mini" >我是设计师，我想设计装修</el-radio>
        </div>
      </el-form-item>

      <div v-if="form.roleId==2">
        <el-form-item v-model="form.file" label="材料证明" prop="file" style="text-align: center">
      <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">请上传设计师相关材料验证，只能上传jpg/png文件，且不超过500kb</div>
      </el-upload></el-form-item>
  </div>

      <el-form-item style="text-align: center">
        <el-button type="primary" @click="submit('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

script部分：包含输入验证 表单提交功能

<script>
import VDistpicker from 'v-distpicker'
export default {
  name: "Register",
  components: {VDistpicker},
  data() {
    return {
      form: {
        useraccount: '',
        userpsd: '',
        sex: '1',
        roleId: '1',
        address: '',
        province: '',
        city:'',
        area: '',
      },
      rules: {
        useraccount: [{required: true, message: "请输入账号", trigger: "blur"},
          {min: 1, max: 20, message: '请勿超过20个字符！', trigger: 'blur'},
          {validator: (rule, value, callback) => {
              const reg = /^[\u4E00-\u9FA5A-Z