老师能不能帮我看一下代码的问题，不知道为什么会直接显示 请求失败

老师下面是我的代码，我如果不输入账号密码，或者只输入一个它不会提醒

请填写账号密码，不能为空，只会提醒请求失败。

<template>

<div class="wrapper">

<img

class="wrapper__img"

src="http://www.dell-lee.com/imgs/vue3/user.png"

/>

<div class="wrapper__input">

<!-- 之所以把input放在 div 里面，是因为 input 在布局时没有div不能撑开宽度 -->

<input

class="wrapper__input__content"

placeholder="请输入手机号"

v-model="username"

/>

</div>

<div class="wrapper__input">

<!-- 之所以把input放在 div 里面，是因为 input 在布局时没有div不能撑开宽度 -->

<input

class="wrapper__input__content"

placeholder="请输入密码"

type="password"

v-model="password"

autocomplete="new-password"

/>

</div>

<div class="wrapper__login-button" @click="handleLogin">登录</div>

<div class="wrapper__login-link" @click="handleRegisterClick">立即注册</div>

<Toast v-if="show" :message="toastMessage" />

</div>

</template>

<script>

// useRouter 可以获取到路由的实例

import { reactive, toRefs } from "vue";

import { useRouter } from "vue-router";

import { post } from "../../utils/request";

import Toast, { useToastEffeect } from "../../components/Toast.vue";

// 处理登录相关逻辑

const useLoginEffect = (showToast) => {

const router = useRouter();

const data = reactive({

username: "",

password: "",

});

const handleLogin = async () => {

try {

const { username, password } = data;

console.log(username, password);

if (!username || !password) {

showToast("请填写账号密码，不能为空");

return;

}

//   不可以写成 if (!username == "" && !password == "")

//   因为 username和password是undefined，不等于空字符串

const result = await post("/api/user/login", {

username: data.username,

password: data.password,

});

if (result?.errno === 0) {

// ?.意思是尝试访问对象的属性之前检查对象是否存在。

// 防止在对象不存在时访问属性导致代码报错。

// 这样返回返回的不是null 而是 undefined

// 如果result对象存在，那么就返回obj的age属性值，

// 否则的话代码并不会报错，而是返回undefined。

localStorage.isLogin = true;

//   在JS里面可以通过push方法进行页面跳转

//   告诉路由做一些页面的调整访问下一个页面

router.push({ name: "Home" });

alert("成功");

} else {

showToast("登录失败");

}

} catch (error) {

showToast("请求失败");

}

};

const { username, password } = toRefs(data);

return { username, password, handleLogin };

};

// 处理注册跳转

const useRegisterEffect = () => {

const router = useRouter();

const handleRegisterClick = () => {

router.push({ name: "Register" });

};

return { handleRegisterClick };

};

export default {

name: "Login",

components: {

Toast: Toast,

},

setup() {

//   setup函数 的职责就是告诉你业务执行的流程

const { show, toastMessage, showToast } = useToastEffeect();

const { username, password, handleLogin } = useLoginEffect(showToast);

const { handleRegisterClick } = useRegisterEffect();

return {

handleLogin,

handleRegisterClick,

username,

password,

show,

toastMessage,

};

},

};

</script>

<style lang="scss" scoped>

@import "../../style/virables.scss";

.wrapper {

position: absolute;

top: 50%;

left: 0;

right: 0;

// 垂直居中

transform: translateY(-50%);

&__img {

display: block;

// auto水平居中

margin: 0 auto 0.4rem auto;

width: 0.66rem;

height: 0.66rem;

}

&__input {

box-sizing: border-box;

height: 0.48rem;

margin: 0 0.4rem 0.16rem 0.4rem;

padding: 0 0.16rem;

background: #f9f9f9;

border: 1px solid rgba(0, 0, 0, 0.1);

border-radius: 6px;

border-radius: 6px;

&__content {

line-height: 0.48rem;

border: none;

outline: none;

width: 100%;

background: none;

font-size: 0.16rem;

color: $content-notice-fontcolor;

&::placeholder {

color: $content-notice-fontcolor;

}

}

}

&__login-button {

margin: 0.32rem 0.4rem 0.16rem 0.4rem;

line-height: 0.48rem;

background: #0091ff;

box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);

border-radius: 0.04rem;

border-radius: 0.04rem;

color: white;

font-size: 0.16rem;

text-align: center;

}

&__login-link {

text-align: center;

font-size: 0.14rem;

color: $content-notice-fontcolor;

}

}

</style>