上一节讲到利用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。
1636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
