上一节讲到利用easyui的layout、tree、tab和datagrid创建用户管理的页面,注意利用到easyui的页面一定要按顺序添加jQuery和easyUI的.js和.css样式,灵活查看easyui的帮助文档和demo,修改data-options选项。
下面开始登录页面,用到easyui的window。
1. 先新建一个account,里面放登录的页面,添加相应的控制器和视图:
(Account)Index的代码:
<body> <div> <div id="w" class="easyui-window" title="登录" data-options="iconCls:'icon-save', closable:false, minimizable:false, maximizable:false, draggable:false, resizable:false, collapsible:false" style="width:260px;height:160px;padding:10px;"> <table> <tr> <td>用户:</td><td><input id="name" type="text"/></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td>密码:</td><td><input id="pwd" type="text"/></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td></td><td><input type="button" onclick="" value="登录"/></td> </tr> <tr> <td></td><td></td> </tr> </table> </div> </div> </body>
为了运行方便,直接跳转到登录页面,可以修改下前面提到的Global.asax文件,把route改为Account-Index
运行效果:(运行的快捷键有两种,直接按F5,也就是debug模式,修改文件时需要终止调试;另一种是按Ctrl+F5,release模式,可以直接修改文件,修改后在浏览器页面刷新即可显示新的效果)
在easyui-window的data-options中,我们添加了很多参数,固定了窗口的样式,大小,不能拖拽等。如果不能成功显示,注意查看一下你的窗口文件中是否添加了easyui的script样式。
2. 构建数据库
先在本地项目web文件下的bin文件夹下,新建一个名为sqlite.db的文件:
再打开sqlite,就是长这个样子
新建数据库
数据库选中刚刚在本地新建的sqlite.db,别名这里命为usermanager,确定。
然后在数据库列表左边栏会出现usermanager,双击,展开表,右键,新建表
按图示新建字段并保存
注意!!!
这里必须注意,新建的表名不能和项目名一样,请修改为UserDB,和项目名同名会造成后来命名空间相同报错。
此时UserManager表格已经建好,在左边栏右键,选择最后一项,查询数据
现在新建的表是空白的,为表插入一条数据,即登录的数据。
现在表格里已经有了插入的数据了
3. 利用动软代码生成器,完善解决方案的Data、Business、Model层
打开动软
选择新增数据库服务器,类型选择sqlite,下一步
数据库文件选择我们在本地建的sqlite.db文件,输入本地地址
我的地址:D:\JennyJiang\MyProject\UserManager\UserManager.Web\bin\sqlite.db
然后点击连接字符串,本地保存该字符串Data Source=D:\JennyJiang\MyProject\UserManager\UserManager.Web\bin\sqlite.db
确定。
动软左边栏会生成如图所示的样子,连接上项目的数据库。
接着点击新建项目,选择简单三层结构,下一步
生成好后,动软会自动打开生成的项目。
4. 下面替换动软生成的项目文件到我们建好的项目中
① 替换UserManager.Model
删除.Model自带的Class1.cs,将动软代码中的UserManager.Model中的UserManager.cs复制粘贴过来,然后对本地的UserManager.Model右键生成,确保无错。
②替换UserManager.Data
同样,复制UserManager.DAL中的UserManager.cs复制粘贴过来,有错误一个一个修改,修改命名空间为UserManager.Data,然后引用System.Data.SQLite.dll
复制动软生成的DBUtility到本地文件夹,在解决方案中添加该项目
然后,在UserManager.Data的引用中引用项目,添加DBUtility和UserManager.Model
然后,为.Data生成,报错:DBUtility.DbHelperSQLite文件中,确实System.Data.SQLite,为DBUtility工程引用添加System.Data.SQLite.dll(这个dll在动软的Lib文件夹下已经存在),还要引用MySql.Data.dll
重新生成,但model报错了,但明明已经引用了model项目,感觉是项目名和数据库名相同,造成的,返回重新构造新的数据库,名为UserDB。
把动软生成的代码全部删除后,又重新为sqlite.db创建名为UserDB的表,然后动软代码生成,没有再报错了。
③替换UserManager.Business
复制粘贴动软生成的BLL文件夹下的UserDB.cs,然后添加引用Maticsoft.Common.dll(动软的Lib下也有,或者去网上下载),再添加Model和Data项目引用(注意!!!添加项目引用之前,必须为该项目生成,无错之后再添加引用)
至此,动软代码添加完毕,三层架构也已经完善。接下来的登录校验可以判断与数据库的内容是否相同。
5. 获取数据库里的内容,用于登录
在(Account)Index中获取db的数据,再在后台判断逻辑。这里在Scripts文件夹里新建.js文件,先新建Common文件夹,里面新建Login.js文件。
Login.js里的代码:
function Login() {
var name = $("#name").val();
var pwd = $("#pwd").val();
//前台逻辑判断
if (name == '' || pwd == '') {
$("#showInfo").html("用户名或密码为空");
}
else {
//后台逻辑判断
$.post("Account/DoLogin", { name: name, pwd: pwd },
function (data) {
//alert("Data Loaded: " + data);
if (data == "-1") {
$("#showInfo").html("用户名或密码为空");
}
else if (data == "-2") {
$("#showInfo").html("用户名或密码错误");
}
else {
$("#showInfo").html("登录");
}
});
}
}
同时需要修改(Account)Index页面,为登录button添加事件:
<body> <div> <div id="w" class="easyui-window" title="登录" data-options="iconCls:'icon-save', closable:false, minimizable:false, maximizable:false, draggable:false, resizable:false, collapsible:false" style="width:260px;height:160px;padding:10px;"> <table> <tr> <td>用户:</td><td><input id="name" type="text"/></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td>密码:</td><td><input id="pwd" type="text"/></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td></td><td><input type="button" onclick="Login()" value="登录"/></td> </tr> <tr> <td></td><td><label id="showInfo"></label></td> </tr> </table> </div> </div> </body>
修改Account控制器代码:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace UserManager.Web.Controllers { public class AccountController : Controller { // // GET: /Account/ public ActionResult Index() { return View(); } UserManager.Business.UserDB users = new UserManager.Business.UserDB(); public ActionResult DoLogin() { int res = 0; string name = Request.Form["name"]; string pwd = Request.Form["pwd"]; //后台逻辑判断 if (string.IsNullOrEmpty(name) || string.IsNullOrEmpty(pwd)) { res = -1; } else { //获取数据库内容 //List<UserManager.Model.UserDB> userList = new user List<UserManager.Model.UserDB> userList = users.GetModelList("name='" + name + "'and pwd='" + pwd + "'"); if (userList.Count == 0) { res = -2; } else { Session["user"] = userList[0]; } } return Content(res.ToString()); } } }
同时,由于数据库,需要Web.config文件:
在<configuration>内添加:
<appSettings> <!-- 连接字符串是否加密 --> <add key="ConStringEncrypt" value="false"/> <!-- 数据库连接字符串,(如果采用加密方式,上面一项要设置为true;加密工具,可在官方下载, 如果使用明文这样server=127.0.0.1;database=.....,上面则设置为false。 --> <add key="ConnectionString" value="Data Source=D:\JennyJiang\MyProject\UserManager\UserManager.Web\bin\sqlite.db"/> <!--其它模块连接字符串,可以不断增加以便同一个项目支持连接多个数据库。如果没有,可以删除该行--> <add key="ConnectionString2" value="server=127.0.0.1;database=codematic2;uid=sa;pwd=1"/> </appSettings>
其中“ConnectionString”的value为动软中生成的连接字符串。
最后,运行结果:
6. 为登录跳转到主页
在Login.js文件登录成功判断逻辑后面添加:
else { $("#showInfo").html("登录"); window.location.href = "/Home/Index"; }
输入管理员用户和密码(即在构建数据库表时插入的信息),即可跳转到(Home)Index。