關於生成二維碼及生成二維碼參數的傳入,配置文件的定義、調用,computed屬性的計算,

1,二維碼的生成(其中一個生成方法),由服務器提供一個url, 後端提供一個url,兩個url拼接到一個img標籤內,如圖:javascript

    

<el-row>
                <el-col :span="11">
                    <el-form-item label="租牀二維碼:">
                        <a :href="cabinetErCode" target="_blank">
                            <img :src="cabinetErCode">//src內的是調用的計算屬性computed的,注意這個不是方法因此沒有小括號。
                        </a>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="加羣二維碼:">
                        <a :href="groupQrCode" target="_blank">
                            <img :src="groupQrCode">
                        </a>
                    </el-form-item>
                </el-col>
            </el-row>

    2.script代碼html

<script>
export default {
    data() {
        return {
            form: {},
            productionUrl: process.env.VUE_APP_PRODUCTION_SRC,.//process.env是調用配置文件裏變量的方法,至關於調用dana裏的變量用this同樣。這裏productionUrl是定義配置文件裏變量的。下同
            developmentUrl: process.env.VUE_APP_DEVELOPMENT_SRC,
        }
    },
    props: ["id"],
    created() {
        this.loadMsg()
    },
    watch: {
        'id': {
            handler() {
                this.loadMsg();
            }
        }
    },
    computed: {
        cabinetErCode() {//計算屬性裏的小括號不須要填參數的
            return this.productionUrl + this.developmentUrl + "?cabinet_no=" + this.form.cabinet_no + "&action=cabinet"//這是計算櫃子二維碼的整個url其中this.form.cabinet_no是傳的參數。
        },
        groupQrCode() {
            return this.productionUrl + this.developmentUrl + "?cabinet_no=" + this.form.cabinet_no + "&action=group"
        }
    },

3.配置文件裏:java

NODE_ENV='development'
VUE_APP_CURRENTMODE='development'
VUE_APP_SITE_TITLE='益祝後臺管理系統'
VUE_APP_API_URL='http://api.yz.gydsh.com/msweb'
VUE_APP_PRODUCTION_SRC='https://s.weflys.com/qrcode?size=100&url=' //定義的服務器給的url
VUE_APP_DEVELOPMENT_SRC='http://api.yz.gydsh.com/app/cabinet/scan/qr' //定義的後端給的url的前半部分

4,服務器給的url: https://s.weflys.com/qrcode?size=200&url={url} 其中大括號裏的url填後端給的url,size=200是生成二維碼的大小可修改。web

後端給的url: http://api.yz.gydsh.com/app/cabinet/scan/qr?cabinet_no=123&action=cabinet 其中123是參數後端

相關文章
相關標籤/搜索