ASP.NetCore+Layui 后台管理系统-Web

最新推荐文章于 2024-08-25 08:57:53 发布

一个想退休的程序猿

最新推荐文章于 2024-08-25 08:57:53 发布

阅读量4.5k

点赞数 6

分类专栏： NetCore

本文链接：https://blog.csdn.net/shaozun520/article/details/108317583

版权

NetCore 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、

1.需要Layui官网下载组件，放入wwwroot文件夹下

2.本项目图标使用的是iconfont

3.配置_Layout.cshtml页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CoreApi</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/main.css" />
    <link rel="stylesheet" href="~/css/font-awesome.min.css" />
    <link rel="stylesheet" href="~/iconfont/iconfont.css" />
    <link rel="stylesheet" href="~/css/Home.css" />

    @RenderSection("Styles", required: false)


    <script type="text/javascript" src="~/layui/layui.all.js"></script>
    <script type="text/javascript" src="~/layui/layui.js"></script>
    <script type="text/javascript" src="~/js/leftNav.js"></script>
    <script type="text/javascript" src="~/js/index.js"></script>
    @RenderSection("Scripts", required: false)
</head>
<body class="main_body">

    @RenderBody();
</body>
</html>

登录页

1.页面展示

2.前端代码：


@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>CoreApi·登陆</title>
    <link rel="stylesheet" href="~/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="~/css/login0101.css" media="all" />
    <style>
        /* 覆盖原框架样式 */
        .layui-elem-quote {
            background-color: inherit !important;
        }

        .layui-input, .layui-select, .layui-textarea {
            background-color: inherit;
            padding-left: 30px;
        }
    </style>
</head>
<body>
   
    <div class="layui-row"  >
        <div class="layui-col-sm12 layui-col-md12" >
            <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin">
                <div carousel-item="">
   
                    <div>
                        <div style="position: absolute; margin:20px">
                            <div style="display:inline-block;">
                                <img src="~/image/logo.jpg" class="layui-circle" width="65" height="65" style="margin-bottom:25px">
                            </div>
                            <div style="display:inline-block;">
                                <label style="font-size:40px;font-weight:bolder;color:white;" name="company"></label>
                                </div>
                            </div>
                      
                        <img src="~/image/carousel/01.jpg" style="width:100%;height:auto" />
                    </div>
                   
                </div>
            </div>
        </div>
    </div>
   
    <div class="zyl_lofo_main">
        <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
            <legend>欢迎登陆 - 认证管理平台</legend>
        </fieldset>
        <div class="layui-row layui-col-space15">
            <form class="layui-form zyl_pad_01" action="">
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        <input type="text" name="name" lay-verify="required|name" autocomplete="off" placeholder="账号" class="layui-input">
                        <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        <input type="password" name="password" lay-verify="required|password" autocomplete="off" placeholder="密码" class="layui-input">
                        <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                        <input type="text" name="ip" class="layui-input layui-hide">
                        <input type="text" name="winos" class="layui-input layui-hide">
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-row">
                        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <div class="layui-form-item">
                                <input type="text" name="vercode" id="vercode" lay-verify="required|vercodes" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
                                <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
                            </div>
                        </div>
                        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <div class="zyl_lofo_vercode zylVerCode" onclick="zylVerCode()"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        @*<input type="radio" name="workStatus" value="1" title="工作人员" checked>
                        <input type="radio" name="workStatus" value="2" title="审核员">*@
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <button class="layui-btn layui-btn-fluid" style="background:#1E9FFF" lay-submit="" lay-filter="demo1">立即登录</button>
                </div>
            </form>
        </div>
    </div>
    <!-- LoginForm End -->
    <!-- Jquery Js -->
    <script type="text/javascript" src="~/jquery.min.js"></script>
    <!-- Layui Js -->
    <script type="text/javascript" src="~/layui/layui.js"></script>
    <!-- Jqarticle Js -->
    <script type="text/javascript" src="~/assembly/jqarticle/jparticle.min.js"></script>
    <!-- ZylVerificationCode Js-->
    <script type="text/javascript" src="~/assembly/zylVerificationCode/zylVerificationCode.js"></script>


    <script src="https://pv.sohu.com/cityjson"></script>

    <script>
        layui.use(['carousel', 'form'], function () {
            var carousel = layui.carousel
                , form = layui.form;

            //自定义验证规则
            form.verify({
                userName: function (value) {
                    if (value.length < 4) {
                        return '账号至少得4个字符';
                    }
                }
                , pass: [/^[\S]{5,12}$/, '密码必须5到12位，且不能出现空格']
                , vercodes: function (value) {
                    //获取验证码
                    var zylVerCode = $(".zylVerCode").html();
                    console.log(zylVerCode.toLowerCase());
                    console.log(value.toLowerCase());
                    if (value.toLowerCase() != zylVerCode.toLowerCase()) {
                        return '验证码错误';
                    }
                }
                , content: function (value) {
                    layedit.sync(editIndex);
                }
            });

            //监听提交
            form.on('submit(demo1)', function (data) {
                var userInfo = data.field;
                var url = "/Login/SignIn";
                $.ajax({
                    url: url,
                    type: 'post',
                    data: userInfo,
                    beforeSend: function () {
                        this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                    },
                    success: function (data) {
                        if (data != "") {
                            var res = JSON.parse(data);

                            if (res.code != 0) {
                                layer.msg(res.msg, { icon: 5 });//失败的表情
                                return;
                            } else if (res.code == 0) {
                                location.href = "/";
                            }
                        }
                        else {
                            layer.msg("登录失败", { icon: 5 });//失败的表情
                            return;
                        }
                    },
                    complete: function () {
                        layer.close(this.layerIndex);
                    },
                });
                return false;//阻止表单跳转
            });


            //设置轮播主体高度
            var zyl_login_height = $(window).height()/1;
            var zyl_car_height = $(".zyl_login_height").css("cssText", "height:" + zyl_login_height + "px!important");


            //Login轮播主体
            carousel.render({
                elem: '#zyllogin'//指向容器选择器
                , width: '100%' //设置容器宽度
                , height: 'zyl_car_height'
                , arrow: 'always' //始终显示箭头
                , anim: 'fade' //切换动画方式
                , autoplay: true //是否自动切换false true
                , arrow: 'hover' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
                , indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
                , interval: '5000' //自动切换时间:单位：ms（毫秒）
            });

            //监听轮播--案例暂未使用
            carousel.on('change(zyllogin)', function (obj) {
                var loginCarousel = obj.index;
            });

       
            $.ajax({
                url: "/Login/GetWorkStatusByIP",
                data: {ip:returnCitySN["cip"]},
                dataType: "json",
                success: function (resultData) {
                    $("[name=ip]").val(returnCitySN["cip"]);
                    if (resultData.code == 0) {
                        //console.log(resultData.data);
                        if (resultData.data.workStatus == "2") {
                            $("input[name='workStatus'][title='审核员']").attr('checked', true);
                        }

                        $("[name=company]").html(resultData.data.company);
                    }

                    layui.form.render();
                }
            });
            $("[name=winos]").val(detectOS()); 
            function detectOS() {
                var sUserAgent = navigator.userAgent;

                var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
                var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
                if (isMac) return "Mac";
                var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
                if (isUnix) return "Unix";
                var isLinux = (String(navigator.platform).indexOf("Linux") > -1);

                var bIsAndroid = sUserAgent.toLowerCase().match(/android/i) == "android";
                if (isLinux) {
                    if (bIsAndroid) return "Android";
                    else return "Linux";
                }
                if (isWin) {
                    var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
                    if (isWin2K) return "Windows 2000";
                    var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 ||
                        sUserAgent.indexOf("Windows XP") > -1;
                    if (isWinXP) return "Windows XP";
                    var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
                    if (isWin2003) return "Windows 2003";
                    var isWinVista = sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
                    if (isWinVista) return "Windows Vista";
                    var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
                    if (isWin7) return "Windows 7";
                    var isWin7 = sUserAgent.indexOf("Windows NT 10.0") > -1 || sUserAgent.indexOf("Windows 10") > -1;
                    if (isWin7) return "Windows 10";
                }
                return "other";
            }
           
         

        });

    </script>
</body>
</html>

3. 登录方法

 [HttpPost]
        public ActionResult<string> SignIn(string name,string password,string vercode,string workStatus,string ip,string winos)
        {
            if (ModelState.IsValid)
            {
                string result = "";

                result = _users.LoginInfo(name, password);
                var data = result.DeJson<ResultDto<Users>>();
                if(data.IsSuccess)
                {
                    IP = ip;
                    GetAddressByIP();
                    var dataUser = data.data;
                    string token = Utils.GenerateRandomCode(6) + DateTime.Now.ToString("yyyyMMddHHmmss");
                    _users.LoginToken(dataUser,token,IP,Province,City,workStatus.ToInt(),winos);
                    //记录Session
                    HttpContext.Session.SetString("UserId", token);
                }
                return result;
            }
            return "";
        }