asp.net mvc简单的登录页面

分类 asp.net (core) - 最后更新于 1/21/2021 10:26:06 AM   共 246 人浏览

Index.cshtml前台页面

@{
    Layout = "";
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/layui/layui.js"></script>
    <script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
    </script>
    <style>
        #bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

            #bg canvas {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

        .layui-card {
            background: rgba(10, 10, 10, 0.17);
        }

            .layui-card label,
            .layui-card h2 {
                color: #fff;
            }

            .layui-card h2 {
                text-align: center;
            }

            .layui-card a {
                color: #eef;
            }
    </style>
</head>
<body class="layui-bg-gray">
    <div id="bg">
        <canvas width="1012" height="768"></canvas>
        <canvas width="1012" height="768"></canvas>
        <canvas width="1012" height="768"></canvas>
    </div>


    <div class="layui-card" style="width:400px;margin:100px auto;">
        <div class="layui-card-header">
            <h2>用户登录</h2>
        </div>
        <div class="layui-card-body">
            <form id="form1" runat="server" class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-block">
                        <input name="yhzh"
                                     lay-verify="required"
                                     lay-reqtext="账号是必填项,岂能为空?"
                                     placeholder="请输入"
                                     autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input name="yhmm" type="password" 
                                     lay-verify="required"
                                     lay-reqtext="密码是必填项,岂能为空?"
                                     placeholder="请输入"
                                     autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="btnLogin" >登录</button>
                    </div>
                </div>

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

    <script src="~/js/jquery-3.3.1.min.js"></script>
    <script src="~/js/canva_moving_effect.js"></script>
    <script>
        layui.use(['carousel', 'form','element'], function () {
            var  form = layui.form
                , element = layui.element,
                $ = layui.$,
                layer=layui.layer;
            form.on('submit(btnLogin)', function (data) {
                $.ajax({
                    url: "/Login/CheckLogin",
                    data: data.field,
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code !== 0) {
                            layer.msg("登录失败" + res.msg);
                            return;
                        }
                        layer.alert("登录成功", function (index) {
                            window.location.href = "/Home"
                        });
                    },
                    error: function (e1, e2, e3) {
                        layer.alert("登录异常<br>错误代码" + e1.status + "<br>错误信息" + e1.statusText);
                    }

                })

                return false;
            })
        });
    </script>

</body>
</html>

LoginController.cs后台代码

using MySql.Data.MySqlClient;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace LoginMVC.Controllers
{
    public class LoginController : Controller
    {
        // GET: Login
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult CheckLogin()
        {
            var json = new { code = 0, msg = "" };

            string yhzh = Request.Form["yhzh"];
            string yhmm = Request.Form["yhmm"];

            try
            {
                using (MySqlConnection con = new MySqlConnection())
                {
                    con.ConnectionString = "server=jaylosy.com;uid=loginmvc;pwd=loginmvc@123;database=loginmvc";
                    con.Open();

                    var cmd = con.CreateCommand();
                    cmd.Parameters.Add(new MySqlParameter("?yhzh", yhzh));
                    cmd.Parameters.Add(new MySqlParameter("?yhmm", yhmm));
                    cmd.CommandText = "select count(*) from denglu where yhzh=?yhzh and yhmm=?yhmm";
                    var obj = cmd.ExecuteScalar();
                    int count = 0;
                    if (obj != null)
                    {

                        count = Convert.ToInt32(obj.ToString());
                        if (count > 0)
                        {
                            //更改状态
                            var cmd1 = con.CreateCommand();
                            cmd1.Parameters.Add(new MySqlParameter("?yhzh", yhzh));
                            cmd1.Parameters.Add(new MySqlParameter("?yhzt", 1));
                            cmd1.CommandText = "update denglu set yhzt=?yhzt where yhzh=?yhzh";
                            cmd1.ExecuteNonQuery();
                        }
                    }

                    if (count <= 0)
                    {
                        json = new { code = -1, msg = "用户名密码错误" };
                    }
                }
            }
            catch (Exception ex)
            {
                json = new { code = -1, msg = "登陆异常" + ex.Message };
            }
            return Json(json);
        }
    }
}

mysql表结构

CREATE TABLE `denglu` (
  `yhzh` varchar(20) NOT NULL,
  `yhmm` varchar(20) NOT NULL,
  `yhzt` int(11) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `denglu` (`yhzh`, `yhmm`, `yhzt`) VALUES
('admin', '123456', 0);

最后运行界面

微信图片_20210121101316.png

源代码文件(采用vs2019和mysql数据库)


文章评论

评论列表

暂无评论

书写年份
分类
赞助广告