【登录页面的美化】bootstrap的使用

最新推荐文章于 2024-05-26 13:30:44 发布

m0_73575951

最新推荐文章于 2024-05-26 13:30:44 发布

阅读量843

点赞数 1

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/m0_73575951/article/details/131819496

版权

对bootstrap需要在官网下载应用包，放入我们所写的项目中，然后再导入包，再官网的使用方法中可以找到很多的前端制作模板。

效果显示：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册/登录</title>
    <script src="../vue/vue.min.js"></script>
    <script src="../vue/axios.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <style>
        .main{
            position: absolute;/*定位 绝对定位*/
            height: 400px;
            top: 50%;
            margin-top: -200px;/*上外边距*/
            background-color: #ce8483;
            border-radius: 30px;
            box-shadow: 10px 10px 10px rgb(162,162,162);
        }
        .title{
            letter-spacing: 5px;
        }
        span{
            color: steelblue;
        }
        body{
            background-image: url("NBA.png");
            background-repeat: no-repeat;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-size: cover;
        }
    </style>
</head>
<body>
<div id="app" class="main col-md-4 col-md-offset-4">

    <div v-show="!isShow">
        <div class="title col-md-offset-1">
            <h2><small>登录</small></h2>
        </div>
        <hr>
        <div class="form-horizontal col-md-10 col-md-offset-1">
            <input name="method" value="login" type="hidden">
            <div class="form-group">
                <div class="input-group input-group-lg">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-user"></span>
                    </div>
                    <input class="form-control" type="text" @keyup="checkName2" v-model="player.username" placeholder="用户名">
                </div>
            </div>

            <div class="form-group">
                <div class="input-group input-group-lg">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-lock"></span>
                    </div>
                    <input class="form-control" type="text" @keyup="checkPsw2" v-model="player.password" placeholder="密码">
                </div>
            </div>

            <div class="form-group">
                <button class="btn btn-info btn-lg col-md-12 btn_login" @click="login1" :disabled="isLoginDisable">登录</button>
            </div>
            <div class="form-group">
                <p class="col-md-6 col-md-offset-3">没有账号？点击<a href="javascript:void(0)" @click="exchange1">注册</a> </p>
            </div>

        </div>
    </div>

    <div v-show="isShow">
        <div class="title col-md-offset-1">
            <h2><small>注册</small></h2>
        </div>
        <hr>
        <div class="form-horizontal col-md-10 col-md-offset-1">
            <input name="method" value="login" type="hidden">
            <div class="form-group">
                <div class="input-group input-group-lg">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-user"></span>
                    </div>
                    <input type="text" v-model="player.username" @blur="checkName" class="form-control" placeholder="用户名">
                </div>
            </div>

            <div class="form-group">
                <div class="input-group input-group-lg">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-lock"></span>
                    </div>
                    <input type="text" v-model="player.password" @keyup="checkPsw" class="form-control" placeholder="密码">
                </div>
            </div>

            <div class="form-group">
                <button class="btn btn-info btn-lg col-md-12 btn_login"  @click="register1" :disabled="isResDisable">注册</button>
            </div>
            <div class="form-group">
                <p class="col-md-6 col-md-offset-3">已有账号，直接<a href="javascript:void(0)" @click="exchange1">登录</a> </p>
            </div>

        </div>
    </div>
</div>

<!--昵称：<input type="text" @keyup="checkName2" v-model="player.username"><br>
密码：<input type="text" @keyup="checkPsw2" v-model="player.password"><br>
<button @click="login1" :disabled="isLoginDisable">登录</button><br><br><br>
没有账户，请先<a href="javascript:void(0)" @click="exchange1">注册</a>


<div v-show="isShow">
<h2>注册</h2>
昵称：<input type="text" v-model="player.username" @blur="checkName"><br>
密码：<input type="text" v-model="player.password" @keyup="checkPsw"><br>
<button @click="register1" :disabled="isResDisable">注册</button><br><br><br>

已有账号，直接<a href="javascript:void(0)" @click="exchange1">登录</a>
</div>-->



</body>
<script>
    new Vue({
        el:'#app',
        data:{
            player:{
                username:'',
                password:''
            },
            isShow:false,
            isResDisable:false, //false表示不禁用，true表示禁用
            isLoginDisable:false,
            isRegNameExist:false
        },
        methods:{
            exchange1(){
                this.isShow=!this.isShow
            },
            register1(){
                if( this.player.username.trim()&&this.player.password.trim()){  //都不为空
                    this.isResDisable=false  //不禁用
                    axios.get('/playerC?action=register&username='+this.player.username+'&password='+this.player.password)
                        .then((resp)=>{
                            //如果注册成功，显示登录页面
                            if (resp.data.r){
                                this.isShow=!this.isShow
                            }
                            alert(resp.data.msg)
                            //如果注册失败，留在注册页面
                        })
                }else{//昵称或密码有一个为空
                    this.isResDisable=true  //禁用
                }

            },
            checkName(){
                //检查昵称是否已经存在
                if (this.player.username.trim()){
                    //昵称不为空，去数据库查询
                    axios.get('/playerC?action=getByName&username='+this.player.username.trim()).
                    then((resp)=>{
                        if (resp.data){//不为空，数据库中存在该昵称
                            alert('改昵称已被占用，不能注册！')
                            this.isResDisable=true  //禁用

                        }else{//为空，数据库中不存在该昵称
                            this.isResDisable=false  //不禁用

                        }
                    })

                }else{
                    this.isResDisable=true  //禁用
                }
            },
            checkPsw(){
                if (this.player.password.trim()){
                    this.isResDisable=false   //不禁用
                }else {
                    this.isResDisable=true   //禁用
                }
            },
            login1(){
                if (this.player.username.trim()&&this.player.password.trim()){//都不为空
                    this.isLoginDisable=false
                    //登录后端请求
                    axios.get('/playerC?action=login&username='+this.player.username.trim()+'&password='+this.player.password.trim())
                        .then((resp)=>{
                            if (resp.data){//登录成功，去首页
                                location.assign('/')
                            }else{
                                alert('用户名或密码错误，登录失败！')
                            }
                        })
                }else {
                    this.isLoginDisable=true
                }
            },
            checkName2(){
                if (this.player.username.trim()){
                    this.isLoginDisable=false   //不禁用
                }else {
                    this.isLoginDisable=true   //禁用
                }
            },
            checkPsw2(){
                if (this.player.password.trim()){
                    this.isLoginDisable=false   //不禁用
                }else {
                    this.isLoginDisable=true   //禁用
                }
            }
        }
    })
</script>
</html>