Javascript Vuejs：将错误消息显示为弹出窗口_Javascript_Html_Vue.js_Vuejs2

Javascript Vuejs：将错误消息显示为弹出窗口

javascript html vue.js vuejs2

Javascript Vuejs：将错误消息显示为弹出窗口,javascript,html,vue.js,vuejs2,Javascript,Html,Vue.js,Vuejs2,我使用Vuex和Axios创建了一个登录部分，通过允许用户输入电子邮件和密码来验证登录。我使用getter创建并存储了所需的变量。我还将所需的令牌放入函数、post url和控制台中但是，我知道我需要根据在检查器/控制台中看到的标记显示响应我需要的是在用户尝试登录时显示错误消息。因此，当控制台响应显示200（电子邮件和密码正确）时，我需要它来存储该令牌，当控制台响应显示400（电子邮件或密码中的字符不正确/缺失）时，我需要它打印出我已经放置在数组中的错误消息，最后，当控制台响应显示401时（

我使用Vuex和Axios创建了一个登录部分，通过允许用户输入电子邮件和密码来验证登录。我使用getter创建并存储了所需的变量。我还将所需的令牌放入函数、post url和控制台中

但是，我知道我需要根据在检查器/控制台中看到的标记显示响应

我需要的是在用户尝试登录时显示错误消息。因此，当控制台响应显示200（电子邮件和密码正确）时，我需要它来存储该令牌，当控制台响应显示400（电子邮件或密码中的字符不正确/缺失）时，我需要它打印出我已经放置在数组中的错误消息，最后，当控制台响应显示401时（电子邮件和密码都不正确）我需要它打印出数组中的messageFour

HTML:



{{message}}


{{message}}

登录

Javascript:

<script>
    import axios from 'axios';
export default {
    data() {
        return {
            email: "test@gmail.com",
            password: "123456",
            flag: false,
            errorM:[],

            errorMessages: [
                {
                    messageOne: "The email that has been entered is incorrect. Please try again!"
                },

                {
                    messageTwo: "Email/Password is missing. Please try again!"
                },

                {
                    messageThree: "The password that has been entered is incorrect. Please try again!"
                },

                {
                    messageFour: "Both Email and Password that have been entered are incorrect!"
                },
            ]
        }
    },

    methods: {
        login: function (index) {

            axios.post(`https://api.ticket.co/auth/login`, {
                    email: this.email,
                    password: this.password
                })

                .then(response => {
                    // JSON responses are automatically parsed.
                    console.log(response.data)
                    console.log(response.status)
                })

                .catch(e => {
                    console.log(e)
                    console.log(e.response.status)

                    var vueObject = this

                    switch (e.response.status) {
                    case 400:
                            if(!vueObject.email || !vueObject.password){
                                vueObject.errorM.push(vueObject.errorMessages.messageTwo)
                            };

                            if(!vueObject.email){
                                vueObject.errorM.push(vueObject.errorMessages.messageOne)
                            };

                            if(!vueObject.password){
                                vueObject.errorM.push(vueObject.errorMessages.messageThree)
                            };
                            break;

                        case 401:
                        if(vueObject.email && vueObject.password == ""){
                                vueObject.errorM.push(vueObject.errorMessages.messageFour)
                            }
                            break;
                    }
                })  
        },
    },
} 
</script>


从“axios”导入axios；
导出默认值{
数据（）{
返回{
电子邮件：“test@gmail.com",
密码：“123456”，
国旗：错，
错误：[]，
错误消息：[
{
messageOne：“输入的电子邮件不正确。请重试！”
},
{
消息二：“缺少电子邮件/密码。请重试！”
},
{
信息三：“输入的密码不正确。请重试！”
},
{
信息四：“输入的电子邮件和密码都不正确！”
},
]
}
},
方法：{
登录：函数（索引）{
轴心柱(`https://api.ticket.co/auth/login`, {
电子邮件：this.email，
密码：这个是密码
})
。然后（响应=>{
//JSON响应会自动解析。
console.log（response.data）
console.log（response.status）
})
.catch（e=>{
控制台日志（e）
console.log（例如response.status）
var vueObject=此
开关（如响应状态）{
案例400：
如果（！vueObject.email | |！vueObject.password）{
vueObject.errorM.push（vueObject.errorMessages.messageTwo）
};
如果（！vueObject.email）{
vueObject.errorM.push（vueObject.errorMessages.messageOne）
};
如果（！vueObject.password）{
vueObject.errorM.push（vueObject.errorMessages.messageThree）
};
打破
案例401：
如果（vueObject.email&&vueObject.password==“”）{
vueObject.errorM.push（vueObject.errorMessages.messageFour）
}
打破
}
})  
},
},
}

非常感谢！

从描述中不清楚什么不起作用，所以我只想指出我看到的一些问题

值得一提的是，没有证据表明您使用vuex，没有getter，没有setter，没有state

最值得注意的是，您将消息定义为对象数组，这使得查找起来很困难

而不是更难查找的：

errorMessages: [
  {
    messageOne: "The email that has been entered is incorrect. Please try again!"
  },
  // etc... {}, {}, {}
]

……你应该这样做

errorMessages: {
  messageOne: "The email that has been entered is incorrect. Please try again!",
  messageTwo: "Email/Password is missing. Please try again!",
  messageThree: "The password that has been entered is incorrect. Please try again!",
  messageFour: "Both Email and Password that have been entered are incorrect!",
}

这样您就可以使用

this.errorMessages.messageTwo

或者更好的是，在vue组件之外定义它，因为您没有在模板中使用它们

const MESSAGE_INCORRECTEMAIL = "The email that has been entered is incorrect. Please try again!";
const MESSAGE_MISSINGFIELD = "Email/Password is missing. Please try again!";
const MESSAGE_INCORRECTPASSWORD = "The password that has been entered is incorrect. Please try again!";
const MESSAGE_INCORRECTEMAILPASSWORD = "Both Email and Password that have been entered are incorrect!";

然后从脚本中将它们称为

MESSAGE\u MISSINGFIELD

从安全的角度来看，指出用户名或密码是否错误是一个坏主意，因为它通过确认用户名的存在使黑客攻击更容易

在发送表单进行远程处理之前，您可以确定用户是否有错误或缺少字段

要做到这一点，你需要打电话

login: function (index) {
  if (this.email.trim() === '' || vueObject.password.trim() === ''){
    this.errorM.push(MESSAGE_MISSINGFIELD);
    return // <- prevents further execution
  }
  // repeat for other local validations before remote request
  // ... then process request
  axios.post(`https://api.ticket.co/auth/login`, {

登录：函数（索引）{
if（this.email.trim（）=''vueObject.password.trim（）=''）{
此.error.push（消息_MISSINGFIELD）；
return/从描述中不清楚什么不起作用，所以我只想指出我看到的一些问题
值得一提的是，没有证据表明您使用vuex，没有getter，没有setter，没有state
最值得注意的是，您将消息定义为对象数组，这使得查找起来很困难
而不是更难查找的：
errorMessages: [
  {
    messageOne: "The email that has been entered is incorrect. Please try again!"
  },
  // etc... {}, {}, {}
]

……你应该这样做
errorMessages: {
  messageOne: "The email that has been entered is incorrect. Please try again!",
  messageTwo: "Email/Password is missing. Please try again!",
  messageThree: "The password that has been entered is incorrect. Please try again!",
  messageFour: "Both Email and Password that have been entered are incorrect!",
}

这样您就可以使用this.errorMessages.messageTwo

或者更好的是，在vue组件之外定义它，因为您没有在模板中使用它们
const MESSAGE_INCORRECTEMAIL = "The email that has been entered is incorrect. Please try again!";
const MESSAGE_MISSINGFIELD = "Email/Password is missing. Please try again!";
const MESSAGE_INCORRECTPASSWORD = "The password that has been entered is incorrect. Please try again!";
const MESSAGE_INCORRECTEMAILPASSWORD = "Both Email and Password that have been entered are incorrect!";

然后从脚本中将它们称为MESSAGE\u MISSINGFIELD

从安全的角度来看，指出用户名或密码是否错误是一个坏主意，因为它通过确认用户名的存在使黑客攻击更容易
在发送表单进行远程处理之前，您可以确定用户是否有错误或缺少字段
要做到这一点，你需要打电话
login: function (index) {
  if (this.email.trim() === '' || vueObject.password.trim() === ''){
    this.errorM.push(MESSAGE_MISSINGFIELD);
    return // <- prevents further execution
  }
  // repeat for other local validations before remote request
  // ... then process request
  axios.post(`https://api.ticket.co/auth/login`, {

登录：函数（索引）{
if（this.email.trim（）=''vueObject.password.trim（）=''）{
此.error.push（消息丢失）