Le code de vérification renvoyé par le backend de requête s'affiche

Astuce : Une fois l'article rédigé, la table des matières peut être générée automatiquement. Pour la générer, reportez-vous au document d'aide à droite.

---

avant-propos

Dans le projet actuel, la connexion au code de vérification est presque une compétence opérationnelle essentielle pour chaque développeur, mais il existe de nombreuses façons pour le front-end d'obtenir les données du code de vérification du back-end, ce qui est parfois déroutant pour les développeurs juniors, donc dans This résume plusieurs méthodes de vérification courantes en développement, afin qu'elles puissent être utilisées directement après les avoir rencontrées dans un développement futur

---

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

1. Situation 1 : Les données sont un flux de fichiers image

Le frontal doit afficher l'image du code de vérification, en espérant que le back-end renverra directement l'adresse de l'image, mais le back-end donne le flux de fichier au lieu d'une adresse d'image, donc dans ce cas, le flux de fichier doit être affiché au format base64. Ce n'est pas le cas

. Causé par l'ajout de 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. Situation 2 : Le retour direct est une image

La réponse renvoyée est directement le code de vérification, même sans ajax/axios lors de sa réception...

<!-- 验证码 -->
        <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");
      //   });
    },

Cas 3 : Vérification de connexion de l'applet uni

Semblable à la situation 1, les données transmises depuis le backend sont un flux de fichiers image, mais le code sur l'applet doit être traité comme suit

<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);
        }
      );
    }

enfin

À l'heure actuelle, il existe plus de codes de vérification de connexion rencontrés dans les trois situations ci-dessus.Il existe également une vérification par SMS du téléphone mobile, qui est relativement simple, tant qu'un bouton envoie une demande.