第十七篇:大作业要收尾了

=!意思“不等于”

<style>
body {background-color:rgb(255, 255, 255);margin-left:120px}
h1   {font-size:36pt;color:black}
h2   {color:black;margin:0px 0px; } /*距离都弄成0,感觉好看一点*/
p    {color:black;margin-left:200px;}
h3   {font-size:25pt;color:black;margin:10px 10px;} 
    input {margin-left:200px;}  /*输入框离左边的框边距*/

.button {
    background-color: #008CBA; color: black; /*蓝色的按钮,黑色的字*/
    margin-left:50px;
    padding: 6px 70px;/*按钮的长和宽*/
    font-size: 20px;/*按钮的大小*/
    margin:0px 200px;/*输入框离上边和左边框的距离*/
    }    
    </style>

<template>
  

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>欢迎登陆Fattiger网站</h1>
<h2>这里是新手的家园</h2>
<h3>请登录</h3>
    <p>用户名:</p>
    <input placeholder="Username" v-model="form.useremail">
    <p>密码:</p>
    <input placeholder="Password" v-model="form.userpwd">
    <p>记住我?</p>
    <p>注册账号</p>
    <p>忘记密码</p>
    <button class="button" @click="login">登陆</button>
</body>
</html>

</template>

<script>
    export default{
        name:'login-register',
        data(){
            return {
        info:{
            name:null,
            password:null,
            

        }
                form:{
                    username:'',
                    useremail:'',
                
                }
            }
        },


    }
</script>

还是搞不定啊

我想想

这里有两种axios可以选

一种是实例化vue,然后用钩子函数搞的axios

另一种是

},
            login() {
                const self = this;
                if (self.form.useremail != "" && self.form.userpwd != "") {
                    self.$axios({
                        method:'post',
                        url: 'http://127.0.0.1:10520/api/user/login',
                        data: {
                            email: self.form.useremail,
                            password: self.form.userpwd
                        }
                    })
                    .then( res => {
                        switch(res.data){
                            case 0: 
                                alert("登陆成功！");
                                break;
                            case -1:
                                this.emailError = true;
                                break;
                            case 1:
                                this.passwordError = true;
                                break;
                        }
                    })
                    .catch( err => {
                        console.log(err);
                    })
                } else{
                    alert("填写不能为空！");
                }

我不会的:1.switch也没太能看懂,

2.then的语法看不懂

3.axios格式还是不完全明白

 

 

溜了溜了

明天再写吧.

posted @ 2021-09-23 01:21  养肥胖虎  阅读(26)  评论(0)  编辑  收藏  举报