Se muestra el código de verificación devuelto por el backend de solicitud

Sugerencia: después de escribir el artículo, la tabla de contenido se puede generar automáticamente. Cómo generarla puede consultar el documento de ayuda a la derecha

---

prefacio

En el proyecto real, el inicio de sesión del código de verificación es casi una habilidad de operación esencial para cada desarrollador, pero hay muchas maneras para que el front-end obtenga los datos del código de verificación del back-end, lo que a veces es confuso para los desarrolladores junior, por lo que en This resume varios métodos de verificación comunes en desarrollo, para que puedan usarse directamente después de encontrarlos en el desarrollo futuro

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. Situación 1: Los datos son un flujo de archivos de imagen

El front-end debe mostrar la imagen del código de verificación, con la esperanza de que el back-end devuelva directamente la dirección de la imagen, pero el back-end proporciona el flujo de archivos en lugar de una dirección de imagen, por lo que en este caso, el flujo de archivos debe mostrarse en formato base 64. Este no es el caso

. Causado al agregar responseType: 'arraybuffer'

<el-form-item label="">
          <el-input
            type="code"
            v-model.trim="form.code"
            placeholder="请输入验证码"
            style="width: 105px"
            @keyup.enter.native="login"
          ></el-input>
          <img
            :src="codeImg"
            class="codeImg"
            @click="oNcodeImg"
          />
</el-form-item>

oNcodeImg() {
    
    
      // var num = Math.ceil(Math.random() * 10); //生成一个随机数（防止缓存）
      this.$axios({
    
    
        method: 'post',
        url: '/sys/user/code?random=' + this.random,
        responseType: 'arraybuffer' //该字段需要添加，不然返回的res.data会是乱码
      }).then((res) => {
    
    
        console.log('返回的验证码数据:', res);
        if (res.headers['content-type'].indexOf('json') !== -1) {
    
    
          this.tips('验证码获取次数过多，请稍后重试', 'warning');
        } else {
    
    
          this.codeImg =
            'data:image/png;base64,' +
            btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
        }
      });
    },

2. Situación 2: El retorno directo es una imagen

La respuesta devuelta es directamente el código de verificación, incluso sin ajax/axios al recibirlo...

<!-- 验证码 -->
        <el-form-item prop="code">
          <div class="vertify-code-box">
            <el-input
              v-model.trim="loginForm.code"
              type="code"
              placeholder="请输入验证码"
              class="vertify-code"
              ref="code"
              @keyup.enter.native="login"
            ></el-input>
            <div class="imgDiv">
              <img
                :src="imgSrcUrl"
                @click="oNcodeImg"
                class="img"
              />
            </div>
          </div>
      </el-form-item>

	oNcodeImg() {
    
    
	//直接访问，不需要ajax/axios我到现在都不是很清楚这什么道理
      this.imgSrcUrl =
        "/api/web/adminuser/captcha.jpg?random=" + Math.random() * 10;
      console.log("this.imgSrcUrl", this.imgSrcUrl);
      // this.$axios({
    
    
      //   method: "GET",
      //   url: this.codeImgSrc,
      // })
      //   .then(() => {
    
    
      //     this.imgSrcUrl = "http://localhost:8080/api" + this.codeImgSrc;
      //   })
      //   .catch((error) => {
    
    
      //     console.log(error, "login error");
      //   });
    },

Caso 3: Verificación de inicio de sesión del subprograma uni

Similar a la situación 1, los datos transmitidos desde el backend son un flujo de archivos de imágenes, pero el código en el subprograma debe procesarse de la siguiente manera

<view class="input flex_between">
        <u-input
          v-model="login.code"
          maxlength="6"
          type="code"
          :custom-style="inputStyle"
          placeholder-style="font-size:32rpx;line-height:40rpx;color:#CED4E0"
          placeholder="请输入验证码"
          height="68"
        />
        <view class="code">
          <img
            :src="codeImg"
            @click="oNcodeImg"
          />
          <!--:src="codeImg" <text @tap="getCode">{
    
    {
    
     tips }}</text> -->
       </view>
 </view>

//获取与web一样的验证码
    oNcodeImg() {
    
    
      this.util.http_demo_1(
        'POST',
        this.server.getCode + '?random=' + this.random,
        {
    
     responseType: 'arraybuffer' },
        (res) => {
    
    
          console.log('res:', res);
          console.log(res.headers['Content-Type'].indexOf('image') == -1);
          if (res.headers['Content-Type'].indexOf('image') == -1) {
    
    
            this.tips('验证码获取次数过多，请稍后重试', 'warning');
          } else {
    
    
            const arrayBuffer = res.data;
            //将arrayBuffer数据转换成base64格式即可显示
            let url = `data:image/jpeg;base64,${
      
      uni.arrayBufferToBase64(arrayBuffer)}`;
            this.codeImg = url;
          }
        },
        (res) => {
    
    
          console.log('错误:', res);
        }
      );
    }

por fin

En la actualidad, se encuentran más inicios de sesión con código de verificación en las tres situaciones anteriores. También hay una verificación de SMS de teléfono móvil, que es relativamente simple, siempre que un botón envíe una solicitud.