模仿QQ登录头像的切换

模仿QQ登录头像的切换

开发工具与关键技术：SQL Server 2014 Management Studio 如何切换登录的头像
作者：李国旭
撰写时间：2019年7月6日

我们平时如果注意的话会发现QQ登录的头像会随着我们的帐号的切换而切换，还有就是微信的登陆也是这样都会随着我们的账号的变化而变化；就觉得很神奇，那么他是怎样实现这样的登录的效果的呢？我们一起来看一下它的神奇之处！
就用我现在做的这个项目为例：首先，就要把它员工或者是管理员的账号、密码通过新增进数据库中，把账号和密码一起保存在数据库中。注意：密码不能用明文保存在数据库，一定要加密后再保存进数据库里，要不然明文的密码和容易给别人窃取，而且这样做很危险，所以一定要进行加密后再保存到数据库中。

那么先判断我们的输入账号显示用户的头像，获取它账号的值，判断它的账号不等于空；然后For…in…循环i++，从控制器那边获取到账号的值，拼接账号加上它的参数来传参，然后再new一个时间；然后就是把图片show出来，否则就是hide隐藏起来，如下图所示：

当然啦，我们也要在控制器那边判断我们选择的角色的类型对不对，，对用户输入的密码加密，然后再判断加密后的密码和数据库中的密码比较，之后就是验证选择的角色是否正确，把用户的数据放入session中，获取用户类型的名称和ID
最后就是设置session，传递用户ID和用户类型的ID
下面的就是判断它的用户的角色类型的选择是否正确的代码

//对用户输入的密码加密
string PassWord = AESEncryptHelper.Encrypt(strPassWord);
//用加密后的密码和数据库查询到的密码比较
if (PassWord == dbUser.PassWord)
{
//==验证选择的角色是否正确
var listUserType = (from tbUser in myModels.S_User
join tbUserRoleDetail in myModels.S_UserRoleDetail on tbUser.UserID equals tbUserRoleDetail.UserID
join tbUserType in myModels.S_UserType on tbUserRoleDetail.UserTypeID equals tbUserType.UserTypeID
join tbemployee in myModels.S_Employee on tbUser.UserID equals tbemployee.UserID
where tbUser.UserID == dbUser.UserID && tbUserType.typeClass == strUserType.Trim()
select new
{
tbUserType.UserTypeID,
tbUserType.UserType
}).ToList();
if (listUserType.Count > 0)
{
//===确认身份正确

//把用户数据放到session中
//获取用户类型名称
string userTypeName = listUserType[0].UserType.Trim();
//获取用户类型ID
int userTypeId = listUserType[0].UserTypeID;

//设置session
Session["UserID"] = dbUser.UserID; // 传递 UserID
Session["UserTypeID"] = userTypeId;// 传递 UserTypeID
Session["ServerTime"] = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") ;//登录时间
Session["UserType"] = strUserType;//用户的类型 1-客户；2-员工；3-管理

判断用户的账号不等于空和它的账号名的长度大于或等于3，查询员工的数据和员工的图片，用byte[] EmployeePicture = empImage.EmployeePicture;来装图片，然后再判断员工的图片不等于空就返回图片的文件，为了避免有一些员工的图片是空所以有些它就会不显示，否则就是返回一个空的值。如下图片所示：

就好像上图一样，我给它一个放置装图片的框，然后当我们在输入账号的时候它就会显示出来，没输入的时候它就会自动的隐藏起来，当我们再次输入完整的账号的时候，它才会真正的显示出来
下面呢就是效果图了，每一次输入的账号不同它的头像都会不一样都会随着账号的变化而变化。
如图所示：