一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

项目开发之前端—登录模块

梳理

• 登录模块需求分析
• 登入页面、注册页面、忘记密码页面
• 图形验证码、NodeMailer邮件服务配置

登录注册页需求分析

需求分析

• 功能需求，需求拆解
• 流程图及原型图的绘制设计
• 形成文档

1. 用户输入验证
2. 拦截非正常的登录请求
3. 登录验证（验证机制）

第一步实现效果

<template>
<div id="app">
  <div class="layui-container">
      <form class="layui-form layui-form-pane" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input
        type="text" name="title"
        required
        lay-verify="required"
        placeholder="请输入用户名"
        autocomplete="off"
        class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label ">密码</label>
    <div class="layui-input-inline">
      <input
        type="password"
        name="password"
        required
        lay-verify="required"
        placeholder="请输入密码"
        autocomplete="off"
        class="layui-input">
    </div>
  </div>

    <div class="layui-form-item">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-block">
      <input
        type="text" name="title"
        required
        lay-verify="required"
        placeholder="请输入验证码"
        autocomplete="off"
        class="layui-input">
    </div>
  </div>
  <button type="button" class="layui-btn">立即登录</button>
  <a class="imooc-link" href="http://www.layui.com">忘记密码？</a>
  </form>

  </div>

</div>

</template>

<style lang="scss" scoped>
input{
width: 190px;
}

.imooc-link{
  margin-left: 10PX;
  &:hover{
    color: #009688;
  }
}
</style>

1. 引入Layui css https://www.layuicdn.com/layui-v2.6.8/css/layui.css

  <link 
      rel="stylesheet" 
      href="https://www.layuicdn.com/layui/css/layui.css">

2. 使用表单 - 页面元素

在一个容器中设定 class="layui-form"  来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

第二步实现效果