节
春
度
欢

简单Vue登录的功能操作

  一、Model层

[Table("LoginModel")]
    public class LoginModel
    {
        [Key]
        public int NId { get; set; }
        public string CName { get; set; }
        public string CPwd { get; set; }
    }

  二、Dal层

UserDbContext db = new UserDbContext();
        public LoginModel Login(string name,string pwd)
        {
            return db.LoginModels.FirstOrDefault(p => p.CName == name && p.CPwd == pwd);
        }

  三、Bll层

DengDal dengDal = new DengDal();
        public LoginModel Login(string name, string pwd)
        {
            return dengDal.Login(name,pwd);
        }

  四、控制器

DengBll dengBll = new DengBll();
        //显示页面
        public ActionResult Index()
        {
            return View();
        }
        //功能
        [HttpPost]
        public ActionResult  Login(string name, string pwd, string code)
        {

            var lu = dengBll.Login(name, pwd);
            if(lu!=null)
            {
                Session["Chuan"] = lu;
                return Json(new { code = 1, msg = "登陆成功", data = "" });
            }
            else
            {
                return Json(new { code = 0, msg = "登录失败", data = "" });
            }
        }

  五、页面操作

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/vue.js"></script>
    <script src="~/Scripts/axios.js"></script>
</head>
<body>
    <div id="app"> 
        <table>
            <tr>
                <td></td>
                <td>登录</td>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input type="text" v-model="Lu.name" /></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="text" v-model="Lu.pwd" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="checkbox" />请保存我这次的登录信息</td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="登录" v-on:click="DengLu" /></td>
            </tr>
        </table>
    </div>
</body>
</html>

<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                Lu: {
                    name: '',
                    pwd: '',
                }
                
            }
        },
        methods: {
            DengLu() {
                axios.post('/Deng/Login', this.Lu).then(res => {
                    if (res.data.code == 1) {
                        alert(res.data.msg);
                    }
                    else{
                        alert(res.data.msg);
                    }
                })
            }
        }
    })
</script>

 

      待续......

 

posted @ 2021-08-18 21:58  魔术人生  阅读(240)  评论(0)    收藏  举报
复制代码