Vue实战记录之登陆页面的实现

目录
  • 1 前期准备
    • 1.1 安装Node.js
    • 1.2 安装webpack
    • 1.3 安装vue-cli
  • 2 搭建Vue项目
    • 2.1 创建项目
    • 2.2 项目目录
    • 2.3 导入Element UI
  • 3 实现登陆页面
    • 3.1 修改App.vue
    • 3.2 创建Login.vue
    • 3.3 配置路由
  • 4 实现登陆功能
    • 4.1 导入axios
    • 4.2 导入qs和Mock
    • 4.3 编写提交js
    • 4.4 编写Mock测试数据
  • 总结

1 前期准备

1.1 安装Node.js

官网下载地址:https://nodejs.org/zh-cn/

安装完成后,在终端输入node -v来查询版本号

查看npm版本,npm -v

1.2 安装webpack

终端输入

npm install --save-dev webpack

查看版本webpack -v

1.3 安装vue-cli

因为创建vue项目使用vue-cli3以上才有的可视化工具来创建,所以这里的版本选择的是3以上的版本

npm install -g @vue/cli

升级vue-cli

npm update -g @vue/cli

卸载vue-cli

npm uninstall vue-cli -g

2 搭建Vue项目

安装好vue-cli后,使用vue提供的可视化工具来创建一个vue项目

2.1 创建项目

 在终端输入vue ui,则会进入可视化工具

选择创建项目的路径

创建项目文件夹

预设选择手动,我们手动添加项目的配置

选择好功能配置后,直接下一步,直接创建项目

等待项目创建好以后,在WebStore打开项目

2.2 项目目录

2.3 导入Element UI

直接在ElementUI官网就可以看到导入方式,这里选择全部模块的导入

在控制台输入

 npm install element-ui --save

在main.js引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/*导入ElementUI*/
import elementUI from 'element-ui';
/*导入ElementUI的CSS样式*/
import 'element-ui/lib/theme-chalk/index.css';
/*Vue使用ElementUI*/
Vue.use(elementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3 实现登陆页面

3.1 修改App.vue

这里把全局的设置先进行一个设置,把之前的模版的东西删掉

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
</style>

修改全局样式

<template>
  <div id="app">
    <!--路由页面-->
    <router-view/>
  </div>
</template>

<style>
/*全局的父类高度*/
html {
  height: 100%;
}

/*重置body属性*/
body {
  padding: 0;
  margin: 0;
  /*继承html*/
  height: 100%;
}

/*#app的高度也需要继承*/
#app {
  height: 100%;
}

/*全局链接标签去下划线*/
a {
  text-decoration: none;
}
</style>

3.2 创建Login.vue

在views目录下右键创建一个vue文件,命名为Login

在ElementUI官网查询布局组件,选择自己的布局,复制到vue文件中

<template>
  <!-- 一行的元素 -->
  <el-row type="flex" class="row-bg" justify="center">
    <!--第一列-->
    <el-col :span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <!--第二列-->
    <el-col :span="6">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <!--第三列-->
    <el-col :span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Login"
}
</script>

<style scoped>

</style>

复制表单,这里复制的是带验证的表单,复制完以后对表单进行修改

<template>
  <div :xl="6" :lg="7" class="bg-login">
    <!--logo-->
    <el-image :src="require('@/assets/logo.png')" class="logo"/>
    <!--标题-->
    <el-row type="flex" class="row-bg row-two" justify="center" align="middle">
      <el-col :span="6"></el-col>
      <el-col :span="6">
        <!--标题-->
        <h1 class="title">xAdmin管理系统</h1>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <!--form表单-->
    <el-row type="flex" class="row-bg card" justify="center" align="bottom">
      <el-col :span="7" class="login-card">
        <!--loginForm-->
        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="21%" class="loginForm">
          <el-form-item label="账户" prop="username" style="width: 380px">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" style="width: 380px">
            <el-input type="password" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code" style="width: 380px">
            <el-input v-model="loginForm.code" class="code-input" style="width: 70%;float: left"></el-input>
            <!--验证码图片-->
            <el-image :src="codeImg" class="codeImg"></el-image>
          </el-form-item>
          <el-form-item label="记住密码" prop="remember">
            <el-switch v-model="loginForm.remember"></el-switch>
          </el-form-item>
          <el-form-item class="btn-ground">
            <el-button type="primary" @click="submitForm('loginForm')">立即登陆</el-button>
            <el-button @click="resetForm('loginForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      // 表单信息
      loginForm: {
        // 账户数据
        username: '',
        // 密码数据
        password: '',
        // 验证码数据
        code: '',
        // 记住密码
        remember: false,
        // 验证码的key,因为前后端分离,这里验证码不能由后台存入session,所以交给vue状态管理
        codeToken: ''
      },
      // 表单验证
      rules: {
        // 设置账户效验规则
        username: [
          {required: true, message: '请输入账户', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符的账户', trigger: 'blur'}
        ],
        // 设置密码效验规则
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在 6 到 15 个字符的密码', trigger: 'blur'}
        ],
        // 设置验证码效验规则
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 5, max: 5, message: '长度为 5 个字符', trigger: 'blur'}
        ]
      },
      // 绑定验证码图片
      codeImg: null
    };
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 表单验证成功
          alert('submit')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
}
</script>

<style scoped>
.codeImg {
  /*让验证码图片飘在右边*/
  float: right;
  /*设置一些圆角边框*/
  border-radius: 3px;
  /*设置宽度*/
  width: 26%;
}

.bg-login {
  height: 100%;
  background-image: url("../assets/backgroud.jpg");
  background-size: 200%;

}

.btn-ground {
  text-align: center;
}

.logo {
  margin: 30px;
  height: 70px;
  width: 70px;
  position: fixed;
}

.title {
  text-shadow: -3px 3px 1px #5f565e;
  text-align: center;
  margin-top: 60%;
  color: #41b9a6;
  font-size: 40px;
}

.login-card {
  background-color: #ffffff;
  opacity: 0.9;
  box-shadow: 0 0 20px #ffffff;
  border-radius: 10px;
  padding: 40px 40px 30px 15px;
  width: auto;
}
</style>

3.3 配置路由

在router下的index.js中进行配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 配置登陆页面的路由
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

export default router

效果图:

4 实现登陆功能

4.1 导入axios

在vue里面,是只负责页面,也就是view,但是我们登陆的话肯定是需要在后台进行验证的,那么vue里面,通讯是交给了axios来处理的

在控制台终端输入

npm install axios --save

回车,则会自动导入模块

在main.js中进行注册

/*导入axios*/
import axios from "axios";
/*全局绑定axios*/
Vue.prototype.$axios = axios;

4.2 导入qs和Mock

qs是在vue中提供的一个插件,可以帮助我们把字符串进行解析,也可以帮助我们把参数序列化

在控制台终端输入

 npm install qs --save

回车,则会自动导入模块

在main.js中进行注册

/*导入qs*/
import qs from 'qs';
/*全局绑定*/
Vue.prototype.$qs = qs;

因为现在没有后台的设计,我们拿不到数据库的数据,所以使用Mock来模拟后端的数据

在控制台终端输入

 npm install mockjs --save-dev

回车,则会自动导入模块

创建一个mock的js文件,创建一个空白的js文件,命名随意

在main.js中进行导入mock

/*引入mock数据*/
require('./mock/LoginService.js')

4.3 编写提交js

获取验证码:

// 获取验证码方法
getVerifyCodeImg() {
  /*获取验证码*/
  this.$axios.get('/getVerifyCode').then(res => {
    // 获取验证码key
    this.loginForm.codeToken = res.data.data.codeToken;
    // 获取验证码图片
    this.codeImg = res.data.data.codeImg;
  })
}
// 因为在页面渲染好以后我们就需要去获取验证码,所以绑定在created下
created() {
  // 页面渲染完成后执行获取验证码方法
  this.getVerifyCodeImg();
}

表单提交:

submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      // 表单验证成功
      this.$axios.post('/login', this.loginForm).then(res => {
        // 拿到结果
        let result = JSON.parse(res.data.data);
        let message = res.data.msg;
        // 判断结果
        if (result) {
          /*登陆成功*/
          Element.Message.success(message);
          /*跳转页面*/
          router.push('/')
        } else {
          /*打印错误信息*/
          Element.Message.error(message);
        }
      })
    } else {
      console.log('error submit!!');
      return false;
    }
  });
}

完整的js

<script>
import Element from 'element-ui';
import router from "@/router";

export default {
  name: "Login",
  data() {
    return {
      // 表单信息
      loginForm: {
        // 账户数据
        username: '',
        // 密码数据
        password: '',
        // 验证码数据
        code: '',
        // 记住密码
        remember: false,
        // 验证码的key,因为前后端分离,这里验证码不能由后台存入session,所以交给vue状态管理
        codeToken: ''
      },
      // 表单验证
      rules: {
        // 设置账户效验规则
        username: [
          {required: true, message: '请输入账户', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符的账户', trigger: 'blur'}
        ],
        // 设置密码效验规则
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在 6 到 15 个字符的密码', trigger: 'blur'}
        ],
        // 设置验证码效验规则
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 5, max: 5, message: '长度为 5 个字符', trigger: 'blur'}
        ]
      },
      // 绑定验证码图片
      codeImg: null
    };
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 表单验证成功
          this.$axios.post('/login', this.loginForm).then(res => {
            // 拿到结果
            let result = JSON.parse(res.data.data);
            let message = res.data.msg;
            // 判断结果
            if (result) {
              /*登陆成功*/
              Element.Message.success(message);
              /*跳转页面*/
              router.push('/')
            } else {
              /*打印错误信息*/
              Element.Message.error(message);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 获取验证码方法
    getVerifyCodeImg() {
      /*获取验证码*/
      this.$axios.get('/getVerifyCode').then(res => {
        // 获取验证码key
        this.loginForm.codeToken = res.data.data.codeToken;
        // 获取验证码图片
        this.codeImg = res.data.data.codeImg;
      })
    }
  },
  created() {
    // 页面渲染完成后执行获取验证码方法
    this.getVerifyCodeImg();
  }
}
</script>

4.4 编写Mock测试数据

在之前新建的LoginService.js下写入mock数据

/*绑定Mock*/
const Mock = require('mockjs');
const Random = Mock.Random;

/*设置一个返回数据的通用结果*/
let result = {
  msg: '',
  data: ''
}

/*模拟数据库信息*/
let username = 'xiaolong';
let password = '123456';
let verityCode = 'abcde';

/**
 * 模拟验证码
 */
Mock.mock('/getVerifyCode', 'get', () => {
  result.data = {
    codeToken: Random.string(32),
    codeImg: Random.dataImage('75x40', verityCode)
  }
  return result;
})

/**
 * 拦截登陆请求
 */
Mock.mock('/login', 'post', (req) => {
  // 获取请求数据
  let from = JSON.parse(req.body);
  //判断验证码
  if (verityCode === from.code) {
    // 验证账户
    if (username === from.username) {
      // 验证密码
      if (password === from.password) {
        result.msg = '登陆成功'
        result.data = 'true'
      } else {
        result.msg = '密码错误'
        result.data = 'false'
      }
    } else {
      result.msg = '用户不存在'
      result.data = 'false'
    }
  } else {
    result.msg = '验证码错误'
    result.data = 'false'
  }
  return result;
})

总结

到此这篇关于Vue实战记录之登陆页面实现的文章就介绍到这了,更多相关Vue登陆页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue实现登陆登出的实现示例

    最近接手的B端项目选择了vue来做,此项目使用element ui Message等为组件 望周知 需求 登陆成功后跳转至首页 首页不能手动跳转至登陆页 登陆后跳转至目标页面 此次B端SPA项目把ak存在localstorage中 1.登陆的跳转利用全局钩子router.beforeEach //router.js router.beforeEach((to, from, next) => { // 若userkey不存在并且前往页面不是登陆页面,进入登陆 // 若userkey存在并且前往登陆

  • Vue实现登录以及登出详解

    目录 登录业务流程 登录功能实现 总结 首先先了解一下,我们的效果实现流程 首先登录概述及业务流程和相关技术点 录页面的布局 创建两个Vue.js文件 一个我们来做登录页和注册页 登录页面的布局 配置路由 登录表单的数据绑定 登录表单的验证规则 登录表单的重置 登录预验证 登录组件配置弹窗提示 登录成功后的行为 将登录之后的token,保存到客户端的sessionStorage中 通过编程式导航跳转到后台主页,路由地址是默认路径 '/' 在我们首页的登出,组件配置弹窗提示,把我们的token使用

  • vue+koa2实现session、token登陆状态验证的示例

    Session 登陆与 Token 登陆的区别 1.Session 登陆是在服务器端生成用户相关 session 数据,发给客户端 session_id 存放到 cookie 中,这样在客户端请求时带上 session_id 就可以验证服务器端是否存在 session 数据,以此完成用户认证.这种认证方式,可以更好的在服务端对会话进行控制,安全性比较高(session_id 随机),但是服务端需要存储 session 数据(如内存或数据库),这样无疑增加维护成本和减弱可扩展性(多台服务器). C

  • 基于vue-cli3和element实现登陆页面

    1.先用vue-cli3创建一个项目 2.安装element模块 全局安装 npm i element-ui -S 3在main.js引入模块 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 4.这里先扩展一个小知识点 在package.json文件中找scripts下serve,在后面加上--open 可以实现运行项目后自动打开浏览器 5

  • Vue实战记录之登陆页面的实现

    目录 1 前期准备 1.1 安装Node.js 1.2 安装webpack 1.3 安装vue-cli 2 搭建Vue项目 2.1 创建项目 2.2 项目目录 2.3 导入Element UI 3 实现登陆页面 3.1 修改App.vue 3.2 创建Login.vue 3.3 配置路由 4 实现登陆功能 4.1 导入axios 4.2 导入qs和Mock 4.3 编写提交js 4.4 编写Mock测试数据 总结 1 前期准备 1.1 安装Node.js 官网下载地址:https://nodej

  • vue cli实现项目登陆页面流程详解

    目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.4 在Login组件中将提交按键调整为100%宽度 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求 3.2.3 发送post请求 3.2.4 简化axios使

  • vue+three.js实现炫酷的3D登陆页面示例详解

    目录 前言: Three.js的基础知识 关于场景 关于光源 关于相机(重要) 关于渲染器 完善效果 创建一个左上角的地球 使地球自转 创建星星 使星星运动 创建云以及运动轨迹 使云运动 完成three.js有关效果 结语 前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什

  • Vue利用History记录上一页面的数据方法实例

    前言 本文主要介绍的是Vue利用History记录上一页面数据的相关内容,vue使用history后,能够使得url更加漂亮,也就是不再有'#'的问题,下面话不多说了,来一起看看详细的介绍吧 UI 需求 从列表页的第二页进入详情页,返回时列表页仍然显示在第二页: 从列表页的第二页进入详情页,返回时列表页的筛选条件仍然存在. <!--more--> 技术选择 使用vue-router组件,通过this.$router.push({path: path, query: query});方式,将页码

  • vue实现登陆页面开发实践

    目录 一.input的校验没有可说的,记住俩点,一个控制输入长度,一个控制格式. 二.验证码逻辑: 组件使用的是vant ui,具体用法可去官网看. 分几个部分考虑, 一.输入框input的校验:1.blur时没有值和格式不符合的逻辑校验2.限制输入长度逻辑,比如手机号只能11位,验证码只能6位.二.验证码按钮逻辑:1.不同状态下验证码颜色,文案,是否能点击,是否显示记数需要兼顾.2.验证码能够正常点击是在手机号格式正确情况下,所以这里要有个监听手机号,一旦格式符合,验证码生效3.关于计数器的逻

  • 详解基于vue的移动web app页面缓存解决方案

    现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题: 识别前进后退行为 后退时恢复之前的页面 笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路. 识别前进后退 先说第一个问题.和原生app不一样,浏览器中主要有这几个限制: 没有提供前进后退的

  • Bootstrap编写一个同时适用于PC、平板、手机的登陆页面

    Bootstrap如同前台框架,它已经布置好不少的CSS,前端开发的使用需要则直接调用即可.其网站的网址就是http://www.bootcss.com.使用Bootstrap能减少前端开发时候在CSS样子的布置时间 需要使用Bootstrap先在官网(点击打开链接)下载组件即可,用于生产环境的Bootstrap版本(点击打开链接),Bootstrap3对2并不兼容,建议直接根据其开发文档使用Bootstrap3. 将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点

  • Vue实战之vue登录验证的实现代码

    最近一直在撸一个给大学生新生用的产品,在撸的时候有时候会发现自己力不从心,是不是我的能力下降,是不是我该放弃我的最热爱的事业了?这对我的心灵造成了巨大的伤害,所以我决定向苍老师起誓一定练好我这双手--好好写代码(想多的同学赶紧去面壁5秒钟再过来往下看)--- 我做的这个产品是课堂在线编程教学工具,由于涉及到商业问题,这里就不能和大家分享了,但是我可以把里面我认为很牛(zhuang)X(bi)的技术和大家分享分享啊. 如果你觉得我写的很 low的话欢迎加入igeekbar裙里来喷我啊,我在那里等你

  • Vue实战教程之仿肯德基宅急送App

    Vue学习有一段时间了,就想着用Vue来写个项目练练手,弄了半个月,到今天为止也算勉强能看了. 由于不知道怎么拿手机App的接口,并且KFC电脑端官网真的...一言难尽,所以项目所有数据都是我截图然后写在EasyMock里的,有需要的同学可以自取 首页 商品页 外卖页 技术栈 vue + webpack + vuex + axios 文件目录 │ App.vue │ main.js │ ├─assets │ logo.png │ ├─components │ │ cartcontrol.vue

  • vue路由守卫,限制前端页面访问权限的例子

    今天给大家写一篇关于vue校验登录状态,如果是非法登录就跳转到登录页面的逻辑 首先需要写一个路由守卫,它的原理是每次路由发生变化时触发具体写法如下: router.beforeEach((to, from, next) => { next() }) beforeEach函数有三个参数: to:即将进入的路由对象 from:当前导航即将离开的路由 next,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的):否则为false,终止导航. 使用案例 限制登陆功能,具

随机推荐