asp.net core前端用vue.js实现的登录界面

最新推荐文章于 2024-05-20 21:31:45 发布

IT_ziliang

最新推荐文章于 2024-05-20 21:31:45 发布

阅读量2.3k

点赞数

分类专栏： 111 文章标签： 111111111 1111111

本文链接：https://blog.csdn.net/IT_ziliang/article/details/89190025

版权

111 专栏收录该内容

1 篇文章 0 订阅

订阅专栏


@{
    ViewData["Title"] = "Index";
}
<body class="hold-transition login-page">
    <div class="login-box" id="rrapp" v-cloak>
        <div class="login-logo">
            <b>###</b>
        </div>
        <!-- /.login-logo -->
        <div class="login-box-body">
            <p class="login-box-msg">管理员登录</p>
            <div v-if="error" class="alert alert-danger alert-dismissible">
                <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-circle"></i> {{errorMsg}}</h4>
            </div>
            <div class="form-group has-feedback">
                <input type="text" class="form-control" v-model="form.username" placeholder="账号">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" v-model="form.password" placeholder="密码">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="text" class="form-control" v-model="form.captcha" onkeypress="login" placeholder="验证码">
                <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" v-on:click="refreshCode">
                &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" v-on:click="refreshCode">点击刷新</a>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="button" class="btn btn-primary btn-block btn-flat" v-on:click="login">登录</button>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.social-auth-links -->
        </div>
        <!-- /.login-box-body -->
    </div>
    <script src="~/libs/jquery.min.js"></script>
    <script src="~/plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="~/libs/vue.min.js"></script>
    <script src="~/libs/bootstrap.min.js"></script>
    <script src="~/libs/app.js"></script>
    <script src="~/js/common.js"></script>
    <script type="text/javascript">
        var rootUrl = '@Url.Content("~/")';
        var vm = new Vue({
            el: '#rrapp',
            data: {
                form: {
                    username: '',
                    password: '',
                    captcha: '',
                    uuid: ''
                },
                error: false,
                errorMsg: '',
                src: ''
            },
            beforeCreate: function () {
                if (self != top) {
                  // top.location.href = self.location.href;
                }
            },
            created: function () {
                this.refreshCode();
            },
            methods: {
                refreshCode: function () {
                    var uuid = getUUID();
                    this.form.uuid = uuid;
                    this.src = baseURL + "captcha.jpg?uuid=" + uuid;
                },
                login: function () {                 
                    $.ajax({
                        type: "POST",
                        url: rootUrl + 'Login/SubmitLogin',
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify(vm.form),
                        success: function (r) {
                            if (r.Code == 0) {//登录成功
                                localStorage.setItem("token", r.token);
                                window.location.href='/Home/index';
                            } else {
                                vm.error = true;
                                vm.errorMsg = r.Msg;
                                vm.refreshCode();
                            }
                        }
                    });
                }
            }
        });
    </script>
</body>

源码下载地址：https://download.csdn.net/download/it_ziliang/11060536

IT_ziliang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
asp.net core前端用vue.js实现的登录界面

@{ ViewData["Title"] = "Index";}<body class="hold-transition login-page"> <div class="login-box" id="rrapp" v-cloak> <div class="login-logo"> <b&gt...
复制链接

扫一扫