登录功能

设置好登录界面，当然要符合用户审美的登录页面。以所学项目点餐系统为例。首先登录的弹出框要设置在登录窗口的居中位置，可以引入插件bootstrap-4.1.3-dist，css样式（justify-content-center align-items-centerv）实现效果。登录的弹出框用class="card"的div封装，然后是一个form表单封装全部登录信息的输入框。代码如图显示：

Label标签封装全部登录的字段，如：placeholder=“密码”，显示刚登录时未输入信息的默认值。密码输入要用intput标签type=“password”，以确保用户登录安全性。

验证码设计时，一个文本类型的input输入框，还有验证码提示框，可理解为图片，在控制器端设置图片的样式，数字+字母随意组合，再添加一些干扰线或点，就能完成验证码设置。每次点击验证码提示框，就使照片的改变事件发生一次。为了提高用户使用时舒适感，改变事件发生一次便及时清空一次验证码输入框。如：

生成验证码方法：

用户登录时需选择自己的身份，select标签封装不同的身份，可以通过下拉框选择。如：


是否记住登录部分，相当于用户是否选择将必要的登录信息自动回填，便于下次登录，当然这些信息要从cookie中获取。如何删除cookie？（“删除cookie即从用户的硬盘中物理移除cookie是修改cookie的一种形式。Cookie在用户的计算机中，无法将它直接移除，但可以让浏览器删除cookie，创建一个与要删除的cookie同名的新cookie，将其到期日期设置为早于当前日期的某个日期，当浏览器检查到cookie到期时，浏览器便会丢弃现在已经过期的cookie”）。

写js时，记得引入layui插件，使用layer模块。加载&初始化layui模块,弹出层模块layui.use([‘layer’],function () {layer =layui.layer;});
点击验证码图片，切换验证码，加上参数ts（以时间速度更新验证码，就算客户点击再快也能即使切换更新验证码），解决浏览器缓存问题：

验证登录：添加登录按钮点击事件，js插件serializeArray()方法序列化表单，post提交数据，信息判断正确便可跳转到主页面，否则登录失败，登录成功与否都必须清空验证码和密码框，以及刷新验证码，给它们赋值为空即可【KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲PassWord").val(…("#VerificationCode").val("");】。