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

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

博客作者:【qiang】

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

登录界面大家都写过吧,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-提交>登录</按钮>
	</区块>
</表单>
Markup

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

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

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

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

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

 

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

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

下面的js用到了jq方法,我们引入jq库:

表单提交的js

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

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

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

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

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

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

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

ok,没有问题了,刷新也是登录状态的了,切换内容页,列表页也是登录状态的,那么这个登录就算完成了。

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