Vue3+SpringBoot实现【登录】【毛玻璃】【渐变色】

白开水为啥没味

已于 2023-08-01 13:55:02 修改

阅读量1.2k

点赞数 2

分类专栏：笔记文章标签： vue.js elementui javascript 前端 css

于 2023-02-11 23:10:16 首次发布

本文链接：https://blog.csdn.net/qq_53478650/article/details/128987910

版权

笔记专栏收录该内容

32 篇文章 4 订阅

订阅专栏

首先创建Login.vue，编写界面和样式

这个是渐变色背景，登陆框背景为白色

<template>
   <div class="wrapper">
     <div style="margin: 200px auto; background-color: #fff; width: 350px; height: 300px;padding: 20px;
     border-radius: 10px">
       <div style="margin: 20px 0;text-align: center;font-size: 24px"><b>登录</b>
         <el-input size="medium" style="margin: 10px 0" v-model="user.username">
           <template #prefix>
             <el-icon class="el-input__icon">
               <user></user>
             </el-icon>
           </template>
         </el-input>

         <el-input size="medium" style="margin: 10px 0" show-password v-model="user.password">
           <template #prefix>
             <el-icon class="el-input__icon">
               <lock></lock>
             </el-icon>
           </template>
         </el-input>

         <div style="margin: 10px 0; text-align: right">
           <el-button type="primary" size="small" autocomplete="off">登录</el-button>
           <el-button type="primary" size="small" autocomplete="off">注册</el-button>
         </div>
       </div>
     </div>
   </div>
</template>

<script>
import {Lock, User} from "@element-plus/icons";
export default {
  name: "LoginView",
  components: {Lock, User},
  data(){

    return{
      user:{}
    }
  }
}
</script>

<style scoped>
 .wrapper{
   height: 100vh;
   background-image: linear-gradient(to bottom right,#FC466B,#3F5EFB);
   overflow:hidden;
 }
</style>

，如果想要登录框为毛玻璃，可以将上面第二个div的 “background-color: #fff;”去掉

然后把这个div设置为class=login，编写login类的样式如下

 .login{
   background-color:rgba(255,255,255,0.1); //透明度
   backdrop-filter: blur(10px);  //毛玻璃效果
 }

效果：（如果换一个比较鲜艳的背景，毛玻璃效果会更明显）

设置Login.vue的路由

绑定登陆按钮的点击时间login

编写login事件

 methods:{
    login(){
          this.request.post("http://localhost:8081/login",this.user).then(res =>{
            if(!res){
              this.$message.error("用户名或密码错误")
            }else {
              this.$message.success("登陆成功")
              this.$router.push("/new/home")
            }
          })
    }
  }

定义一个UserDto类

import lombok.Data;

/*
接受前端登陆请求的参数
 */

@Data
public class UserDto {
    private String username;
    private String password;

}

编写接口：

 //登陆的接口  RequestBody是将前端json传后端
    @PostMapping("/login")
    public boolean login(@RequestBody UserDto userDto){
        String username = userDto.getUsername();
        String password = userDto.getPassword();
        //这个if校验最好放在前端做
        if(StrUtil.isBlank(username)||StrUtil.isBlank(username))  {//判断是否为空，且使用了hutool里的工具类
         return false;
        }
        return userService.login(userDto);
    }

编写业务层接口

public boolean login(UserDto userDto) {
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("username",userDto.getUsername());
        queryWrapper.eq("password",userDto.getPassword());
        User one = getOne(queryWrapper);
        return one!=null;
    }

即可实现登录功能

如果想要退出登陆，其实很简单，给退出绑定一个router-link就可以了

    <el-dropdown-item>
               <router-link to="/login" style="text-decoration: none">退出</router-link>
    </el-dropdown-item>

完善：

添加校验

（1）在把需要校验的部分用el-form表单标签括起来

<el-form  :rules="rules">
         <el-input size="default" style="margin: 10px 0" v-model="user.username">
           <template #prefix>
             <el-icon class="el-input__icon">
               <user></user>
             </el-icon>
           </template>
         </el-input>

         <el-input size="default" style="margin: 10px 0" show-password v-model="user.password">
           <template #prefix>
             <el-icon class="el-input__icon">
               <lock></lock>
             </el-icon>
           </template>
         </el-input>

         <div style="margin: 10px 0; text-align: right">
           <el-button type="primary" size="small" autocomplete="off" @click="login">登录</el-button>
           <el-button type="warning" size="small" autocomplete="off">注册</el-button>
         </div>
       </el-form>

（2）在element-plus官网找到form那一块的校验 Form 表单 | Element Plus (element-plus.org)

将rules绑定属性填进form标签

然后在return里填写官网给的rules返回的数据形式，编写校验的规则

return {
      user: {},
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur'},
        ],
      }
    }

再把我们的规则用prop传值写在el-form-item里面

 <el-form-item  label="用户名" prop="username" >
           <el-input size="default"  v-model="user.username" >
             <template #prefix>
               <el-icon class="el-input__icon">
                 <user></user>
               </el-icon>
             </template>
           </el-input>
         </el-form-item>


         <el-form-item  label="密码" prop="password" >
         <el-input size="default"  show-password v-model="user.password" >
           <template #prefix>
             <el-icon class="el-input__icon">
               <lock></lock>
             </el-icon>
           </template>
         </el-input>
         </el-form-item>

此时如果没有传值，会出提示，但是提示并不会消失

我们则需要在e-form处传一个校验：此时输入正确后，提示将会消失

label-width=“auto”会让标签默认右对齐

最后效果：

简单版的login到这里就结束了，但是这样写登陆的业务逻辑判断不是很好。但是如果不是在公司做登陆，只是做一个简单的系统是足够的。

加强处理异常，和规范性

创建一个common的包，里面创建接口Constans和Result类

package com.lnw.common;

public interface Constants {
    String CODE_200 = "200";      //成功

    String CODE_401 = "401";      //权限不足
    String CODE_400 = "400";      //参数错误
    String CODE_500 ="500";       //系统错误
    String CODE_600 = "600"; //其它业务异常
}

package com.lnw.common;

import jdk.nashorn.internal.objects.annotations.Constructor;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/*
接口统一返回包装类
 */

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {
    private String code;
    private String msg;
    private Object data;

    public static Result success(){
        return new Result(Constants.CODE_200,"",null);
    }

    public static Result success(Object data){
        return new Result(Constants.CODE_200,"",data);
    }

    public static Result error(String code,String msg){
        return new Result(code,msg,null);
    }
    public static Result error(){
        return new Result(Constants.CODE_500,"系统错误",null);
    }




}

创建exception包，创建全局管理器和重写ServiceException

package com.lnw.exception;


import com.lnw.common.Result;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;
//全局自定义异常处理器

@ControllerAdvice
public class GlobalExceptionHandler {
        @ExceptionHandler(ServiceException.class)
    @ResponseBody
    public Result handle(ServiceException se ){
            return Result.error(se.getCode(),se.getMessage());
        }

}

@Data
public class ServiceException extends RuntimeException {
    private String code;
    //构造器
    public ServiceException (String code, String msg){
        super(msg);
        this.code=code;
    }
}

重新封装接口 controller

 //登陆的接口  RequestBody是将前端json传后端
    @PostMapping("/login")
    public Result login(@RequestBody UserDto userDto){
        String username = userDto.getUsername();
        String password = userDto.getPassword();
        //这个if校验最好放在前端做
        if(StrUtil.isBlank(username)||StrUtil.isBlank(username))  {//判断是否为空，且使用了hutool里的工具类
         return Result.error(Constants.CODE_400,"参数错误");
        }
        UserDto dto = userService.login(userDto);
        return Result.success(dto);
    }

重新写前端接口

login(){
          this.request.post("http://localhost:8081/login",this.user).then(res =>{
            // if(!res){
            //   this.$message.error("用户名或密码错误")
            // }else {
            //   this.$message.success("登陆成功")
            //   this.$router.push("/new/home")
            // }
            if(res.code === '200'){
              // 如果获取到，则存一个user对象 为了替换登录后右上角的个人用户名
              localStorage.setItem("user",JSON.stringify(res.data)) //存储用户信息到浏览器

              this.$router.push("/new/home")
              this.$message.success("登陆成功")
            }else {
              this.$message.error(res.msg)
            }
          })
    }

这样就是更规范版本的登陆

白开水为啥没味

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue3+SpringBoot实现【登录】【毛玻璃】【渐变色】

如果想要登录框为毛玻璃，可以将上面第二个div的 “background-color: #fff;如果想要退出登陆，其实很简单，给退出绑定一个router-link就可以了。然后把这个div设置为class=login，编写login类的样式如下。效果：（如果换一个比较鲜艳的背景，毛玻璃效果会更明显）首先创建Login.vue，编写界面和样式。绑定登陆按钮的点击时间login。这个是渐变色背景，登陆框背景为白色。设置Login.vue的路由。定义一个UserDto类。
复制链接

扫一扫