springboot+vue+elementsUI實現(xiàn)分角色注冊登錄界面功能

更新時間：2023年07月04日 10:02:45 作者：小冰紅茶27

這篇文章主要給大家介紹了關(guān)于springboot+vue+elementsUI實現(xiàn)分角色注冊登錄界面功能的相關(guān)資料,Spring?Boot和Vue.js是兩個非常流行的開源框架,可以用來構(gòu)建Web應(yīng)用程序,需要的朋友可以參考下

一、項目簡介

一共分為三個角色：管理員、用戶、設(shè)計師

登錄功能：賬號+密碼+身份選擇，登錄成功后跳轉(zhuǎn)到各身份對應(yīng)的頁面

注冊功能：只允許用戶和設(shè)計師注冊，用戶可以直接注冊成功，設(shè)計師提交材料后注冊需要管理員審核成功后方可注冊成功。

注冊頁面要求必填：

賬號：用戶自定義，注冊成功后不可修改，同一個角色下賬號不重復(fù)，不同角色賬號可以重復(fù)。

二、注冊

1.前端

先上目錄文件：

（1）register.vue文件

template部分：

<template>
  <div class="register-container">
    <!-- 根標(biāo)簽 -->
    <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="確認(rèn)密碼" 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" >我是設(shè)計師，我想設(shè)計裝修</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">請上傳設(shè)計師相關(guān)材料驗證，只能上傳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-Za-z0-9]+$/  //正則表達(dá)式 只能輸入英文、漢字與數(shù)字
              if (!reg.test(value)) {
                callback(new Error('請勿輸入特殊字符'))
              } else {
                callback()
              }}}
        ],
        userpsd: [{required: true, message: "請輸入密碼", trigger: "blur"},
          {min: 6, max: 16, message: '長度在 6 到 16個字符', trigger: 'blur'}
        ],
        checkPass: [{required: true, message: "請再次輸入密碼", trigger: "blur"},
          {min: 6, max: 16, message: '長度在 6 到 16個字符', trigger: 'blur'},
          {validator: (rule, value, callback) => {
              if (value !== this.form.userpsd) {
                callback(new Error("兩次輸入密碼不一致"));
              } else {
                callback()
              }}}]
      },
         placeholders: {
        province: '請選擇省份',
        city: '請選擇市',
        area: '請選擇區(qū)',
      },
    };
  },
  methods: {
    onChangeProv(province) {
    this.province=province.value;
    },
    onChangeCity(city) {
      this.city=city.value;
    },
    onChangeArea(area) {
      this.area=area.value;
    },
    // 首先限制它只能輸入整數(shù)，最大長度為maxlength="11"，其次是當(dāng)它輸入長度達(dá)到11位時進(jìn)行校驗
    onInput(key, event) {
      this.form[key] = event.replace(/[^\d]/g, '')
      if (event.length >= 11) {
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
        if (!reg.test(event)) {
          console.log('您輸入的手機號不正確')
        }
      }
    },
    submit() {
      //校驗輸入
      this.$refs.form.validate((valid)=>{
        if (valid){
          this.form.address=this.province+this.city+this.area;    //包裝地址
         //注冊功能
          this.$axios.post(this.$httpUrl + '/login/register', this.form).then(res => res.data).then(res => {
          console.log(res)
        //用戶注冊成功或設(shè)計師成功提交材料后，顯示相關(guān)信息后自動返回首頁
        if (res.code === 200) {
          if (this.form.roleId==1){
            alert("用戶注冊成功")
            window.location.href = "/Login";
          }else{
            alert("您的注冊材料已提交，請等候管理員審批！")
            window.location.href = "/Index";
          }
        } else {
          alert("該賬號已注冊過！請重新輸入")//注冊失敗，返回注冊頁面
        }
      })
        }else{
          alert("請按照規(guī)范輸入賬號")
        }
      })
    }
}
}
</script>

style部分：

<style scoped>
.register-container {
  /*position: absolute;*/
  width: 100%;
  height: 100%;
  overflow: hidden;
 background-image: url("../assets/reg_background.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.register-form {
  width: 600px;
  margin: 150px auto;
  background-color: rgb(214, 174, 218);
  padding: 30px;
  border-radius: 20px;
}
.title {
  text-align: center;
  font-family: 幼圓;
}
</style>

（2）main.js文件

import Vue  from 'vue';
import Element from 'element-ui';
import VueRouter from 'vue-router';
import 'element-ui/lib/theme-chalk/index.css';
import 'default-passive-events';
import VDistpicker from 'v-distpicker'
export default{
  component:{ VDistpicker }
}
import App from './App.vue'
import axios from 'axios';
import router from "./router/index.js";
Vue.prototype.$axios=axios;//數(shù)據(jù)跨域
Vue.prototype.$httpUrl='http://localhost:8090'
Vue.config.devtools=true
Vue.config.productionTip = false
Vue.use(Element);
Vue.use(VueRouter);
new Vue({
  el:'#app',
  router,
  render: h => h(App),
});

（3）index.js文件

主要設(shè)置router，實現(xiàn)頁面之間的跳轉(zhuǎn)

import VueRouter from 'vue-router'
import Index from "../components/Index.vue";
import DesignShow from "../components/user/DesignShow.vue";
import EnterpriseShow from "@/components/user/EnterpriseShow";
import DesignerShow from "@/components/user/DesignerShow";
import Login from "@/components/Login";
import Register from "@/components/Register";
import AdminIndex from "@/components/admin/AdminIndex";
import DesignerIndex from "@/components/designer/DesignerIndex";
const routes=[
        {   path:'/Index', name:'Index', component:Index},
        {   path:'/DesignShow', name:'DesignShow', component:DesignShow},
        {   path:'/EnterpriseShow', name:'EnterpriseShow', component:EnterpriseShow},
        {   path:'/DesignerShow', name:'DesignerShow', component:DesignerShow},
        {   path:'/Login', name:'Login', component:Login},
        {   path:'/Register', name:'Register', component:Register},
        {   path:'/admin/Index', name:'adminIndex', component:AdminIndex},
        {   path:'/designer/Index', name:'designerIndex', component:DesignerIndex}
    ]
const router = new VueRouter({
    routes,
    mode: "history" //路由模式(默認(rèn)為hash模式)
})
export default router

最終頁面：

2. 后端：

我后端的端口是8090

目錄結(jié)構(gòu)

（1）LoginController.java文件

我注冊和登錄后端放在一個controller文件中了

package com.yjt.controller;
import com.yjt.common.Result;
import com.yjt.entity.User;
import com.yjt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@CrossOrigin(origins = "*")  //跨域設(shè)置
@RequestMapping("/login")
public class LoginController {
    @Autowired
    private UserService userService;
    @PostMapping("/login")
    public Result login (@RequestBody User user){
        List<User> userList1=userService.query().eq("useraccount",user.getUseraccount()).
                eq("role_id",user.getRoleId()).list();  //查找賬號是否已注冊
        if (!userList1.isEmpty()){  //賬號注冊過
            //查找賬號密碼是否匹配
            List<User> userList2=userService.query().eq("useraccount",user.getUseraccount()).
                    eq("userpsd",user.getUserpsd()).eq("role_id",user.getRoleId()).list();
            if(!userList2.isEmpty()){   //賬號密碼一致
                return Result.suc(user,0L);
            }else{
                return Result.fail(401);  //code:401代表密碼錯誤
            }
        }else{
            return  Result.fail();   //默認(rèn)code400：代表賬號未注冊
        }
    }
    @PostMapping("/register")
    public Result register(@RequestBody User user) {
        int roleId = user.getRoleId();
        String account=user.getUseraccount();
        List<User> userList=userService.query().eq("useraccount", account).
                eq("role_id",roleId).list();
        if (roleId == 1&& userList.isEmpty()) {  //角色為用戶且未注冊過
                int id=userService.count();
                user.setUserid(id+1);
                userService.save(user);
                return Result.suc("用戶注冊成功",null,0L);
            } else if (roleId == 2&& userList.isEmpty()) {  //角色為設(shè)計師且未注冊過
            return Result.suc("您的注冊材料已提交，請等候管理員審批！",user,0L);
        } else {
            return Result.fail();
        }
    }
}

（2）user.java文件

package com.yjt.entity;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableField;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.EqualsAndHashCode;
@Data
@EqualsAndHashCode(callSuper = false)
@ApiModel(value="User對象", description="")
public class User {
    private static final long serialVersionUID = 1L;
    @TableId("Userid")
    private Integer userid;
    @TableField("Username")
    private String username;
    @TableField("Userpsd")
    private String userpsd;
    @TableField("Useraccount")
    private String useraccount;
    private Integer age;
    private Integer sex;
    private String phone;
    @TableField("role_id")
    private Integer roleId;
    @TableField("isValid")
    private String isvalid;
    private String address;
}

（3）Result.java文件

package com.yjt.common;
import lombok.Data;
@Data
public class Result {
    private  int code;
    private String msg;
    private Long total;
    private Object data;
    //失敗
    public static Result fail(){
        return result(400,"Fail!",0L,null);
    }
    public static Result fail(int code){
        return result(code,"Fail!",0L,null);
    }
    //成功！
    public static Result suc(){
        return result(200,"成功Win！",0L,null);
    }
    public static Result suc(Object data){
        return result(200,"成功Win！",0L,data);
    }
    public static Result suc(Object data,Long total){
        return result(200,"成功Win！",total,data);
    }
    public static Result suc(String msg,Object data,Long total){
        return result(200,msg,total,data);
    }
    private static Result result(int code,String msg,Long total,Object data){
        Result result=new Result();
        result.setData(data);
        result.setMsg(msg);
        result.setCode(code);
        result.setTotal(total);
        return result;
    }
}

（4）自動生成的usermapper接口

package com.yjt.mapper;
import com.yjt.entity.User;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface UserMapper extends BaseMapper<User> {
}

與UserMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.yjt.mapper.UserMapper">
    <!-- 通用查詢映射結(jié)果 -->
    <resultMap id="BaseResultMap" type="com.yjt.entity.User">
        <id column="Userid" property="userid" />
        <result column="Username" property="username" />
        <result column="Userpsd" property="userpsd" />
        <result column="Useraccount" property="useraccount" />
        <result column="age" property="age" />
        <result column="sex" property="sex" />
        <result column="phone" property="phone" />
        <result column="role_id" property="roleId" />
        <result column="isValid" property="isvalid" />
        <result column="address" property="address" />
    </resultMap>
    <!-- 通用查詢結(jié)果列 -->
    <sql id="Base_Column_List">
        Userid, Username, Userpsd, Useraccount, age, sex, phone, role_id, isValid,address
    </sql>
</mapper>

（5）接口userService

package com.yjt.service;
import com.yjt.entity.User;
import com.baomidou.mybatisplus.extension.service.IService;
public interface UserService extends IService<User> {
}

userServiceImpl

package com.yjt.service.impl;
import com.yjt.entity.User;
import com.yjt.mapper.UserMapper;
import com.yjt.service.UserService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}

（6）application.yml配置

server:
  port: 8090
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/wisehouse?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT%2B8
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 123456

(7)CodeGenerate.java文件這個是跟著老師敲的文件，具體有什么作用還沒明白。。。。

package com.yjt.common;
import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
import com.baomidou.mybatisplus.core.toolkit.StringPool;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.InjectionConfig;
import com.baomidou.mybatisplus.generator.config.*;
import com.baomidou.mybatisplus.generator.config.po.TableInfo;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;
// 演示例子，執(zhí)行 main 方法控制臺輸入模塊表名回車自動生成對應(yīng)項目目錄中
public class CodeGenerator {
    /**
     * <p>
     * 讀取控制臺內(nèi)容
     * </p>
     */
    public static String scanner(String tip) {
        Scanner scanner = new Scanner(System.in);
        StringBuilder help = new StringBuilder();
        help.append("請輸入" + tip + "：");
        System.out.println(help.toString());
        if (scanner.hasNext()) {
            String ipt = scanner.next();
            if (StringUtils.isNotBlank(ipt)) {
                return ipt;
            }
        }
        throw new MybatisPlusException("請輸入正確的" + tip + "！");
    }
    public static void main(String[] args) {
        // 代碼生成器
        AutoGenerator mpg = new AutoGenerator();
        // 全局配置
        GlobalConfig gc = new GlobalConfig();
        String projectPath = System.getProperty("user.dir")+"/WiseHouse";
        gc.setOutputDir(projectPath + "/src/main/java");
        gc.setAuthor("yjt");
        gc.setOpen(false);
        gc.setSwagger2(true); //實體屬性 Swagger2 注解
        gc.setBaseResultMap(true);//XML ResultMap
        gc.setBaseColumnList(true);//XML columList
        //去掉service接口首字母的I，如DO為User則叫UserService
        gc.setServiceName("%sService");
        mpg.setGlobalConfig(gc);
        // 數(shù)據(jù)源配置
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setUrl("jdbc:mysql://localhost:3306/wisehouse?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT%2B8");
        // dsc.setSchemaName("public");
        dsc.setDriverName("com.mysql.jdbc.Driver");
        dsc.setUsername("root");
        dsc.setPassword("123456");
        mpg.setDataSource(dsc);
        // 包配置
        PackageConfig pc = new PackageConfig();
      //  pc.setModuleName(scanner("模塊名"));
        //二、模塊配置
        pc.setParent("com.yjt")
                        .setEntity("entity")
                                .setMapper("mapper")
                                        .setService("service")
                                                .setServiceImpl("service.impl")
                                                        .setController("controller");
        mpg.setPackageInfo(pc);
        // 自定義配置
        InjectionConfig cfg = new InjectionConfig() {
           @Override
           public void initMap() {
                // to do nothing
            }
        };
        // 如果模板引擎是 freemarker
        String templatePath = "/templates/mapper.xml.ftl";
        // 如果模板引擎是 velocity
        // String templatePath = "/templates/mapper.xml.vm";
        // 自定義輸出配置
        List<FileOutConfig> focList = new ArrayList<>();
        // 自定義配置會被優(yōu)先輸出
        focList.add(new FileOutConfig(templatePath) {
            @Override
            public String outputFile(TableInfo tableInfo) {
                // 自定義輸出文件名 ， 如果你 Entity 設(shè)置了前后綴、此處注意 xml 的名稱會跟著發(fā)生變化??！
                return projectPath + "/src/main/resources/mapper/" + pc.getModuleName()
                        + "/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
            }
        });
        /*
        cfg.setFileCreate(new IFileCreate() {
            @Override
            public boolean isCreate(ConfigBuilder configBuilder, FileType fileType, String filePath) {
                // 判斷自定義文件夾是否需要創(chuàng)建
                checkDir("調(diào)用默認(rèn)方法創(chuàng)建的目錄，自定義目錄用");
                if (fileType == FileType.MAPPER) {
                    // 已經(jīng)生成 mapper 文件判斷存在，不想重新生成返回 false
                    return !new File(filePath).exists();
                }
                // 允許生成模板文件
                return true;
            }
        });
        */
        cfg.setFileOutConfigList(focList);
        mpg.setCfg(cfg);
        // 配置模板
        TemplateConfig templateConfig = new TemplateConfig();
        // 配置自定義輸出模板
        //指定自定義模板路徑，注意不要帶上.ftl/.vm, 會根據(jù)使用的模板引擎自動識別
        // templateConfig.setEntity("templates/entity2.java");
        // templateConfig.setService();
        // templateConfig.setController();
        templateConfig.setXml(null);
        mpg.setTemplate(templateConfig);
        // 策略配置
        StrategyConfig strategy = new StrategyConfig();
        strategy.setNaming(NamingStrategy.underline_to_camel);
        strategy.setColumnNaming(NamingStrategy.underline_to_camel);
       // strategy.setSuperEntityClass("你自己的父類實體,沒有就不用設(shè)置!");
        strategy.setEntityLombokModel(true);
        strategy.setRestControllerStyle(true);
        // 公共父類
        //strategy.setSuperControllerClass("你自己的父類控制器,沒有就不用設(shè)置!");
        // 寫于父類中的公共字段
        strategy.setSuperEntityColumns("id");
        strategy.setInclude(scanner("表名，多個英文逗號分割").split(","));
        strategy.setControllerMappingHyphenStyle(true);
      //  strategy.setTablePrefix(pc.getModuleName() + "_");
        mpg.setStrategy(strategy);
        mpg.setTemplateEngine(new FreemarkerTemplateEngine());
        mpg.execute();
    }
}

三、登錄

前端：Login.vue文件

template部分：

<template>
  <el-container class="login-container">
    <el-form
        :model="sizeForm"
        status-icon
        :rules="rules"
        ref="form"
        label-width="100px"
        margin="0 auto"
        class="login-form">
      <div class="LoginMes">登陸頁面</div>
    <el-form-item label="賬號" size="20px" prop="useraccount" >
      <el-input v-model="sizeForm.useraccount"
                placeholder="請輸入賬號"
                maxlength="20"></el-input>
    </el-form-item>
    <el-form-item label="密碼" size="20px" prop="userpsd">
      <el-input v-model="sizeForm.userpsd"
                type="password"
                placeholder="請輸入密碼"
                autocomplete="off"
                maxlength="16"></el-input>
    </el-form-item>
    <el-form-item label="身份" prop="roleID">
      <div style="text-align: center">
        <el-radio v-model="sizeForm.roleId"  label="0">管理員</el-radio>
        <el-radio v-model="sizeForm.roleId"  label="1">用戶</el-radio>
        <el-radio v-model="sizeForm.roleId"  label="2">設(shè)計師</el-radio>
      </div>
    </el-form-item>
    <el-form-item  style="text-align: center">
      <el-button type="primary" @click="onSubmit">登錄</el-button>
      <el-button  @click="register">注冊</el-button>
    </el-form-item>
  </el-form>
  </el-container>
</template>

script部分：

<script>
export default {
  name: "Login",
  data() {
    return {
      sizeForm: {
        useraccount: '',
        userpsd: '',
        delivery: false,
        roleId:'1',
        type: [],
      },
      rules: {
        useraccount: [{required: true, message: "請輸入賬號", trigger: "blur"},
          {
            validator: (rule, value, callback) => {
              const reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/  //正則表達(dá)式 只能輸入英文、漢字與數(shù)字
              if (!reg.test(value)) {
                callback(new Error('請勿輸入特殊字符'))
              } else {
                callback()
              }
            }
          }
        ],
        userpsd:[{required: true, message: "請輸入密碼", trigger: "blur"},
          { min: 6, max: 16, message: '長度在 6 到 16個字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      //注冊功能
      this.$axios.post(this.$httpUrl + '/login/login', this.sizeForm).then(res => res.data).then(res => {
        console.log(res)
        //登陸成功后，跳轉(zhuǎn)到相應(yīng)頁面
        if (res.code === 200) {
          if (this.sizeForm.roleId==0){
            window.location.href = "admin/Index";
          }else if(this.sizeForm.roleId==1) {
            window.location.href = "/Index";
          }else{
            window.location.href = "designer/Index";
          }
        } else if(res.code === 400){
          alert("該賬號未注冊")//注冊失敗，返回注冊頁面
        }else{
          alert("密碼錯誤")
        }
      })
    },
    register () {
      //指定跳轉(zhuǎn)的地址
      this.$router.replace('/Register')
    }
  }
}
</script>

style部分：

<style scoped>
.LoginMes {
  text-align: center;
  color: #f3730a;
  font-family: 幼圓;
  font-size: 30px;
  margin-bottom: 20px;
}
.login-container {
  /*position: absolute;*/
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("../assets/reg_background.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.login-form {
  width: 480px;
  margin: 150px auto;
  background-color: rgb(143, 180, 229);
  padding: 50px;
  border-radius: 80px;
}
</style>

最終頁面：

先寫到這里，具體方法實現(xiàn)原理等我有空了再繼續(xù)寫

總結(jié)

到此這篇關(guān)于springboot+vue+elementsUI實現(xiàn)分角色注冊登錄界面功能的文章就介紹到這了,更多相關(guān)springboot分角色注冊登錄界面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: