node+vue前后端分離實(shí)現(xiàn)登錄時(shí)使用圖片驗(yàn)證碼功能

更新時(shí)間：2022年11月04日 14:43:47 作者：梔椩

這篇文章主要介紹了node+vue前后端分離實(shí)現(xiàn)登錄時(shí)使用圖片驗(yàn)證碼,記錄前端使用驗(yàn)證碼登錄的過程，后端用的是node.js，關(guān)鍵模塊是svg-captcha，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

后端代碼

先上代碼，然后解釋

const svgCaptcha = require('svg-captcha')

exports.checkCode = (req, res) => {
    const img = svgCaptcha.create({
        size: 4,
        ignoreChars: '0o1l',
        color: true,
        noise: 1,
        background: '#666',
        height: 40,
        width: 113
    })
    console.log(img.text);
    res.send(img)
}

這是最關(guān)鍵的代碼，我習(xí)慣將路由和路由處理函數(shù)分開寫，上面這塊代碼是路由處理函數(shù)
實(shí)際上就是利用svg-captcha生成了一個(gè)驗(yàn)證碼圖片，其中有幾個(gè)參數(shù)需要重點(diǎn)關(guān)注一下：

height和width，這個(gè)是設(shè)置的驗(yàn)證碼的高度和寬度，需要看一下前端頁面上input輸入框的高度和寬度，我用的是elementUI，高度是40，所以這里的高度也是40，寬度自己慢慢調(diào)
ignoreChars：驗(yàn)證碼中不出現(xiàn)這些字符
看一下路由代碼：

const express = require('express');
const userHandle = require('../route_handle/user')

const router = express.Router();

router.get('/checkCode', userHandle.checkCode)

module.exports = router

這沒啥好說的
后端就這些了，后端的端口用的是3020，需要設(shè)置一下跨域，不然前端訪問不到

前端代碼

先上代碼

<template>
  <div class="login">
    <el-form class="login-form" :model="loginForm">
      <h3 class="title">若依后臺管理系統(tǒng)</h3>
      <el-form-item>
        <el-input placeholder="Account" type="text" prefix-icon="el-icon-user-solid" v-model="loginForm.username">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="Password" type="password" prefix-icon="el-icon-lock" v-model="loginForm.password">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="CheckCode" prefix-icon="el-icon-picture-outline-round" v-model="loginForm.checkCode"
          style="width: 63%">
        </el-input>
        <div class="login-code">
          <!-- <img :src="codeUrl" class="login-code-imgs" @click="getCode"/> 
          -->
          <div @click="getCode" v-html="code" style="vertical-align:middle"></div>
        </div>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberme" style="margin: 0 0 15px 0;">Remenber Me</el-checkbox>
      <el-form-item>
        <el-button style="width: 100%" @click="submit('loginForm')" type="primary">Login</el-button>
      </el-form-item>
    </el-form>
    <div class="el-login-footer">
      <span>Copyright ? 2018-2022 huanggang All Rights Reserved.</span>
    </div>
  </div>
</template>

<script>
// import { getCodeImg } from '@/api/login'
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        checkCode: '',
        rememberme: false
      },
      codeUrl: '',
      code: '',
      codeText: ''
    }
  },
  methods: {
    submit() {
      if (this.loginForm.checkCode.toLowerCase() == this.codeText.toLowerCase()) {
        this.$message({
          type: "success",
          message: '登錄成功'
        })
      } else (this.$message({
        type: 'error',
        message: '驗(yàn)證碼錯誤！'
      }))
    },
    getCode() {
      this.$axios.get('/checkCode')
        .then(res => {
          console.log(res)
          this.code = res.data.data
          this.codeText = res.data.text
        })
    }
  },
  created() {
    this.getCode()
  }
}
</script>

<style scoped lang="scss">
.login {
  display: flex;
  height: 100%;
  background: url(../assets/images/login-background.jpg);
  background-size: cover;
  justify-content: center;
  align-items: center;
}

.title {
  text-align: center;
  color: #707070;
  margin: 0 auto 30px;
}

.login-form {
  box-sizing: border-box;
  width: 400px;
  border-radius: 6px;
  background-color: #fff;
  padding: 25px 25px 5px 25px;
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  font-family: Arial;
}

.login-code {
  width: 33%;
  float: right;

  div {
    cursor: pointer;
  }
}

.login-code-imgs {}
</style>

這里不再贅述相關(guān)的配置了，直接看關(guān)鍵代碼

獲取驗(yàn)證碼方法

getCode() 方法實(shí)現(xiàn)的功能是點(diǎn)擊驗(yàn)證碼圖片時(shí)，切換獲取驗(yàn)證碼
獲取驗(yàn)證碼的方法是訪問后端接口/checkCode，這個(gè)接口返回兩個(gè)值（后端補(bǔ)充說明），一個(gè)是text，一個(gè)是data，text就是驗(yàn)證碼的字符串值，data是驗(yàn)證碼的html地址，在postman中測試返回的結(jié)果如下：

頁面上使用v-html綁定驗(yàn)證碼顯示的地址
然后把text和data的值都賦給相應(yīng)的數(shù)據(jù)
當(dāng)然，為了能打開登錄頁面時(shí)，直接能顯示驗(yàn)證碼圖片，需要把getCode方法掛載在生命周期函數(shù)created上

登錄驗(yàn)證方法

登錄驗(yàn)證不再校驗(yàn)數(shù)據(jù)庫中的用戶名和密碼，只示意一下驗(yàn)證碼的功能
在點(diǎn)擊login按鈕時(shí)校驗(yàn)驗(yàn)證碼是否正確，功能寫在submit()方法中，前端input框中使用v-model雙向綁定了loginForm.checkCode的值，所以只要驗(yàn)證loginForm.checkCode與驗(yàn)證碼codeText是否相等即可，為了保證用戶體驗(yàn)，一般是忽略字母輸入大小寫的，所以都使用toLowerCase()處理一下。
這樣就完成了前后端分離模式的登錄驗(yàn)證碼使用功能

到此這篇關(guān)于node+vue前后端分離實(shí)現(xiàn)登錄時(shí)使用圖片驗(yàn)證碼的文章就介紹到這了,更多相關(guān)node vue圖片驗(yàn)證碼登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: