当前博客：50-快码FOF中文编程layui实战：实现博客登录

414 次浏览【转载需注明来源】

收藏内容 (0) (0)

个性签名：请输入个性签名___________

登录界面大家都写过吧，layui的表单组件也会吧，不会的参考博客：13-快码FOF中文编程layui教学-组件：表单-快码编程博客阅读 (fofstudio.net)

我们这里用layui的表单组件，配合弹出层，做一个弹窗登录，首先我们做一个登录的区块，不需要太复杂，一个账号，一个密码，登录按钮就可以了，

html代码：

<表单 类名="lay-表单 lay-表单-方框风格" lay-过滤器="登录表单" id="登录表单" 行内样式="内边距: 20px;下内边距: 0;">
	<区块 类名="lay-表单-项目">
		<数据框标注 类名="lay-表单-标签">账号</数据框标注>
		<区块 类名="lay-输入框-区块">
			<数据框 数据类型="文本输入" 属性名称="账号" 必填状态 lay-验证="必填项" 默认提示="admin" 类名="lay-输入框" />
		</区块>
	</区块>
	<区块 类名="lay-表单-项目">
		<数据框标注 类名="lay-表单-标签">密码</数据框标注>
		<区块 类名="lay-输入框-区块">
			<数据框 数据类型="密码输入" 属性名称="密码" 必填状态 lay-验证="必填项" 默认提示="admin123" 自动填充="记住" 类名="lay-输入框" />
		</区块>
	</区块>
	<区块 类名="lay-表单-项目">
		<按钮 类名="lay-按钮 lay-按钮-百搭 lay-流体按钮" lay-过滤器="登录" lay-提交>登录</按钮>
	</区块>
</表单>

ok,我们把这个登录表单隐藏起来，直接显示在页面上肯定是不对的，

接着，我们写个js代码，让弹窗把它弹出来。

新建对象 lay_弹出层({
    [lay_弹出层.配置.类型]:lay_弹出层.类型.页面,
	[lay_弹出层.配置.标题]: "登录",
	[lay_弹出层.配置.关闭按钮]: 假,
	[lay_弹出层.配置.内容]: $("#登录表单"),
	[lay_弹出层.配置.遮罩关闭]: 真,
	[lay_弹出层.配置.宽高]: ["320px", "240px"],
	[lay_弹出层.配置.动画]: lay_弹出层.动画.左翻滚
});

效果是不是出来了，当然一打开就弹出登录肯定是不行的，我们把它绑定到登录按钮上，

提示：如果要弹出事件，需要加载浏览器库

ok，现在就是点击登录按钮弹出登录弹窗了，接下来我们做登录成功，（由于我们这是前端项目，不和后端对接，我们就内置一个账号和密码，比对成功就算登录了）。

首先我们写表单登录事件，获取账号和密码，和内置的账号密码做比较，不一样，则弹出报错弹窗，一样的话就登录成功，上面的登录按钮就改成个人中心按钮。

下面的js用到了jq方法，我们引入jq库：

表单提交的js

// 表单提交
lay_表单.表单提交事件(
	"登录",
	定义函数 (表单提交对象) {
		// 模拟登录 账号:admin,密码:admin123
		如果 (表单提交对象.字段["账号"] === "admin" && 表单提交对象.字段["密码"] === "admin123") {
			lay_弹出层.关闭所有();
			// 成功弹窗
			lay_弹出层.消息框("登录成功!", {
				[lay_弹出层.配置.时间]: 1200,
				[lay_弹出层.配置.图标]: lay_弹出层.图标.成功,
			});
			// 保存登录
			局部变量 登录令牌 = 浏览器窗口.btoa(表单提交对象.字段["账号"] + 表单提交对象.字段["密码"] + 计算类.取随机数());
			// 假设上面这个令牌是服务器签发的令牌
			浏览器持久储存.保存数据("token", 登录令牌);
			// 切换登录状态
			登录状态();
		} 否则 {
			lay_弹出层.消息框("账号密码错误!", {
				[lay_弹出层.配置.时间]: 1000,
				[lay_弹出层.配置.图标]: lay_弹出层.图标.错误,
			});
		}
	},
	假
);
// 切换登录状态
定义函数 登录状态() {
	局部变量 登录令牌 = 浏览器持久储存.读取数据("token") || 空对象;
	//	这里一般都会跟后端确认令牌, 以及及时更新令牌;
	如果 (登录令牌) {
		// 登录状态
		$("#个人中心").显示标签();
		$("#登录按钮").隐藏元素();
	} 否则 {
		// 未登录状态
		$("#个人中心").隐藏元素();
		$("#登录按钮").显示标签();
	}
}
登录状态();

登录令牌那个不懂的，可以当作服务器发送给你的一段密令，这个密令放在请求头上，服务器就可以知道当前的用户。

我们这里是模拟的一个令牌，它的作用例如：

在跳转到其它页面，页面会查询浏览器保存的token，判断是否登录；

点击了一个链接，判断是否登录用户，如果不是登录用户，弹出登录窗口让用户登录；

有哪些是可以保存在浏览器上面，账户昵称、头像、VIP信息等一些不是很私密的东西，像姓名，手机号，密码，这些信息是万万不能保存在浏览器的，就算要保存，也要隐藏部分信息，如王**，189-****-2626等。

话会正题，我们登录看看，