登录+嵌套页面+EF调用存储过程
1. 嵌套页面
-
在嵌套页面的时候我们需要把样式文件,图片文件等复制到Content文件夹里,然后将复制的HTML代码里路径的地方更改一下
-
登录页面中的验证码我们可以采取以下方式复制
2.1 在MVC中新建一个一般处理程序
![]()
2.2 将验证码一般处理程序中的代码复制到我们刚刚创建的一般处理程序中,然后把一般处理程序所继承的类也复制上
![]()
2.3 我们在复制的时候会报错,处理的方法就是点击报错的地方,用快速处理方式引用命名空间
![]()
3.登录
3.1 登录的后台DAL,控制器,视图等都要和其他的方法分开
3.2 登录后台代码
/// <summary>
/// 登录
/// </summary>
/// <param name="uname"></param>
/// <param name="upwd"></param>
/// <returns></returns>
public UserInfo Login(string uname,string upwd)
{
return db.UserInfo.FirstOrDefault(m => m.Uname == uname && m.Upwd == upwd);
}
3.3 登录前台代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电商后台管理系统</title>
<!---代码中实际部分可以抽取出来 Start--------->
<link href="/Content/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/Content/css/common.css" rel="stylesheet" />
<link href="/Content/css/login.css" rel="stylesheet" />
<script src="/Content/bootstrap/jquery-1.10.2.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.js"></script>
<script src="/Scripts/vue.js"></script>
<script src="/Scripts/axios.js"></script>
<!----代码中实际部分可以抽取出来 End----------->
</head>
<body>
<div id="app">
<!--登录容器-->
<div class="loginTop">
<h4>电商后台管理系统</h4>
</div>
<div class="loginCenter">
<div class="container loginarea">
<div class="loginLogo">
<img src="/Content/images/bwlogo.jpg" /><span>物联网工程学院-电商后台管理系统</span>
</div>
<form role="form">
<!--电商的Logo 以八维Logo开始-->
<div class="form-group">
<input type="text" class="form-control" id="UserName" placeholder="账号" v-model="LoadData.uname">
</div>
<div class="form-group">
<input type="text" class="form-control" id="Password" placeholder="密码" v-model="LoadData.upwd">
</div>
<div class="form-group">
<input type="text" class="form-control validateCode" id="ValidateCode" placeholder="请输入验证码" v-model="LoadData.code">
<img src="/Handler1.ashx" class="valiedateCodeImage" onclick="this.src = '/Handler1.ashx?t=' + Math.random()" />
</div>
<button type="button" class="btn btn-primary btnLen" v-on:click="loaGinSubmit()">登录</button>
</form>
</div>
</div>
<div class="loginBottom">
<dt>
<dl>技术支持:物联网工程学院教研组</dl>
</dt>
</div>
</div>
</body>
</html>
<script>
let app = new Vue({
el: "#app",
data() {
return {
LoadData:{
uname: '',
upwd: '',
code: ''
}
}
},
methods: {
loaGinSubmit() {
if (this.LoadData.uname
== "") {
alert('请输入用户名');
return
}
if (this.LoadData.upwd
== "") {
alert('请输入密码');
return
}
if (this.LoadData.code
== "") {
alert('请输入验证码');
return
}
axios.post('/Load/Load', this.LoadData).then(res => {
if (res.data.Code == 1) {
alert(res.data.Msg)
location.href = '/Index/Index'
}
else {
alert(res.data.Msg)
}
})
}
},
created: function () {
}
})
</script>
3.3登录的枚举类
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Commerce.Core.Common
{
public enum ResponseType
{
/// <summary>
/// 成功
/// </summary>
Success = 1,
/// <summary>
/// 失败
/// </summary>
Fail = 0,
/// <summary>
/// 验证码错误
/// </summary>
ValCode = -1,
/// <summary>
/// 发生错误
/// </summary>
Error = -99
}
public static class ResponseText
{
public const string ValCodeMessage = "验证码错误";
public const string Success = "成功";
public const string Fali = "失败";
public const string Error = "系统错误";
}
}
3.4登录方法控制器
/// <summary>
/// 登录
/// </summary>
/// <param name="uname">用户名</param>
/// <param name="upwd">密码</param>
/// <param name="code">验证码</param>
/// <returns></returns>
public ActionResult Load(string uname, string upwd,string code)
{
ResponseModel responseModel = new ResponseModel();
try
{
//
if (code.ToLower()==Convert.ToString(Session["CheckCode"]).ToLower())
{
if (loginBll.Login(uname,upwd)!=null)
{
//成功
Session["UserName"] = uname;
responseModel.Code = (int)ResponseType.Success;
responseModel.Msg = ResponseText.Success;
responseModel.Data = "";
return Json(responseModel);
//return Redirect("");//显示的界面
}
else
{
//失败
responseModel.Code = (int)ResponseType.Fail;
responseModel.Msg = ResponseText.Fali;
responseModel.Data = "";
return Json(responseModel);
}
}
else
{
responseModel.Code = (int)ResponseType.ValCode;
responseModel.Msg = "验证码失效";
responseModel.Data = "";
return Json(responseModel);
}
}
catch (Exception)
{
throw;
}
}
-
EF调存储过程分页
4.1SQL语句
Create proc p_Show
(
@pageindex int,
@pagesize int,
@uname nvarchar(20),
@totalcount int out,
@totalpage int out
)
as
Begin
Declare @sql nvarchar(Max) = 'select * from UserInfo where 1=1'
declare @sqlcount nvarchar(max) = 'select @totalcount = count(*) from Userinfo where 1=1 '
if(@uname != null)
begin
set @sql+=' and uname like''%'+@uname+'%'' '
set @sqlcount +=' and uname like''%'+@uname+'%'''
end
set @sql +=' order by uid offset (@pageindex-1) * @pageindex rows fetch next @pagesize rows only '
exec sp_executesql @sql,N'@pageindex int,@pagesize int',@pageindex,@pagesize
exec sp_executesql @sqlcount,N'@totalcount int out',@totalcount out
set @totalpage = CEILING( @totalcount * 1.0 / @pagesize)
end
declare @tc int,@tp int
exec P_Show 1,3,'',@tc out,@tp out
select @tc,@tp4.2DAL
//实例化上下文
Day0816CommerceDbContextEntities db = new Day0816CommerceDbContextEntities();
public List<UserInfo> PageShow(out int totalpage, out int totalcount, string uname,int pageindex=1,int pagesize=3)
{
SqlParameter[] sqls =
{
new SqlParameter("@pageindex",pageindex),
new SqlParameter("@pagesize",pagesize),
new SqlParameter("@uname",uname),
new SqlParameter("@totalcount", System.Data.SqlDbType.Int),
new SqlParameter("@totalpage", System.Data.SqlDbType.Int)
};
sqls[3].Direction = System.Data.ParameterDirection.Output;
sqls[4].Direction = System.Data.ParameterDirection.Output;
var list = db.Database.SqlQuery<UserInfo>("exec P_Show",sqls).ToList();
totalcount = (int)sqls[3].Value;
totalpage = (int)sqls[4].Value;
return list;
}
浙公网安备 33010602011771号