项目简介
1.开发工具采用Vs2015，数据库则是SQL Server2008R2。
2.前端框架采用jquery EasyUI（版本1.4.4）；官网地址：jeasyui；
官方文档地址：文档
3.后端框架：Asp.Net MVC
项目结尾有源码
项目环境搭建
一、下载jquery EasyUI
二、建立MVC项目
1.新建项目
2.搭建项目结构
（1）.建立三层结构，并在外围建立解决方案文件夹，便于管理。
（2）新建视图，然后引入jquery EasyUI：
其中table.css美化登录框样式:
* { font-size: 13px;}/*body { background: #D2E0F2;}*/.tableForm { border-collapse: collapse;} .tableForm th { text-align: right; border: 1px solid #ccc; padding: 3px; background-color: #F5F5F5; height: 25px; } .tableForm td { text-align: left; border: 1px solid #ccc; padding: 3px; background-color: white; height: 25px; }Comman.js通用表单验证：
//在iframe中调用，在父窗口中出提示框(herf方式不用调父窗口)$.extend({ show_warning: function (strTitle, strMsg) { $.messager.show({ title: strTitle, width: 300, height: 100, msg: strMsg, closable: true, showType: 'slide', style: { right: '', top: document.body.scrollTop + document.documentElement.scrollTop, bottom: '' } }); }});//弹框$.extend({ show_alert: function (strTitle, strMsg) { $.messager.alert(strTitle, strMsg); }});//扩展validatebox，添加验证$.extend($.fn.validatebox.defaults.rules, { eqPwd: { validator: function (value, param) { return value == $(param[0]).val(); }, message: '密码不一致！' }, idcard: {// 验证身份证 validator: function (value) { return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value); }, message: '身份证号码格式不正确' }, minLength: { validator: function (value, param) { return value.length >= param[0]; }, message: '请输入至少（2）个字符.' }, length: { validator: function (value, param) { var len = $.trim(value).length; return len >= param[0] && len <= param[1]; }, message: "必须介于{0}和{1}之间." }, phone: {// 验证电话号码 validator: function (value) { return /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value); }, message: '格式不正确,请使用下面格式:020-88888888' }, mobile: {// 验证手机号码 validator: function (value) { return /^(13|15|18)\d{9}$/i.test(value); }, message: '手机号码格式不正确' }, intOrFloat: {// 验证整数或小数 validator: function (value) { return /^\d+(\.\d+)?$/i.test(value); }, message: '请输入数字，并确保格式正确' }, currency: {// 验证货币 validator: function (value) { return /^\d+(\.\d+)?$/i.test(value); }, message: '货币格式不正确' }, qq: {// 验证QQ,从10000开始 validator: function (value) { return /^[1-9]\d{4,9}$/i.test(value); }, message: 'QQ号码格式不正确' }, integer: {// 验证整数 可正负数 validator: function (value) { //return /^[+]?[1-9]+\d*$/i.test(value); return /^([+]?[0-9])|([-]?[0-9])+\d*$/i.test(value); }, message: '请输入整数' }, age: {// 验证年龄 validator: function (value) { return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value); }, message: '年龄必须是0到120之间的整数' }, chinese: {// 验证中文 validator: function (value) { return /^[\Α-\￥]+$/i.test(value); }, message: '请输入中文' }, english: {// 验证英语 validator: function (value) { return /^[A-Za-z]+$/i.test(value); }, message: '请输入英文' }, unnormal: {// 验证是否包含空格和非法字符 validator: function (value) { return /.+/i.test(value); }, message: '输入值不能为空和包含其他非法字符' }, username: {// 验证用户名 validator: function (value) { return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value); }, message: '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）' }, dbname: {// 验证字段表名 validator: function (value) { return /^[a-zA-Z][a-zA-Z0-9]{3,19}$/i.test(value); }, message: '输入不合法（字母开头，允许4-20字节，允许字母数字）' }, faxno: {// 验证传真 validator: function (value) { return /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value); }, message: '传真号码不正确' }, zip: {// 验证邮政编码 validator: function (value) { return /^[1-9]\d{5}$/i.test(value); }, message: '邮政编码格式不正确' }, ip: {// 验证IP地址 validator: function (value) { return /d+.d+.d+.d+/i.test(value); }, message: 'IP地址格式不正确' }, name: {// 验证姓名，可以是中文或英文 validator: function (value) { return /^[\Α-\￥]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value); }, message: '请输入姓名' }, date: {// 验证姓名，可以是中文或英文 validator: function (value) { //格式yyyy-MM-dd或yyyy-M-d return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value); }, message: '清输入合适的日期格式' }, msn: { validator: function (value) { return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value); }, message: '请输入有效的msn账号(例：abc@hotnail(msn/live).com)' }, same: { validator: function (value, param) { if ($("#" + param[0]).val() != "" && value != "") { return $("#" + param[0]).val() == value; } else { return true; } }, message: '两次输入的密码不一致！' }});//接收一个以逗号分割的字符串，返回List，list里每一项都是一个字符串（做编辑功能的时候 传入id 然后自动勾选combo系列组件）stringToList = function (value) { if (value != undefined && value != '') { var values = []; var t = value.split(','); for (var i = 0; i < t.length; i++) { values.push('' + t[i]); /* 避免将ID当成数字 */ } return values; } else { return []; }};getToolBar = function (data) { if (data.toolbar != undefined && data.toolbar != '') { var toolbar = []; $.each(data.toolbar, function (index, row) { var handler = row.handler; row.handler = function () { eval(handler); }; toolbar.push(row); }); return toolbar; } else { return []; }}（3）实现验证码功能：
验证码类暂时就不分享了，放到博客上太多了，这个项目讲完后会放源码到网盘，也可以自行编写或者百度。
（4）js登录方法：
function login() { if (checkInput()) { var postData = { AccountName: $("#loginName").val(),//用户名 Password: $("#loginPwd").val(),//密码 CookieExpires: $("#remember").val()//Cookie }; //异步实现登录功能 $.post("你的方法", postData, function (data) { if (data == "OK") { //成功则跳转到首页 window.location.href = "/Home/Index"; } else { alert(data); window.location.href = "/Login/Index/"; } }); } }（5）页面总Demo：
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>登录</title> <link href="~/Scripts/jquery-easyui-1.4.4/themes/bootstrap/easyui.css" rel="stylesheet" /> <script src="~/Scripts/jquery-easyui-1.4.4/jquery.min.js"></script> <script src="~/Scripts/jquery-easyui-1.4.4/jquery.easyui.min.js"></script> <script src="~/Scripts/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script> <link href="~/Content/themes/icon.css" rel="stylesheet" /> <script src="~/Content/js/common.js"></script> <link href="~/Content/themes/table.css" rel="stylesheet" /> <script type="text/javascript"> if (window.parent.window != window) { window.top.location.href = "/Login/Index"; } $(function () { //初始化 $("#loginDialog").dialog({ title: "用户登录", closable: false, iconCls: 'icon-user_b', modal: true, width: 310, height: 220, buttons: [{ id: "loginBtn", text: "登 录", handler: function () { if ($("#loginFrm").form('validate')) { login();//登录方法 } } }] }); //回车提交表单 //$("#loginFrm").find('input').on('keyup', function (event) { // if (event.keyCode == '13') { // login(); // } //}) //创建验证码 $("#valiCode").bind("click", function () { this.src = "@Url.Action("GetValidatorGraphics", "Validator")?time=" + (new Date()).getTime(); }); //获取验证码（本地运行时使用 发布时注释） var code = getCookie('ValidatorCode'); $("#loginVerificationCode").val(code); $("#loginName").focus(); }) //登录方法 function login() { if (checkInput()) { var postData = { AccountName: $("#loginName").val(), Password: $("#loginPwd").val(), CookieExpires: $("#remember").val() }; //异步实现登录功能 $.post("/Login/CheckUserLogin", postData, function (data) { if (data == "OK") { window.location.href = "/Home/Index"; } else { alert(data); window.location.href = "/Login/Index/"; } }); } } //验证码验证 function checkInput() { //通过cookie获取验证码 var validatorcode = getCookie('ValidatorCode').toUpperCase(); if ($.trim($("#loginVerificationCode").val()) == "") { $.show_alert("信息", "验证码不能为空"); $("#loginVerificationCode").val("").focus(); return false; } else if (document.getElementById("loginVerificationCode").value.toUpperCase() != validatorcode) { $.show_alert("信息", "验证码错误"); $("#loginVerificationCode").val("").focus(); $("#valiCode").attr('src', '/Validator/GetValidatorGraphics?time=' + (new Date()).getTime()); return false; } else { return true; } } //获取cookie function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1); if (c.indexOf(name) != -1) return c.substring(name.length, c.length); } return ""; } </script> <style type="text/css"> .cbp-bislideshow { list-style: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -9; padding: 0; margin: 0; } .cbp-bislideshow li { position: absolute; width: 101%; height: 101%; top: -0.5%; left: -0.5%; } .backgroundsize .cbp-bislideshow li { -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center; } .cbp-bislideshow li img { display: block; width: 100%; } </style></head><body onload='loginName.focus()'> <!--背景图，随便找个好看的贴上就行，这里就不贴出来了--> <div class="container"> <div class="main"> <ul id="cbp-bislideshow" class="cbp-bislideshow"> <li> <img src="~/Content/images/03.jpg" /> </li> </ul> </div> </div> <div id="loginDialog" style="padding: 15px; text-align: center;"> <form id="loginFrm" method="post"> <table class="tableForm" style="width: 100%"> <tr> <th> 用户名： </th> <td> <input type="text" id="loginName" name="loginName" class="easyui-validatebox textbox" style="width:170px;height:22px;" data-options="prompt:'UserName',required:true,validType:'length[2,20]'" /> </td> </tr> <tr> <th> 密 码： </th> <td> <input type="password" id="loginPwd" name="loginPwd" class="easyui-validatebox textbox" style="width: 170px; height: 22px;" data-options="prompt:'Password',required:true" /> </td> </tr> <tr> <th> 验证码： </th> <td> <input type="text" class="easyui-validatebox textbox" name="loginVerificationCode" id="loginVerificationCode" style="width: 100px; height: 22px; vertical-align: middle;" /> <img id="valiCode" style="vertical-align: middle;" src="@Url.Action("GetValidatorGraphics", "Validator")" title="看不清？点击更换图片。" /> </td> </tr> </table> </form> </div></body></html>最终效果
到这里，首页基本搭建完成，下一步则该进行数据表搭建。每完成一个阶段，博主都会分享当前阶段的源码，此次源码：
百度云链接
提取码：GQYu
