axios手机短信登录案例

  • 默认isSms是false---> 用户名密码进行登录
  • 当点击了登录短信那个按钮将isSms置为了true --->手机短信登录
  • 点击登录按钮触发点击事件 获取用户输入的值，通过this.isSms,跳转到不同的IP地址
  • 成功的话跳到登录地址，失败的话返回错误信息
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <input type="button" value="密码登录" @click="isSms=false"/>
    <input type="button" value="短信登录" @click="isSms=true"/>
    <div v-show="isSms">
        <p>
            <label>手机号</label>
            <input type="text" placeholder="手机号" v-model="sms.username">
        </p>
        <p>
            <label>验证码</label>
            <input type="text" placeholder="验证码" v-model="sms.password">
        </p>
    </div>
    <div v-show="!isSms">
        <p>
            <label>用户名</label>
            <input type="text" placeholder="用户名" v-model="info.username">
        </p>
        <p>
            <label>密码</label>
            <input type="text" placeholder="密码" v-model="info.password">
        </p>
        <input type="button" value="登 录" @click="loginForm"/>
    </div>



</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isSms: false,
            info:{
                username:"",
                password:"",
            },
            sms:{
                mobile:"",
                code:""
            }
        },
        methods: {
            loginForm() {
                // 获取用户输入的值
                let dataDict=this.isSms?this.sms:this.info;
                let url;
                if (this.isSms){
                    url='http://127.0.0.1:5000/loginWay=mobile'
                }else{
                    url='http://127.0.0.1:5000/loginWay=password'
                }
                axios({
                    methods: 'post',
                    url: url,
                    headers: {
                        'Content-Type': 'application/json;'
                    },
                    data: dataDict
                }).then(res=>{
                    // console.log(res.data)
                    if(res.data.code==-1){
                        alert(res.data.msg)
                        return;
                    }
                    // 成功后跳转
                    window.location.href='http://127.0.0.1:5000/index'
                }).catch(error=>{
                    // console.log(error)
                    alert("请求异常，请重新操作")
                })

            }
        }

    })

</script>
</html>
posted @ 2024-04-29 19:57  -半城烟雨  阅读(7)  评论(0)    收藏  举报