MVC使用EF实现后台登录首页以及列表增删改查

数据库设计

CREATE DATABASE [InfoManagerSystem]
GO
USE [InfoManagerSystem]
GO
/****** Object:  Table [dbo].[User]    Script Date: 10/15/2019 08:14:50 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[User](
	[UserName] [varchar](200) NOT NULL,
	[UserPwd] [varchar](200) NOT NULL
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
INSERT [dbo].[User] ([UserName], [UserPwd]) VALUES (N'Admin', N'Admin')
/****** Object:  Table [dbo].[InfoManager]    Script Date: 10/15/2019 08:14:49 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[InfoManager](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[Title] [varchar](200) NOT NULL,
	[Sort] [varchar](200) NOT NULL,
	[Source] [varchar](200) NOT NULL,
	[Browser] [bigint] NULL,
	[Status] [int] NULL
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
SET IDENTITY_INSERT [dbo].[InfoManager] ON
INSERT [dbo].[InfoManager] ([ID], [Title], [Sort], [Source], [Browser], [Status]) VALUES (1, N'老人与海', N'经典文学', N'湖南科技出版社', 2000, 1)
SET IDENTITY_INSERT [dbo].[InfoManager] OFF

创建MVC项目

三层搭建

创建分层并添加引用

实体层(Mode)

无引用,需要使用EntityFramework,使用NuGet安装

数据访问层(Dal)

引用实体层,需要使用EntityFramework,使用NuGet安装

业务逻辑层(Bll)

引用实体层,数据访问层,需要使用EntityFramework,使用NuGet安装

UI层(Web)

引用实体层,业务逻辑层,需要使用EntityFramework,使用NuGet安装

搭建完成后如图

登录HTML页面代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="~/static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="~/static/h-ui.admin/css/H-ui.login.css" rel="stylesheet" type="text/css" />
    <link href="~/static/h-ui.admin/css/style.css" rel="stylesheet" type="text/css" />
    <link href="~/lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="~/Scripts/static/common/layui/css/layui.css" />
    <title>后台登录</title>
    <meta name="keywords" content="网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="是一款由国人开发的轻量级扁平化网站后台模板,完全免费开源的网站后台管理系统模版,适合中小型CMS后台系统。">
</head>
<body>
    <input type="hidden" id="TenantId" name="TenantId" value="" />
    <div class="header"></div>
    <div class="loginWraper">
        username
        <div id="loginform" class="loginBox">
            <div>
                <div class="row cl">
                    <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                    <div class="formControls col-xs-8">
                        <input id="username" name="" type="text" placeholder="账户" class="input-text size-L">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                    <div class="formControls col-xs-8">
                        <input id="pwd" name="" type="password" placeholder="密码" class="input-text size-L">
                    </div>
                </div>
                <div class="row cl">
                    <div class="formcontrols col-xs-8 col-xs-offset-3">
                        <input class="input-text size-l" type="text" id="code" placeholder="验证码" οnblur="if(this.value==''){this.value='验证码:'}" οnclick="if(this.value=='验证码:'){this.value='';}" value="验证码:" style="width:150px;">
                        <canvas id="canvas" width="100" height="38"></canvas>
                    </div>
                    <div class="row cl">
                        <div class="formControls col-xs-8 col-xs-offset-3">
                            <label for="online">
                                <input type="checkbox" name="online" id="online" value="">
                                记住密码
                            </label>
                        </div>
                    </div>
                    <div class="row cl">
                        <div class="formControls col-xs-8 col-xs-offset-3">
                            <input name="" type="submit" class="btn btn-success radius size-L" id="login_btn" value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
                            <input name="" type="reset" class="btn btn-default radius size-L" value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">Copyright 你的公司名称</div>
        <script type="text/javascript" src="~/lib/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="~/static/h-ui/js/H-ui.min.js"></script>
        <script src="~/assets/layer/layer.js" type="text/javascript"></script>
        <script src="~/Scripts/static/common/layui/layui.js"></script>
        <script src="~/Scripts/static/admin/js/canvas.js"></script>
        <script>
            var _hmt = _hmt || [];
            (function () {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?080836300300be57b7f34f4b3e97d911";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        </script>
 
 
</body>
</html>
<script>
    $(function () {
        //页面加载刷新验证码
        var show_num = [];
        draw(show_num);
 
        //点击图片刷新验证码
        $("#canvas").on('click', function () {
            draw(show_num);
        })
 
        layui.use('form', function () {
            var form = layui.form,
                layer = layui.layer,
                $ = layui.jquery;
        });
 
        $("#login_btn").click(function () {
            var data = {};
            data.UserName = $("#username").val();
            data.UserPwd = $("#pwd").val();
            //验证码校验
            var val = $("#code").val().toLowerCase();
            var num = show_num.join("");
            if (val == '') {
                layer.alert('请输入验证码!');
            } else if (val != num) {
                layer.alert('验证码错误!请重新输入!');
                $("#code").val('');
                draw(show_num);
            }
            else {
                $.ajax({
                    data: data,
                    type: "post",
                    url: "/AdminUser/Query",
                    success: function (result) {
                        if (result.Success) {
                            layer.alert('登录成功!', {
                                title: '提示框',
                                icon: 1,
                            });
                            location.href = "/Home/Index";
                            layer.close(index);
                        } else {
                            layer.alert('登录失败!', {
                                title: '提示框',
                                icon: 1,
                            });
                        }
                    }
                })
            }
 
        })
 
    });
 
</script&g
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值