项目简介
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