业务场景
当页面比较单一,只是个单页面的时候。
优点
简单粗暴
1.使用了session来记录登录是否成功,成功后不需要再登录;
2.使用最简单的方式,可以写死用户,不需要有后台服务,当然也可以修改代码从后台校验用户登录;
3.使用回调函数来强制用户不能点击空白处也不能关闭该登录窗口。
缺点
这里只是简单实现,不适合复杂业务场景
代码
新建一个vue组件,代码如下,把这个组件引入到你的页面,就会自动弹出登录窗口
<template>
<el-dialog width="30%" title="登录" :visible.sync="modelShow"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="closeCallback()"
>
<el-form ref="form" :model="form" size="small" label-width="100px">
<el-row>
<el-form-item label="用户名: