毕业设计Day11--登录界面设计

登录界面相关代码

LoginView.vue

<template>
  <div class="wrapper">
    <div style="margin: 200px auto;background-color: lavenderblush;width: 350px;height: 300px;padding: 20px;border-radius: 10px">
      <div style="margin: 20px 0;text-align: center;font-size: 24px"><b>小温的停车场管理系统</b></div>
      <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
      <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></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>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data(){
    return{
      user:{}
    }
  },
  methods:{
    login(){
      this.request.post("http://localhost:9090/user/login",this.user).then(res => {
        if(!res){
          this.$message.error("用户名或密码错误")
        }else{
          this.$router.push("/")
        }
      })
    }

  }
}
</script>

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

设置UserDTO

package com.ww.car.controller.dto;

import lombok.Data;

/**
 * 接收前端用户登录请求的数据
 */

@Data

public class UserDTO {
    private String username;
    private String password;
}

UserController部分函数

 @PostMapping("/login")
        public boolean login(@RequestBody UserDTO userDTO) {
            String username = userDTO.getUsername();
            String password = userDTO.getPassword();
            if(StrUtil.isBlank(username) || StrUtil.isBlank(password)){
                return false;
            }
            return userService.login(userDTO);
        }

UserServiceImpl函数

同时记得IUserService中添加相应函数头

 @Override
    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;
    }

Bug提醒！！！！！！（已解决）

这是个改了很久的bug
登录按钮对应的login函数如下

一直一直报错404

把地址改成如下即可

但是也容易报500错误，好像是因为数据库中账户和密码重复了的原因，需要删一下数据库中相关数据即可，或使用如下代码抛出或打印异常

标记

听说还有一种方法，在request.js中添加url前缀，暂时还不知道加在哪里，做个标记以后来