想问需要实现登录验证的弹窗功能,在登录实现的业务逻辑中,根据判断条件,弹出不同的弹框?

作者站长头像
站长
· 阅读数 19

这是登录功能的UI:

<el-form-item class="btns_box">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="resetLoginForm">重置</el-button>
        </el-form-item>

这是登录验证的业务逻辑:

login () {
      this.$refs.loginformRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return false
        const { data: res } = await this.$http.post('http://43.143.0.76:8889/api/private/v1/ login', this.loginForm)
        console.log(res)
        if (res.status !== 0) return console.log('登录失败')
        console.log('登录成功')
      })
    },

这是element UI的弹窗样式与方法

<el-button :plain="true" @click="open2">成功</el-button>
      <el-button :plain="true" @click="open3">警告</el-button>
      <el-button :plain="true" @click="open1">消息</el-button>
      <el-button :plain="true" @click="open4">错误</el-button><el-button :plain="true" @click="open2">成功</el-button>
      <el-button :plain="true" @click="open3">警告</el-button>
      <el-button :plain="true" @click="open1">消息</el-button>
      <el-button :plain="true" @click="open4">错误</el-button>

open1 () {
      this.$message('这是一条消息提示')
    },
    open2 () {
      this.$message({
        message: '恭喜你,这是一条成功消息',
        type: 'success'
      })
    },

    open3 () {
      this.$message({
        message: '警告哦,这是一条警告消息',
        type: 'warning'
      })
    },

    open4 () {
      this.$message.error('错了哦,这是一条错误消息')
    }
  }

想要获取子对象里面的每个对象里面的属性内容,打印出 undefined

async getAllData () {
      const { data: res } = await this.$http.get('http://127.0.0.1:4523/m1/2452239-0-default/api/tabledata')
      console.log(res)
      this.tableData = res.map(item => {
        return console.log(Object.keys(item).map(key => {
          return res[key]
        }))
      })

想表单上不呈现出弹窗样式,而是根据登录验证的判断跳出对应的弹窗

回复
1个回答
avatar
test
2024-07-02

1.你可以用后端返回的状态码来显示哪种类型的弹窗

login () {
  this.$refs.loginformRef.validate(async valid => {
    if (!valid) return false
    const { data: res } = await this.$http.post('http://43.143.0.76:8889/api/private/v1/login', this.loginForm)
    if (res.status !== 0) {
      // 登录失败,显示错误弹窗
      this.$message.error('登录失败')
      return
    }
    // 登录成功,显示成功弹窗
    this.$message({
      message: '登录成功',
      type: 'success'
    })
  })
}

2.:

this.tableData = res.map(item => {
  return Object.keys(item).map(key => {
    return item[key]
  })
})
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容