手把手教你使用Vue搭建注册登录界面及前端源码

文章目录

• 一、前言
• 二、概况
• 三、搭建注册页面
• 四、改造登录页面
• 四、整体效果动画演示
• 五、前端源码下载
• 六、后续

一、前言

• 本文将在vue-admin-template模板基础上完成搭建注册与登录页面。文末处有完整的前端源码下载。

• 环境准备

1. 浏览器：Chrome
2. IDE: VS Code
3. Node.js 10+，npm

二、概况

• 我们先了解一下整个项目的目录结构

  ├── build # 构建相关
  ├── mock # 项目mock 模拟数据
  ├── plop-templates # 基本模板
  ├── public # 静态资源
  │ │── favicon.ico # favicon图标
  │ └── index.html # html模板
  ├── src # 源代码
  │ ├── api # 所有请求
  │ ├── assets # 主题 字体等静态资源
  │ ├── components # 全局公用组件
  │ ├── directive # 全局指令
  │ ├── filters # 全局 filter
  │ ├── icons # 项目所有 svg icons
  │ ├── lang # 国际化 language
  │ ├── layout # 全局 layout
  │ ├── router # 路由
  │ ├── store # 全局 store管理
  │ ├── styles # 全局样式
  │ ├── utils # 全局公用方法
  │ ├── vendor # 公用vendor
  │ ├── views # views 所有页面
  │ ├── App.vue # 入口页面
  │ ├── main.js # 入口文件 加载组件 初始化等
  │ └── permission.js # 权限管理
  ├── tests # 测试
  ├── .env.xxx # 环境变量配置
  ├── .eslintrc.js # eslint 配置项
  ├── .babelrc # babel-loader 配置
  ├── .travis.yml # 自动化CI配置
  ├── vue.config.js # vue-cli 配置
  ├── postcss.config.js # postcss 配置
  └── package.json # package.json

• 项目的运行方法

  安装依赖

  npm install

  本地开发 启动项目

  npm run dev

三、搭建注册页面

• 下载_vue-admin-template_模板后，我们在src/views目录下新建一个register目录，并添加index.vue，源代码如下：
  

  已有账号？ 登录

四、改造登录页面

• 接下来我们稍微对原来的登录页面做下调整：

1. 增加新注册的链接

2. 修正验证规则：以邮箱做为用户名登录，登录密码必须为8位，且为数字与字母混合，源代码如下：
   

     <div class="title-container">
       <h3 class="title">欢迎使用</h3>
     </div>
   
     <el-form-item prop="username">
       <span class="svg-container">
         <svg-icon icon-class="user" />
       </span>
       <el-input
         ref="username"
         v-model="loginForm.username"
         placeholder="邮箱"
         name="username"
         type="text"
         tabindex="1"
         auto-complete="on"
       />
     </el-form-item>
   
     <el-form-item prop="password">
       <span class="svg-container">
         <svg-icon icon-class="password" />
       </span>
       <el-input
         :key="passwordType"
         ref="password"
         v-model="loginForm.password"
         :type="passwordType"
         placeholder="密码"
         name="password"
         tabindex="2"
         auto-complete="on"
         @keyup.enter.native="handleLogin"
       />
       <span class="show-pwd" @click="showPwd">
         <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
       </span>
     </el-form-item>
   
     <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
   
     <p class="tips">
       <a href="/register" type="primary">还没有帐号？立即注册</a>
     </p>
   
   </el-form>
   

• 页面呈现效果如下：
  

四、整体效果动画演示

五、前端源码下载

• github
• gitee

六、后续

• 将会增加后台源码(JAVA),实现邮箱发送验证码，注册等功能，敬请期待。