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是参数后端