登录和注册(一)注册——axios之get请求图片验证码-base64、密码由特殊字符组成、用户名密码相同重写、校验之邮箱注册和手机注册 & 定时setInterval和clearInterval

登录和注册(一)注册——axios之get请求图片验证码-base64、密码由特殊字符组成、用户名密码相同重写、校验之邮箱注册和手机注册 & 定时setInterval和clearInterval

效果

1

在这里插入图片描述

2

在这里插入图片描述

代码

src\views\myCenter\accountManagement\loginRegister\register.vue

<template>
  <div>
    <div class="register-div">
      <div class="register-image">
        <img src="img/logo.png" />
      </div>
    </div>
    <div id="register-iphone">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="手机注册" name="first" id="firstOne">
          <input type='text' class="textAll" id="pho" :maxlength="11" placeholder="请输入手机号码" @blur="sub" />
          <p style="color: red;font-size: 12px;position: absolute;">{{ inf }}</p>
          <input type='text' class="textAll" name="Name" @blur="users()" placeholder="请输入昵称,至少1个字符,至多20个" />
          <p style="color: red;font-size: 12px;position: absolute;">{{ info }}</p>
          <input type="password" class="textPass" name="certificate" @blur="pwds()" placeholder="请输入密码,大小字母、特殊符号和数字结合" />
          <p style="color: red;font-size: 12px;position: absolute;">{{ infon }}</p>
          <input type="password" class="textPass" @blur="pwd()" placeholder="请再次输入密码" />
          <p style="color: red;font-size: 12px;position: absolute;">{{ infons }}</p>
          <input type='text' class="textAll" placeholder="验证密码" @blur="yanmi()" />
          <span class="register-span" @click="ress"><img :src="imgCode" alt=""></span>
          <p style="color: red;font-size: 12px;position: absolute;">{{ infoss }}</p>
          <p style="color: red;font-size: 12px;position: absolute;">{{ ressinfons }}</p>
          <input type='text' class="textAll" @blur="ressun()" placeholder="请输入短信验证码" style="width: 200px;" />
          <span class="register-spans"><el-button style="width:120px" class="iphoneBoundBtn"
              @click="phones()">获取验证码</el-button></span>
          <p style="color: red;font-size: 12px;position: absolute;">{{ infosse }}</p>
          <button class="registerbtn" @click="regis()">注册</button>
        </el-tab-pane>
        <el-tab-pane label="邮箱注册" name="second" id="secondOne">
          <input type='text' class="textAll" id="ema" placeholder="请输入邮箱" @blur="subss()" />
          <p style="color: red;font-size: 12px;position: absolute;">{{ inemail }}</p>
          <input type='text' class="textAll" placeholder="请输入昵称,至少1个字符,至多20个" @blur="users()" />
          <p style="color: red;font-size: 12px;position: absolute;">{{ userinfo }}</p>
          <input type="password" class="textPass" placeholder="请输入密码,大小字母、特殊符号和数字结合" @blur="pwds()" />
          <p style="color: red;font-size: 12px;position: absolute;">{{ pwd1infon }}</p>
          <input type="password" class="textPass" placeholder="请再次输入密码" @blur="pwd()" />
          <p style="color: red;font-size: 12px;position: absolute;">{{ pwd2infons }}</p>
          <input type='text' class="textAll" placeholder="验证密码" @blur="yanmi()" />
          <span class="register-span" @click="ress()"><img :src="imgCode" alt=""></span>
          <p style="color: red;font-size: 12px;position: absolute;">{{ pinfons }}</p>
          <p style="color: red;font-size: 12px;position: absolute;">{{ infoss }}</p>
          <p style="color: red;font-size: 14px">{{ infos }}</p>
          <button class="button" @click="Registers()">注册</button>
        </el-tab-pane>
      </el-tabs>
      <!-- <div class="register-bottoms">
        <p>请选择您的角色</p>
        <div class="register-personage" style="text-align: center;margin-top: 55px">
          <img src="../../../../../static/image/personage.png" alt=""><br>
          <input type="radio" v-model="idenType" value="0">个人用户
        </div>
        <div class="register-personage" style="text-align: center;margin-top: 35px">
          <img src="../../../../../static/image/enterprise.png" alt=""><br>
          <input type="radio" v-model="idenType" value="1">企业用户
        </div> -->
      <!--<p style="font-size: 14px;color: red;width: 80%;text-align: center">提示:平台暂不支持企业用户注册</p>-->
      <!-- <p style="color: red;font-size: 12px;position: absolute;">{{ ins }}</p>
        <p class="register-p" @click="login">已经注册过?直接登录</p>
      </div> -->
    </div>
    <div class="register-background-image">

    </div>
  </div>
</template>

<script>
import { post } from "@/utils/path";
import { inject } from "vue";
import axios from '@/utils/request'
export default {
  data() {
    return {
      activeName: 'first',
      imgCode: "",
      phone: '',
      Name: '',
      certificate: '',
      reCertificate: '',
      veriCode: '',
      veriPhCode: '',
      idenType: 0,
      infos: '',
      infoss: '',
      enPwd: '',
      inf: '',
      info: '',
      infon: '',
      infons: '',
      ins: '',
      inemail: '',
      userinfo: '',
      pwd1infon: '',
      pwd2infons: '',
      ressinfons: '',
      pinfons: '',
      infosse: '',
      dao: '',
      constant: inject('constant'),
      encrypt: inject('encrypt'),
      imageKey: ''
    };
  },
  methods: {
    // 切换注册类型
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.keyaa();
      } else {
        var isIE9 = navigator.userAgent.match(/MSIE 9.0/) != null;
        if (isIE9) {
          var secondOne = document.getElementById('secondOne')
          var inputs = secondOne.getElementsByClassName("textAll");
          var inputPass = secondOne.getElementsByClassName("textPass");
          for (var i = 0; i < inputs.length; i++) {
            inputs[i].index = i;
            var text = inputs[i].getAttribute('placeholder');
            if (inputs[i].type === 'text' && text) {
              var text = inputs[i].getAttribute('placeholder');
              var defaultValue = inputs[i].defaultValue;
              if (defaultValue == '') {
                inputs[i].value = text
              }
              inputs[i].onfocus = function () {
                var aa = this.index;
                var text = inputs[aa].getAttribute('placeholder');
                if (inputs[aa].value == text) {
                  inputs[aa].value = ''
                }
              };
              inputs[i].onblur = function () {
                var aa = this.index
                var text = inputs[aa].getAttribute('placeholder');
                if (inputs[aa].value == '') {
                  this.value = text
                }
              }
            };
          }
          for (var j = 0; j < inputPass.length; j++) {
            inputPass[j].index = j;
            if (inputPass[j].type === 'password') {
              if (inputPass[j].type == 'password') {
                inputPass[j].type = 'text'
              }
              var text = inputPass[j].getAttribute('placeholder'),
                defaultValue = inputPass[j].defaultValue;
              if (defaultValue == '') {
                inputPass[j].value = text
              }
              inputPass[j].onfocus = function () {
                var aa = this.index
                var text = inputPass[aa].getAttribute('placeholder');
                if (inputPass[aa].value == text) {
                  inputPass[aa].value = ''
                }
                if (inputPass[aa].type == 'text') {
                  inputPass[aa].type = 'password'
                }
              };
              inputPass[j].onblur = function () {
                var aa = this.index
                if (this.value == '') {
                  if (inputPass[aa].type == 'password') {
                    inputPass[aa].type = 'text'
                  }
                }
                var text = inputPass[aa].getAttribute('placeholder');
                if (inputPass[aa].value == '') {
                  inputPass[aa].value = text
                }
              }
            };
          }
        }
      }
      this.ress()
      this.inemail = ''
      this.Name = '';
      this.certificate = "";
      this.reCertificate = "";
      this.veriCode = '';
      this.phone = '';
      this.pwd1infon = '';
      this.infon = '';
      this.pwd2infons = "";
      this.inf = '';
      this.info = '';
      this.userinfo = '';
      this.infons = '';
      this.ressinfons = '';
      this.pinfons = "";
      this.veriPhCode = '';
      this.infoss = ''
      this.email = '';
    },
    // 输入验证码
    yanmi() {
      this.pinfons = '';
      this.infos = '';
      this.infosse = '';
      this.ressinfons = '';
      this.infoss = '';
      if (this.activeName == 'first') {
        var firstOne = document.getElementById('firstOne')
        this.veriCode = firstOne.getElementsByClassName("textAll")[2].value;
      } else {
        var secondOne = document.getElementById('secondOne');
        this.veriCode = secondOne.getElementsByClassName('textAll')[2].value;
      }
      if (this.veriCode == '') {
        this.infoss = '请输入图形验证码'
        return false;
      } else {
        this.infoss = ''
        return true;
      }
    },
    // 注册
    regis() {
      this.infosse = '';
      this.ressinfons = '';
      this.infoss = '';
      if (this.phone == '') {
        this.inf = '请填写手机号';
        return false;
      } else if (!this.users() || !this.pwds() || !this.pwd() || !this.ressin() || !this.ressun()) {
        return;
      } else {
        this.ins = ''
      }
      var that = this;
      var sun = {
        "type": "0",
        "userName": this.Name,
        "certificate": this.enPwd,
        "reCertificate": null,
        "channel_pd": this.encrypt.CBC_sm4encrypt(this.certificate, 'E1A71C22C0C71BBB5ECA7988F46064DD,9F6CB4FC9E43EC8769D170DE95E8E6C7'),
        "veriCode": this.veriCode,
        "idenType": this.idenType,
        "phone": this.encrypt.CBC_sm4encrypt(this.phone, 'E1A71C22C0C71BBB5ECA7988F46064DD,9F6CB4FC9E43EC8769D170DE95E8E6C7'),
        "veriPhCode": this.veriPhCode,
        'imageKey': this.imageKey
      }
      post(this.constant.publicCoop + '/users/register', sun).then(function (res) {
        console.log(res)
        if (res.data.result != 0) {
          that.ress()
          that.infosse = res.data.message
        } else if (res.data.result == '0') {
          that.$router.push({ name: 'phoneSuccess' })
        }
      })
    },
    // 更新图片验证码
    ress() {
      axios.get(process.env.VUE_APP_API_HOST + this.constant.publicCoop + '/login/captcha').then((res) => {
        if(res.data.code == '200'){
          this.imgCode = 'data:image/jpeg;base64,' + res.data.data.imageBase64;
          this.imageKey = res.data.data.imageKey
        }
      })
    },
    // 输入密码
    pwds() {
      this.pinfons = '';
      this.infos = '';
      this.infosse = '';
      this.ressinfons = '';
      this.infoss = '';
      var mysh = /(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=([!-~]+)[^a-zA-Z0-9])/g;
      if (this.activeName == 'first') {
        var firstOne = document.getElementById('firstOne')
        this.certificate = firstOne.getElementsByClassName("textPass")[0].value;
      } else {
        var secondOne = document.getElementById('secondOne');
        this.certificate = secondOne.getElementsByClassName('textPass')[0].value;
      }
      if (this.certificate == '') {
        this.pwd1infon = '请输入密码';
        this.infon = '请输入密码';
        return false;
      } else if (!mysh.test(this.certificate)) {
        this.pwd1infon = '由大小写字母、数字、特殊字符组成,长度为8-20';
        this.infon = '由大小写字母、数字、特殊字符组成,长度为8-20';
        return false;
      } else if (this.certificate.length < 8 || this.certificate.length > 20) {
        this.pwd1infon = '由大小写字母、数字、特殊字符组成,长度为8-20';
        this.infon = '由大小写字母、数字、特殊字符组成,长度为8-20';
        return false;
      } else if (this.phone == this.certificate) {
        this.pwd1infon = '用户名密码相同,请重新填写';
        this.infon = '用户名密码相同,请重新填写';
        return false;
      } else {
        var pwd = this.certificate
        var key = generateSM4Key()
        var cipherText = SM4Encrypt(pwd, key);
        var cipherKey = SG_sm2Encrypt(key, "045305e570ba7c50795aadf945354eb1396f84cb22ec788d81e7bd1cd6b51c9e53680c942b174050f9b3614a658a790939a5921c0920bacf6a3070e007bf217d70");
        this.enPwd = this.encrypt.CBC_sm4encrypt(cipherKey + ',' + cipherText, this.encrypt.sg2());
        console.log(this.enPwd)
        this.pwd1infon = '';
        this.infon = '';
        return true;
      }
    },
    // 输入昵称
    users() {
      this.pinfons = '';
      this.infos = '';
      this.infosse = '';
      this.ressinfons = '';
      this.infoss = '';
      if (this.activeName == 'first') {
        var firstOne = document.getElementById('firstOne')
        this.Name = firstOne.getElementsByClassName('textAll')[1].value;
      } else {
        var secondOne = document.getElementById('secondOne');
        this.Name = secondOne.getElementsByClassName('textAll')[1].value;
      }
      var mys = /^[\w\u4e00-\u9fa5]{1,20}$/;
      if (this.Name == '') {
        this.userinfo = '请输入昵称';
        this.info = '请输入昵称';
        return false;
      } else if (!mys.test(this.Name)) {
        this.userinfo = '昵称不包含特殊字符,长度为1-20字符';
        this.info = '昵称不包含特殊字符,长度为1-20字符';
        return false;
      } else {
        this.userinfo = "";
        this.info = "";
        return true;
      }
    },
    ressin() {
      if (this.veriCode == '') {
        this.ressinfons = '请输入图形验证码';
        this.pinfons = '请输入图形验证码'
        return false;
      } else {
        this.ressinfons = ""
        this.pinfons = ''
        return true;
      }
    },
    // 再次输入密码
    pwd() {
      this.pinfons = '';
      this.infos = '';
      this.infosse = '';
      this.ressinfons = '';
      this.infoss = '';
      if (this.activeName == 'first') {
        var firstOne = document.getElementById('firstOne')
        this.reCertificate = firstOne.getElementsByClassName("textPass")[1].value;
      } else {
        var secondOne = document.getElementById('secondOne');
        this.reCertificate = secondOne.getElementsByClassName('textPass')[1].value;
      }
      if (this.reCertificate == '') {
        this.pwd2infons = "请再次输入密码";
        this.infons = "请再次输入密码";
        return false;
      }
      if (this.reCertificate == this.certificate) {
        this.pwd2infons = "";
        this.infons = "";
        return true;
      } else {
        this.pwd2infons = "两次输入的密码不一致";
        this.infons = "两次输入的密码不一致";
        return false;
      }
    },
    // 注册
    Registers() {
      if (this.email == '') {
        this.inemail = '请填写邮箱'
        return false;
      } else if (!this.users() || !this.pwds() || !this.pwd() || !this.ressin()) {
        return;
      } else {
        this.ins = ''
      }
      var that = this
      var sun = {
        "type": "1",
        "userName": this.Name,
        "certificate": this.enPwd,
        "channel_pd": this.encrypt.CBC_sm4encrypt(this.certificate, 'E1A71C22C0C71BBB5ECA7988F46064DD,9F6CB4FC9E43EC8769D170DE95E8E6C7'),
        "reCertificate": null,
        "veriCode": this.veriCode,
        "idenType": this.idenType,
        "email": this.encrypt.CBC_sm4encrypt(this.email, 'E1A71C22C0C71BBB5ECA7988F46064DD,9F6CB4FC9E43EC8769D170DE95E8E6C7'),
      }
      post(this.constant.publicCoop + '/users/register', sun).then(function (res) {
        that.ress()
        if (res.data.result == '0') {
          that.$router.push({ name: 'EmailSuccess', params: { email: that.email } })
        } else if (res.data.result != 0) {
          that.ress();
          that.infoss = res.data.message
        }
      })
    },
    // 输入手机号
    sub() {
      this.infosse = '';
      this.ressinfons = '';
      this.infoss = '';
      var firstOne = document.getElementById('firstOne')
      this.phone = firstOne.getElementsByClassName("textAll")[0].value;
      var that = this
      var pho = document.getElementById('pho').value;
      var mys = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
      if (!mys.test(pho)) {
        that.inf = '手机号无效'
      } else {
        that.inf = ''
        var item = {
          "type": "0",
          "phone": this.encrypt.CBC_sm4encrypt(this.phone, 'E1A71C22C0C71BBB5ECA7988F46064DD,9F6CB4FC9E43EC8769D170DE95E8E6C7'),
        }
        post(this.constant.publicCoop + '/users/onlyVeri', item).then(function (res) {
          if (res.data.result != 0) {
            that.inf = res.data.message
          } else {
            that.inf = ''
          }
        })
      }
    },
    // 输入短信验证码
    ressun() {
      var firstOne = document.getElementById('firstOne')
      this.veriPhCode = firstOne.getElementsByClassName("textAll")[3].value;
      if (this.veriPhCode == '') {
        this.infosse = '请填写手机验证码';
        return false;
      } else {
        this.infosse = '';
        return true;
      }
    },
    // 输入邮箱
    subss() {
      this.pinfons = '';
      this.infos = '';
      this.infoss = '';
      var secondOne = document.getElementById('secondOne');
      this.email = secondOne.getElementsByClassName('textAll')[0].value;
      var that = this
      var ema = document.getElementById('ema').value;
      if (!this.constant.regular.reqEmail.test(ema)) {
        that.inemail = '邮箱无效'
      } else {
        that.inemail = ''
        var item = {
          "type": "1",
          "email": this.encrypt.CBC_sm4encrypt(this.email, 'E1A71C22C0C71BBB5ECA7988F46064DD,9F6CB4FC9E43EC8769D170DE95E8E6C7')
        }
        post(this.constant.publicCoop + '/users/onlyVeri', item).then(function (res) {
          if (res.data.result != 0) {
            that.inemail = res.data.message
          } else {
            that.inemail = ""
          }
        })
      }
    },
    settime(val, countdown) {
      var stop = setInterval(function () {
        if (countdown == 0) {
          val.removeAttribute("disabled");
          val.innerHTML = "获取验证码";
          clearInterval(stop);
        } else {
          val.setAttribute("disabled", true);
          val.innerHTML = "重新发送(" + countdown + "s)";
          countdown--;
        }
      }, 1000)
    },
    // 获取手机验证码
    phones() {
      this.pinfons = '';
      this.infos = '';
      this.infosse = '';
      this.ressinfons = '';
      this.infoss = '';
      if (this.phone == '') {
        this.inf = '请填写手机号'
        return false;
      }
      if (this.veriCode == '') {
        this.ressinfons = '请输入图形验证码'
        return false;
      } else {
        this.ressinfons = '';
      }
      // var iphoneBoundBtn = document.getElementsByClassName("iphoneBoundBtn")[0];
      // this.settime(iphoneBoundBtn, 60);
      var items = {
        "phone": this.encrypt.CBC_sm4encrypt(this.phone, 'E1A71C22C0C71BBB5ECA7988F46064DD,9F6CB4FC9E43EC8769D170DE95E8E6C7')
      };
      var that = this;
      post(this.constant.publicCoop + '/login/SMSVerificate', items).then(function (res) {
        console.log(res)
        if (res.data.result == 0) {
          var iphoneBoundBtn = document.getElementsByClassName("iphoneBoundBtn")[0];
          that.settime(iphoneBoundBtn, 60);
        } else {
          that.infosse = res.data.message;
        }
      })
    },
    login() {
      this.$router.push("/login")
    },
    keyaa() {
      var isIE9 = navigator.userAgent.match(/MSIE 9.0/) != null;
      if (isIE9) {
        var firstOne = document.getElementById('firstOne')
        var inputs = firstOne.getElementsByClassName("textAll");
        var inputPass = firstOne.getElementsByClassName("textPass");
        for (var i = 0; i < inputs.length; i++) {
          inputs[i].index = i;
          var text = inputs[i].getAttribute('placeholder');
          if (inputs[i].type === 'text' && text) {
            var text = inputs[i].getAttribute('placeholder');
            var defaultValue = inputs[i].defaultValue;
            if (defaultValue == '') {
              inputs[i].value = text
            }
            inputs[i].onfocus = function () {
              var aa = this.index;
              var text = inputs[aa].getAttribute('placeholder');
              if (inputs[aa].value == text) {
                inputs[aa].value = ''
              }
            };
            inputs[i].onblur = function () {
              var aa = this.index
              var text = inputs[aa].getAttribute('placeholder');
              if (inputs[aa].value == '') {
                this.value = text
              }
            }
          };
        }
        for (var j = 0; j < inputPass.length; j++) {
          inputPass[j].index = j;
          if (inputPass[j].type === 'password') {
            if (inputPass[j].type == 'password') {
              inputPass[j].type = 'text'
            }
            var text = inputPass[j].getAttribute('placeholder'),
              defaultValue = inputPass[j].defaultValue;
            if (defaultValue == '') {
              inputPass[j].value = text
            }
            inputPass[j].onfocus = function () {
              var aa = this.index
              var text = inputPass[aa].getAttribute('placeholder');
              if (inputPass[aa].value == text) {
                inputPass[aa].value = ''
              }
              if (inputPass[aa].type == 'text') {
                inputPass[aa].type = 'password'
              }
            };
            inputPass[j].onblur = function () {
              var aa = this.index
              if (this.value == '') {
                if (inputPass[aa].type == 'password') {
                  inputPass[aa].type = 'text'
                }
              }
              var text = inputPass[aa].getAttribute('placeholder');
              if (inputPass[aa].value == '') {
                inputPass[aa].value = text
              }
            }
          };
        }
      }
    }
  },
  created() {
    this.ress();
    window.load = function () {
      document.getElementById('pwd1').value = '';
    }
  },
  mounted() {
    this.keyaa()
  }
}
</script>

<!-- <style>
#register-iphone .el-tabs__item {
  padding: 0 60px;

}</style> -->
<style>
#register-iphone input[type="text"] {
  width: 385px;
  height: 40px;
  display: block;
  margin-top: 15px;
  border-radius: 4px;
  color: #5a5e66;
  border: 1px solid #d8dce5;
  padding-left: 15px;
}

#register-iphone input[type="password"] {
  width: 385px;
  height: 40px;
  display: block;
  margin-top: 15px;
  border-radius: 4px;
  color: #5a5e66;
  border: 1px solid #d8dce5;
  padding-left: 15px;
}

#register-iphone input::-webkit-input-placeholder {
  color: #B4BCCC;
}

#register-iphone input:nth-of-type(5) {
  width: 200px;
  display: inline-block;
}

#register-iphone input:nth-of-type(6) {
  width: 200px;
  display: block;
}

#register-iphone input[type="radio"] {
  width: 13px;
  height: 13px;
}

.button {
  margin-top: 61px;
  width: 100px;
  height: 40px;
  background: #009688;
  color: #fff;
  border-radius: 3px 3px 3px 3px;
  margin-left: 140px;
}

.registerbtn {
  margin-top: 20px;
  width: 100px;
  height: 40px;
  background: #009688;
  color: #fff;
  border-radius: 3px 3px 3px 3px;
  margin-left: 140px;
  cursor: pointer;
}

.register-bottoms {
  margin-left: 1px;
  margin-top: 63px;
  background: #fff;
  width: 440px;
  height: 465px;
  border-radius: 5px 5px 5px 5px;
  float: left;
}

.register-bottoms .register-p {
  margin-left: 250px;
  margin-top: 30px;
  color: #009688;
  cursor: pointer;
}

.register-bottoms p {
  margin-left: 50px;
  margin-top: 10px;
}

#register-iphone .el-tab-pane {
  position: relative;
}

#register-iphone .el-tab-pane .el-button {
  background: #009688;
  width: 100px;
  height: 40px;
  color: #fff;
}

#register-iphone .el-tabs__nav-wrap::after {
  width: 95%;
}

#register-iphone .el-tabs .el-tab-pane .el-input {
  width: 396px;
  display: block;
  margin-top: 15px;
}

#register-iphone .el-tabs .el-tab-pane .el-input:nth-of-type(5) {
  width: 200px;
  display: inline-block;
}

#register-iphone .el-tabs .el-tab-pane .register-span {
  width: 80px;
  height: 30px;
  display: block;
  margin-top: -28px;
  margin-left: 251px;
}

#register-iphone .el-tabs .el-tab-pane .register-span img {
  width: 119px;
  height: 34px;
  margin-top: -10px;
}

#register-iphone .el-tabs .el-tab-pane .el-input:nth-of-type(6) {
  width: 200px;
  display: block;
}

#register-iphone .el-tabs .el-tab-pane .register-spans {
  width: 120px;
  position: absolute;
  right: 49px;
  bottom: 63px;
}

#register-iphone {
  position: absolute;
  /*display: flex;*/
  overflow: hidden;
}

#register-iphone .el-tabs {
  width: 420px;
  height: 465px;
  background: #fff;
  margin-left: 285px;
  margin-top: 63px;
  padding-left: 25px;
  border-radius: 5px 5px 5px 5px;
  float: left;
}

.register-background-image {
  width: 100%;
  height: 600px;
  background: url("../../../../../public/img/login.png") no-repeat;
  background-size: 100% 100%;
}

.register-div {
  width: 1200px;
  height: 92px;
  margin: 0 auto;
}

.register-image {
  float: left;
  width: 344px;
  height: 65px;
  margin-top: 1%;
}

.register-image img {
  height: 100%;
}
</style>

/login/captcha图片验证码接口返回的数据

data.json

{
  "result": 0,
  "total": "0",
  "code": "200",
  "data": {
    "imageBase64": "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",
    "imageKey": "3cc8cf44-243b-4d86-96da-1fb8d95643d1"
  },
  "success": true,
  "message": "操作成功"
}
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Node.js是一个基于Chrome V8引擎的JavaScript运行环境,可用于开发服务端应用程序。Axios是一个基于Promise的HTTP客户端,用于发送HTTP请求。Axios支持浏览器和Node.js环境。 在Node.js中使用Axios发送HTTP请求,可以通过以下步骤实现: 1. 安装Axios 可以通过npm命令安装Axios: ``` npm install axios ``` 2. 发送HTTP请求 可以使用Axios的get、post、put、delete等方法发送HTTP请求。例如: ``` const axios = require('axios'); axios.get('http://localhost:3000/api/user') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); ``` 3. 添加请求拦截器 可以通过Axios的interceptors属性添加请求拦截器。拦截器可以在发送请求前对请求进行处理。例如,可以在请求头中添加token等信息: ``` axios.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => { return Promise.reject(error); } ); ``` 4. 添加响应拦截器 可以通过Axios的interceptors属性添加响应拦截器。拦截器可以在接收到响应后对响应进行处理。例如,可以在响应中检查是否需要跳转到登录页面: ``` axios.interceptors.response.use( response => { return response; }, error => { if (error.response.status === 401) { // 跳转到登录页面 window.location.href = '/login'; } return Promise.reject(error); } ); ``` 以上是使用Axios发送HTTP请求及添加拦截器的基本步骤。在实际应用中,还需要考虑请求的参数、响应的处理等方面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值