Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right
Article directory
foreword
In the actual project, the verification code login is almost an essential operation skill for every developer, but there are many ways for the front end to obtain the verification code data of the back end, which is sometimes confusing for junior developers, so in This summarizes several common verification methods in development, so that they can be used directly after encountering them in future development
提示：以下是本篇文章正文内容，下面案例可供参考
1. Situation 1: The data is a picture file stream
The front-end needs to display the verification code picture, hoping that the back-end will directly return the picture address, but the back-end gives the file stream instead of a picture address, so in this case, the file stream needs to be displayed in base64 format. This is not the case
. Caused by adding 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: The direct return is a picture
The returned response is directly the verification code, even without ajax/axios when receiving it...
<!-- 验证码 -->
<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");
// });
},
Case 3: Login verification of the uni applet
Similar to situation 1, the data transmitted from the backend is a picture file stream, but the code on the applet needs to be processed as follows
<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);
}
);
}
at last
At present, there are more verification code logins encountered in the above three situations. There is also a mobile phone SMS verification, which is relatively simple, as long as one button sends a request.