qwb0614

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
2023.2.20总结

 

<head>
    <meta charset="UTF-8" >
    <title>登录</title>
</head>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv" style="height: 350px">

    <form action="" method="post" id="form">
        <h1 id="loginMsg">LOGIN IN</h1>
<!--        <div id="errorMsg">${login_msg} ${register_msg}</div>-->
        <p>Username:<input id="username" name="username" v-model="user.username" type="text"></p>
        <p>Password:<input id="password" name="password" v-model="user.password"   type="password"></p>
        <p>Remember:<input id="remember" name="remember" v-model="remember" value="1" type="checkbox"></p>
        <div id="subDiv">
            <input type="button" class="button" @click="submitForm" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.html">没有账号？</a>
        </div>
    </form>
</div>

<script src="js/axios-0.18.0.js"></script>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#loginDiv",
        data(){
            return {
                user:{
                    username:"",
                    password:""
                },
                remember:""
            }
        },
        mounted(){
            // 页面加载完成后，发送异步请求，查询数据
            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/Login/selectAllServlet"
            }).then(function (resp) {
                _this.brands = resp.data;
            })
        },
        methods:{
            submitForm(){
                console.log(this.user);
                // 发送ajax请求，添加
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/Login/user/login",
                    data:_this.user
                }).then(function (resp)
                {

                    if(resp.data == "success") {
                        location.href = "http://localhost:8080/Login/brand2.html";
                    }
                    else
                    {
                        _this.$message.error('账号或密码错误');
                    }


                })

            }
        }


    })
</script>

</body>
</html>

学习到了登录界面搭建

 

posted on 2023-02-20 20:33  嘎嘎鸭1  阅读(18)  评论(0)    收藏  举报