Vue 登录

2023-09-23 21:29:45

一、创建

新建一个.NET Framenwork MVC解决方案
搭建三层架构 dal(数据访问层) bll(业务逻辑层) UI（显示层）还可以搭建model层需要相互引用
进行数据迁移

二、dal层操作

public LoginModel Login(string account,string password)
        {
            return db.Logins.FirstOrDefault(m => m.Account == account && m.Password == password);
        }

需要将由视图控制器传过来的账号密码与数据库中的账号与密码相匹配

然后bll直接调用

public LoginModel Login(string account, string password)
        {
            return dal.Login(account, password);
        }

三、控制器操作

如果有验证码的话需要先判断验证码是否相同（并且转化为小写）
定义一个变量接收bll的数据信息
判断这个变量是否为null
如果不为null，将登录的对象存储到Session中（会话）并且返回视图json格式的对象

[HttpPost]
        public ActionResult Login(string uname,string upwd,string code)
        {
            //一、判断验证码
            //二、将验证码转成小写
            if (code.ToLower()==Convert.ToString(Session["CheckCode"]).ToLower())
            {
                //三、登录
                var result = bll.Login(uname, upwd);
                if (result!=null)
                {
                    //将登录成的对象 存储到 Session  （会话） 可以理解为是一个容器  全局任意地方都可以使用  默认20分钟
                    Session["UserInfo"] = result;
                    return Json(new { code = 1, msg = "登录成功", data = "" });
                }
                else
                {
                    return Json(new { code = 0, msg = "登录失败", data = "" });
                }
            }
            else
            {
                //四、验证码错误
                return Json(new { code = -1, msg = "验证码错误",data="" }); 
            }
            
        }

四、视图操作

在视图的头部引用控件

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Main</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>

前提是将这些控件拖到相应的位置

完成页面布局
创建一个一般处理程序，在其中写验证码的代码
定义一个对象，将账号，密码，验证码放到对象中，并用v-model双向绑定
在methods方法中定义一个方法在定义的方法中进行操作

<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                loginData: {
                    uname: ‘‘,
                    upwd: ‘‘,
                    code:‘‘
                }
            }
        },
        methods: {
            login() {
                axios.post(‘/Login/Login‘, this.loginData).then(res => {
                    if (res.data.code == 1) {
                        alert(res.data.msg);
                        location.href = ‘/Student/ShowStudent‘;
                    } else if (res.data.code == -1) {
                        alert(res.data.msg)
                    } else {
                        alert(res.data.msg)
                    }
                })
            }
        }
    })
</script>

小知识：可以在显示的视图下面判断会话中的数据是否为空，如果为空，则返回到登录界面

if(Session["LoginModel"]!=null)
            {
                return View();
            }
            else
            {
                return Redirect("Deng");
            }

在显示界面中，如果想要显示登录人的账号，可以在头部操作

<h2>当前用户:@((Session["LoginModel"] as Model.LoginModel).Account)</h2>

Vue 登录

码农公寓

相关文章