当前位置： 移动技术网 > IT编程>开发语言>.net > MVC+EasyUI+三层新闻网站建立 实现登录功能（四）

MVC+EasyUI+三层新闻网站建立 实现登录功能（四）

2017年12月08日  | 移动技术网IT编程  | 我要评论

谁能百里挑一刘硕,魔兽世界新服,酒钢三中贴吧

mvc新闻网站建立，实现登录功能

首先在数据库中建立一张userinfo表。

注：以下讲的这些可以用动软代码生成器直接生成，但是对于新手来说还是动手敲一下的好，了解以下实现的过程。

然后在model中建立userinfo的实体层。

 public class userinfo
  {
    public int id { get; set; }
    public string username { get; set; }
    public string userpwd { get; set; }
    public string usermail { get; set; }
    public datetime regtime { get; set; }
  }

接着就在dal层中建立userinfo的数据库访问

//根据用户名密码查询用户
    public userinfo getuserinfomodel(string username, string userpwd)
    {
      string sql = "select * from t_userinfo where username=@username and userpwd=@userpwd";
      sqlparameter[] pms = { 
                 new sqlparameter("@username",sqldbtype.nvarchar,32),
                 new sqlparameter("@userpwd",sqldbtype.nvarchar,32)
                 };
      //给参数赋值
      pms[0].value = username;
      pms[1].value = userpwd;
      datatable dt = sqlhelper.excutedatatable(sql, commandtype.text, pms);
      userinfo userinfo = null;
      if (dt.rows.count>0)
      {
        userinfo = new userinfo();
        loadentity(dt.rows[0],userinfo);
      }
      return userinfo;
    }

    private void loadentity(datarow datarow, userinfo userinfo)
    {
      userinfo.id = convert.toint32(datarow["id"]);
      //判断是否为空
      userinfo.username = datarow["username"] != dbnull.value ? datarow["username"].tostring() : string.empty;
      userinfo.userpwd = datarow["userpwd"] != dbnull.value ? datarow["userpwd"].tostring() : string.empty;
      userinfo.usermail = datarow["usermail"] != dbnull.value ? datarow["usermail"].tostring() : string.empty;
      userinfo.regtime = convert.todatetime(datarow["regtime"]);
    }

在bll层中建立userinfo的逻辑处理层userinfoservices

 dal.userinfodal userinfodal = new dal.userinfodal();
    public userinfo getuserinfomodel(string username, string userpwd)
    {
      return userinfodal.getuserinfomodel(username, userpwd);
    }

这些都准备完毕后就到登录页面提交表单就可以了（在提交表单之前需要判断用户名、密码、验证码是否为空，下面我做了一个简单的判断）

@{
  layout = null;
}

<!doctype html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>登录</title>
  <script src="~/scripts/jquery-1.8.2.js"></script>
  <script src="~/content/easyui/jquery.easyui.min.js"></script>
  <script src="~/content/easyui/easyui-lang-zh_cn.js"></script>
  <link href="~/content/easyui/themes/default/easyui.css" rel="external nofollow" rel="stylesheet" />
  <link href="~/content/easyui/themes/icon.css" rel="external nofollow" rel="stylesheet" />
  <script type="text/javascript">
    $(function () {
      
      initwin(); //初始化登录窗体
      changecheckcode(); //切换验证码
      cheaklogin(); //验证登录
    });
    //验证登录
    function cheaklogin() {
      $("#btnok").click(function () {
        
        if ($("#txtname").val() == "") {
          $("#spanname").text("必填");
        }
        else {
          $("#spanname").text("");
        }
        if ($("#txtpwd").val() == "") {
          $("#spanpwd").text("必填");
        }
        else {
          $("#spanpwd").text("");
        }
        if ($("#txtvcode").val() == "") {
          $("#spanvcode").text("必填");
        }
        else {
          $("#spanvcode").text("");
        }
        if ($("#txtname").val() != "" && $("#txtpwd").val() != "" && $("#txtvcode").val() != "") {
          //先把表单序列化为json对象
          var jsonform = $("#loginform").serializearray();
          //把数据异步提交到后台
          $.ajax({
            type: "post",
            url: "/login/checklogin",
            data: jsonform,
            success: function (data) {
              var serverdata = data.split(':');
              if (serverdata[0]=="ok") {
                window.location.href = "/home/index";
              }
              else if (serverdata[0] == "no") {
                $("#spancheak").text(serverdata[1]);
              }
              else {
                $("#spancheak").text("异常错误");
              }
            }
        
          });
        }
      });
    }
    //初始化登录窗体
    function initwin() {
      $("#win").window({
        title: "登录",
        width: 400,
        height: 270,
        collapsible: false,
        minimizable: false,
        maximizable: false,
        closable: false,
        modal: true,
        resizable: false,
      });
      
    }
    //切换验证码
    function changecheckcode() {
      $("#changevcode").click(function () {
        $("#image").attr("src", $("#image").attr("src") + 1);
      });
    }
  </script>
</head>
<body>
  
    <div id="win" class="easyui-window">
      <div>
        <div style="height:20px"></div>
        <form id="loginform">

          <table>
            <tr>
              <td style="width:20px"></td>
              <td>用户名:</td>
              <td><input type="text" class="easyui-textbox" id="txtname" name="txtname" /></td>
              <td><span id="spanname" style="color:red"></span></td>
            </tr>
            <tr style="height:10px"></tr>

            <tr>
              <td style="width:20px"></td>
              <td>密 码:</td>
              <td><input type="password" class="easyui-textbox" id="txtpwd" name="txtpwd"></td>
              <td><span id="spanpwd" style="color:red"></span></td>
            </tr>
            <tr style="height:10px"></tr>
            <tr>
              <td style="width:20px"></td>
              <td>验证码:</td>
              <td><input type="text" class="easyui-textbox" id="txtvcode" name="txtvcode" /></td>
              <td><span id="spanvcode" style="color:red"></span></td>
            </tr>

            <tr style="height:10px"></tr>

            <tr>
              <td style="width:20px"></td>
              <td><img id="image" src="/login/validatecode/?id=1" style="float: left; height: 24px;" /></td>
              <td><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="changevcode">看不清，换一张</a></td>
            </tr>

          </table>
        </form>
      </div>
      <div style="height:10px"></div>
      <div data-options="region:'south',border:false" style="text-align:center;padding:5px 0 0;">
        <a class="easyui-linkbutton" data-options="iconcls:'icon-ok'" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="btnok" style="width:80px">登录</a>
        <span id="spancheak" style="color:red"></span>
      </div>


</body>
</html>

在上面的代码可以看出我是用的ajax异步提交表单到了  /login/checklogin  路径下这代表  login控制器下的checklogin （需要自己新建）  也就是说登录的逻辑判断处理就是在checklogin   里面完成的。

 public actionresult checklogin()
    {
      //拿到session的值
      string vcode = session["validatecode"].tostring();
      //清空session
      session["validatecode"] = null;
      string requestcode = request["txtvcode"].tostring();
      string username = request["txtname"].tostring();
      string userpwd = request["txtpwd"].tostring();
      if (!requestcode.equals(vcode,stringcomparison.currentcultureignorecase))
      {
        return content("no:验证码错误!!");
      }
      bll.userinfoservices userinfoservices = new bll.userinfoservices();
      userinfo userinfo = userinfoservices.getuserinfomodel(username, userpwd);
      if (userinfo != null)
      {
        session["username"] = userinfo.username;
        return content("ok:登录成功");
      }
      else
      {
        return content("no:用户名或者密码错误");
      }
    }

注：连接数据库的语句自己在配置文件里面配置

上面的步骤每步都正确的话，那么重新生成解决方案后，运行输入用户名密码就可以登录成功了

 这里可以看到页面已经实现了跳转。只是主页还没有建立而已。下一讲就讲主页的布局。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网