物流运交管理系统技术解析（二）构建登陆界面

最新推荐文章于 2021-03-16 15:22:44 发布

陈炳贤

最新推荐文章于 2021-03-16 15:22:44 发布

阅读量1.3k

点赞数 1

分类专栏： MVC 文章标签： MVC C# 物流运交管理系统

本文链接：https://blog.csdn.net/GX_ChenBingXian/article/details/46051703

版权

MVC 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

构建登陆界面

引用完脚本之后，就可以在<body>里写jquery语句了。下面我们来看具体怎么实现。先看一个简单登陆界面效果图。

从界面上可以看到我们这里用到的控件有：

控件名称	说明
单行文本控件（easyui-textbox）	第一要设置每个控件的id，第二设置大小不设置也有默认
按钮（easyui-linkbutton）	第一要设置每个控件的id，第二设置大小不设置也有默认

登陆用到的表和表的关系

登陆功能设计到的表就有：Stafflist（员工表）、UserList（用户表）

员工表主要字段有：员工ID、员工姓名、员工编号、身份证号码、联系电话、联系地址、物流地点ID、部门ID、备注

列名	数据类型	主键/外键	说明
StaffID	Int	主键	员工ID
StaffName	Char		员工姓名
StaffNumber	Char		员工编号
IdentityCardNumber	Char		身份证号码
LinkPhone	Char		联系电话
LinkAddress	Char		联系地址
LogisticsPlaceID	Int	外键	物流地点ID
Remark	Char		备注
DepartmentID	Int	外键	部门ID

用户表主要字段有：用户ID、账号、密码、员工ID、权限ID

列名	数据类型	主键/外键	说明
UserID	Int	主键	用户ID
AccountNumber	Char		账号
Password	Char		密码
StaffID	Int	外键	员工ID
PowerID	Int	外键	权限ID

关系图：

界面层功能的实现

界面层脚本中的代码：

$(document).ready(function () {

document.onkeydown = function (e) { //注册全局键盘事件

var ev = document.all ? window.event : e;

if (ev.keyCode == 13) {//如（ev、ctrlkey&& ev.leyCode==13)为ctrl+enter触发

DengLu(); //调用登陆方法

}

Verification_Code();

$("#Register").hide();

});

function DengLu() {//点击登陆时触发的方法

$.getJSON("/WebMain/UserLogin?strAccountNumber="+ $("#User_Name").val() +"&"+"strPassword1="+ $("#U_Password").val(),

//WebMain为控制器名UserLogin为控制器方法名strAccountNumber和strPassword1为参数(具体见‘2.2-3-2控制器传值给界面’)

function (data) {//data是控制器传过来的值

if (data != ""){

Verification_Code();

var test = window.prompt("请输入下面的验证码！\n" + T);//显示验证码

if(test == T) {

window.location.href = "/WebMain/Main";

} else {

if (test == null) {

} else {

Verification_Code();

DengLu();

}

} else {

alert("该账户不存在！请重新输入~");

$("#User_Name").val("");//清空登陆账号

$("#U_Password").val("");//清空登陆密码

}

});

}

var T = "";

function Verification_Code() {

$.getJSON("/WebMain/MyRandom",

function (data) {//data是控制器中传过来的验证码

T =data;

});

}

function Show() {

$("#Login").fadeOut(2000);

setTimeout(function () {//设置执行时间1900是时间

$("#Register").fadeIn(2000);

},1900);

}

function returnLogin() {

$("#Register").fadeOut(2000);//隐藏id为Register的控件2000为隐藏的时间

setTimeout(function () {

$("#Login").fadeIn(2000);//显示id为Login的控件2000为显示的时间

},1900);

}

function Register() {

$.getJSON("/WebMain/Register?strAccountNumber="+ $("#UserName").val() + "&"

+ "strPassword1=" + MiMa_2 + "&"

+ "strMailBox=" + $("#UserMail").val(),

function (data) {

confirm('注册成功。\n 正在为你跳转到登陆界面，请稍后。')

window.location.href = "/WebMain/Login";

});

}

function CheakAccountNumber() {

$.getJSON("/WebMain/ServiceRegister?strAccountNumber="+ $("#UserName").val(),

function (data) {

if (data != ""){

alert("此账号已被设定，请重新输入");

$("#UserName").val("");

}

});

}

var MiMa_1 = "";//全局变量

var MiMa_2 = "";

function Compare() {

MiMa_1= $("#UPassword_one").val();//获取文本中的值

MiMa_2= $("#UPassword_two").val();

if (MiMa_1 == MiMa_2) {

} else {

alert("两次次输入密码不一致, 请重新输入！");

$("#UPassword_one").val("");

$("#UPassword_two").val("");

}

</script>

Body中的代码：

<body>

<divclass="panel-head"><strong>物流运交系统</strong></div>

<divclass="panel-body"style="padding:30px;">

<divclass="form-group">

</div>

<divclass="form-group">

</div>

<divclass="panel-foottext-center"><button class="buttonbutton-block bg-main text-big" onclick="DengLu()">登陆</button></div>

</div>

</div>

<divclass="panel-head"><strong>注册</strong></div>

<divclass="panel-body"style="padding:30px;">

<divclass="form-group">

</div>

<divclass="form-group">

</div>

<divclass="form-group">

<a>再次输入密码</a><input id="UPassword_two"type="password"class="input"name="password"data-validate="required:请再次填写密码" onblur="Compare()"/>

</div>

<divclass="form-group">

</div>

<divclass="panel-foottext-center"><button class="buttonbutton-block bg-main text-big" onclick="Register()">Ｒｅｇｉｓｔｅｒ</button></div>

</div>

</div>

</body>

控制器传值给界面：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Data;

namespace 物流运交系统.Controllers

{

public class WebMainController: Controller

{

BLLUserZone.Userzone myUserzone = new BLLUserZone.Userzone();//实例化逻辑层

public ActionResultRegister(string strAccountNumber, string strPassword1, stringstrMailBox)

{

DataTable dt =myUserzone.Register(strAccountNumber, strPassword1, strMailBox);

List<Dictionary<string, object>>listReturn = ConvertHelper.DtToList(dt);

return Json(listReturn, JsonRequestBehavior.AllowGet);

// JsonRequestBehavior.AllowGet是允许界面获取控制器中的值

}

public ActionResultUserLogin(string strAccountNumber, string strPassword1)

{

DataTable dt = myUserzone.UserLogin(strAccountNumber,strPassword1);

//dt是获取逻辑层传过来的值

List<Dictionary<string, object>>listReturn = ConvertHelper.DtToList(dt);

// ConvertHelper是一个静态类(详细见图2.2（图1）)，它的主要作用是将DataTable转换成Json数//据供界面获取

return Json(listReturn, JsonRequestBehavior.AllowGet);

}

#region 注册时检测输入账号是否存在

public ActionResultServiceRegister(string strAccountNumber)

{

DataTable dt = myUserzone.ServiceRegister(strAccountNumber);

List<Dictionary<string, object>>listReturn = ConvertHelper.DtToList(dt);

return Json(listReturn, JsonRequestBehavior.AllowGet);

}

#endregion

#region 随机生成验证码

public int MyRandom()

{

int x = 0;

Random Verification = newRandom();

x =Verification.Next(1000, 9999);

return x;

}

#endregion

}

2.2（图1）

逻辑层传值给控制器：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Data.SqlClient;

using System.Data;

namespace BLLUserZone//命名空间

{

public class Userzone//命名空间中的公共类

{

DALPublic.DALMethod myDALMethod = new DALPublic.DALMethod();//实例化数据层

public DataTableUserLogin(string strAccountNumber, string strPassword1)

{

SqlParameter[] SQLCMDpas = {

new SqlParameter("@type",SqlDbType.Char),

new SqlParameter("@AccountNumber",SqlDbType.NChar),

newSqlParameter("@Password1",SqlDbType.NChar),

};//SqlParameter[]为参数数组

SQLCMDpas[0].Value = "Login";

SQLCMDpas[1].Value = strAccountNumber;//给第2个参数赋值即赋值给参数@AccountNumber

SQLCMDpas[2].Value = strPassword1;

DataTable dt = myDALMethod.DAL_SelectDB_Par("UserZone", SQLCMDpas);

return dt;

}

public DataTableServiceRegister(string strAccountNumber)

{

SqlParameter[] SQLCMDpas = {

new SqlParameter("@type",SqlDbType.Char),

new SqlParameter("@AccountNumber",SqlDbType.NChar),

};

SQLCMDpas[0].Value = "ServiceRegister";

SQLCMDpas[1].Value = strAccountNumber;

DataTable dt = myDALMethod.DAL_SelectDB_Par("UserZone", SQLCMDpas);

return dt;

}

public DataTableRegister(string strAccountNumber, string strPassword1, stringstrMailBox)

{

SqlParameter[] SQLCMDpas = {

new SqlParameter("@type",SqlDbType.NChar),

new SqlParameter("@AccountNumber",SqlDbType.NChar),

new SqlParameter("@Password1",SqlDbType.NChar),

new SqlParameter("@MailBox",SqlDbType.NChar),

};

SQLCMDpas[0].Value = "Register";

SQLCMDpas[1].Value = strAccountNumber;

SQLCMDpas[2].Value = strPassword1;

SQLCMDpas[3].Value = strMailBox;

DataTable dt = myDALMethod.DAL_SelectDB_Par("UserZone", SQLCMDpas);

//"UserZone"是存储过程的名称

return dt;

}

数据库存储过程中的代码：

if @type='Login'
begin
SELECT     StaffList.LogisticsPlaceID, UserList.UserID, UserList.AccountNumber, UserList.Password1, UserList.StaffID, UserList.PowerID, UserList.MailBox
FROM       UserList INNER JOIN
           StaffList ON UserList.StaffID = StaffList.StaffID
where AccountNumber=@AccountNumber and Password1=@Password1 and StaffList.DeleteNo=0
end

仅供学习，禁止商业用途

陈炳贤

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
物流运交管理系统技术解析（二）构建登陆界面

构建登陆界面引用完脚本之后，就可以在里写jquery语句了。下面我们来看具体怎么实现。先看一个简单登陆界面效果图。从界面上可以看到我们这里用到的控件有：控件名称说明单行文本控件（easyui-textbox）第一要设置每个控件的id，第二设置大小不设置也有默认按钮（easyui-linkbu
复制链接

扫一扫