基本需求就是:我输入账号密码和验证 通过登陆的验证之后 进入后台,此时我登陆的这个账号信息就会保存到session
之后我在后台进行退出登陆 相关信息的session清除 首页增删改查功能
接下来
我如果直接输入 后台首页的域名 后台会通过判断 是否登陆 否就跳转到后台登录页 是就能访问
我如果进入到后台的登录页 后台还是会进行判断 如果登陆过 那就直接跳转到后台首页
数据库设计
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"></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"></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=" 登 录 ">
<input name="" type="reset" class="btn btn-default radius size-L" value=" 取 消 ">
</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>
主页HTML代码
@{
Layout = null;
}
@using Zhongjiali.ManagerSys.Web.Models;
@using Zhongjiali.ManagerSys.Modles;
@{
ViewBag.Title