【二维码】前端如何生成二维码后端生成二维码接口api

LuckyCola2023

已于 2023-06-27 10:55:03 修改

阅读量1.5k

点赞数

分类专栏： api 文章标签：前端 javascript vue.js

于 2023-03-16 22:04:08 首次发布

本文链接：https://blog.csdn.net/qq_48896417/article/details/129601235

版权

api 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

前端生成二维码API

一、前端生成二维码API
二、使用步骤
- 1、接口
- 2、请求参数
三、案例和demo

一、前端生成二维码API

一款直接可用的自定义内容生产二维码的API接口

二、使用步骤

1、接口

重要提示:建议使用https协议,当https协议无法使用时再尝试使用http协议

请求方式: POST

http(s)://luckycola.com.cn/tools/getqrCode

2、请求参数

序号	参数	是否必须	说明
1	ColaKey	是	唯一验证ColaKey, 可前往官网获取(http(s): //luckycola.com.cn)
2	qrCodeContent	是	用于生产二维码的自定义内容(文本或链接)

注意!!!: 如果您还没有Colakey,请先请前往官网获取
官网地址:http(s): //luckycola.com.cn/

三、案例和demo

在线demo: 点击查看>>>

<!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>