# 前端生成二维码API
一款直接可用的自定义内容生产二维码的API接口
# 一、使用步骤
# 1、接口
重要提示:建议使用https协议,当https协议无法使用时再尝试使用http协议
请求方式: POST
http(s)://luckycola.com.cn/tools/getqrCode
1
# 2、请求参数
| 序号 | 参数 | 是否必须 | 说明 |
|---|---|---|---|
| 1 | ColaKey | 是 | 唯一验证ColaKey, 可前往官网获取(http(s): //luckycola.com.cn (opens new window)) |
| 2 | qrCodeContent | 是 | 用于生产二维码的自定义内容(文本或链接) |
注意!!!: 如果您还没有Colakey,请先请前往官网获取 官网地址:http(s): //luckycola.com.cn/ (opens new window)
# 二、 请求响应示例
# 1、请求示例
{
"ColaKey": "PVVL*******jZxzm9",
"qrCodeContent": "这里是自定义内容,可以是文本,可以是url地址"
}
1
2
3
4
2
3
4
# 2、应示示例
{
"code": 0,
"msg": "二维码图片生成成功",
"data": {
// Base64格式的图片
"qrBase64Url": "data:image/png;base64,iVBORw0KGgoAAAANSUhE...PDgAAAAASUVORK5CYII="
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 三、 案例和demo
在线demo: 点击查看>>> (opens new window)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrcode</title>
</head>
<body>
<div id="app">
<img v-if="qrcodeUrl" :src="qrcodeUrl" alt="qrcodeUrl">
<input
type="text"
style="display: block;margin: 10px 0 10px 0;width: 600px;height: 50px;"
placeholder="请输入需要生成二维码的内容(文字或者链接url)"
v-model="message">
<div v-if="errmsg" style="color: red; font-size: 12px; margin-bottom: 10px;">{{errmsg}}</div>
<button @click="submitFn">提交验证</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
const { createApp } = Vue
let app = createApp({
data() {
return {
message: '',
errmsg: '',
qrcodeUrl: ''
}
},
methods: {
submitFn () {
let me = this;
if (!this.message) {
return this.errmsg = '请输入生成二维码的内容'
};
axios({
url: 'http://luckycola.com.cn/tools/getqrCode',
// url: 'http://localhost/tools/getqrCode',
method: 'post',
// withCredentials: true,
data: {
qrCodeContent: me.message || 'http://luckycola.com.cn/',
ColaKey: '7bl41678875299610weKFep1111'
}
})
.then(function (res) {
// 请求成功返回
let resData = res.data;
if (resData.code === 0) {
me.qrcodeUrl = resData.data.qrBase64Url;
} else if (resData.code === -99) {
alert(resData.msg);
} else {
alert('验证码错误,验证失败');
}
console.log(res);
})
.catch(function (err) {
// 请求失败返回
console.log(err);
alert('请求失败');
})
}
},
}).mount('#app');
app.$watch('message', function(val) {
console.log('message change=>', val);
})
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79