老师关于判断登录用户名密码是否为空

我一开始写的是：

if(use===''&&pass===''){

showToast('用户名或者密码不能为空！！')

return

}

不论怎么点击都和没有判断一样，

然后改为!use&&!pass不论怎么样都登录不了

慕瓜0126554 2021-07-30

源自：项目：仿京东到家首页开发 3-9 Setup函数的职责以及注册功能的实现（2）

收起

3回答

好帮手慕言 2021-07-31 11:44:49

同学你好，使用逻辑或（||）时，只要有一个操作数为true，那么返回的就是true。第一个输入框中输入内容，第二个输入框不输入内容，结果会是true，进入判断，页面提示“用户名或者密码不能为空！！”。

使用逻辑与（&&）时，只要有一个操作数为false，那么返回的就是false，第一个输入框中输入内容，第二个输入框不输入内容，结果会是fasle，不会进入判断，会发起请求，登陆成功。

祝学习愉快~

收起回答

好帮手慕言 2021-07-30 17:45:18

同学你好，解答如下：

1、如果写法是if(!use && !pass){}：

data中没有use和pass，因此use和pass会是undefined，undefined转换为布尔值为fasle，取反后是true，进入判断，提示“用户名或者密码不能为空！！”在输入框中输入内容，use和pass依旧是undefined，所以登陆不了。

2、如果写法是：if (use === '' && pass === '') {}：

use和pass是undefined，不等于空字符串，所以不符合条件，不能进入判断，会登陆成功。

修改如下：将username和password解构出来，有一个为空都不能登陆成功，需要使用||

祝学习愉快~

收起回答

提问者慕瓜0126554 #1

||是或，它有一个符合就可以登录，&&的且，两个都必须符合才能登录，为什么用或

2021-07-30 21:26:18

好帮手慕言 2021-07-30 11:53:50

同学你好，建议把登陆页面的完整代码粘贴上来，老师帮助排查，祝学习愉快~

收起回答

提问者慕瓜0126554 #1

<script>
import { reactive, toRefs } from "vue"
import { useRouter } from "vue-router"
import { post } from "../../utils/request"
import Toast, { useToastEffect } from "../../components/Toast"

const useLoginEffect = (showToast) => {
  const router = useRouter()
  const data = reactive({ username: "", password: ""})
  const handleLogin = async () => {
      try {
        const { use, pass } = data
        if(!use && !pass){
          showToast('用户名或者密码不能为空！！')
          return
        }
        const result = await post("/api/user/login", {
          username: data.username,
          password: data.password
        })
        if (result?.errno === 0) {
          localStorage.isLogin = true
          router.push({ name: "Home" })
        } else {
          showToast('登录失败')
        }
      } catch (e) {
        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 },
  setup() {
    const { show, toastMessage, showToast } = useToastEffect()
    const { username, password, handleLogin } = useLoginEffect(showToast)
    const { handleRegisterClick } = useRegisterEffect()

    return { show, toastMessage,
    handleLogin, handleRegisterClick,
    username, password }
  }
}
</script>

2021-07-30 14:52:57