简单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>
待续......
