快捷導(dǎo)航

SpringBoot和Vue實(shí)現(xiàn)動(dòng)態(tài)二維碼的示例代碼

更新時(shí)間：2024年02月28日 11:19:42 作者：Blet-

二維碼在現(xiàn)代社交和營銷活動(dòng)中被廣泛使用,本文主要介紹了SpringBoot和Vue實(shí)現(xiàn)動(dòng)態(tài)二維碼的示例代碼,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

二維碼在現(xiàn)代社交和營銷活動(dòng)中被廣泛使用。我們可以在各種渠道上看到二維碼的身影，如微信，支付寶，以及其他應(yīng)用程序中。在本篇博客中，我們將使用SpringBoot和Vue框架來演示如何創(chuàng)建一個(gè)能夠自動(dòng)生成并定期刷新的動(dòng)態(tài)二維碼。

技術(shù)方案

我們會(huì)使用以下技術(shù)和框架實(shí)現(xiàn)這個(gè)案例：

Spring Boot，用于后端服務(wù)端開發(fā)
VueJS和Element UI，用于前端UI以及與后端的交互
QRCode，使用開源庫生成動(dòng)態(tài)二維碼
WebSocket，實(shí)現(xiàn)實(shí)時(shí)推送更新動(dòng)態(tài)二維碼

實(shí)現(xiàn)

1. 初始化項(xiàng)目

使用Spring Initializr（https://start.spring.io/）初始化一個(gè)Spring Boot項(xiàng)目，加入以下的依賴：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
    <groupId>net.glxn</groupId>
    <artifactId>qrgen</artifactId>
    <version>1.4.1</version>
</dependency>

2. 實(shí)現(xiàn)服務(wù)端

在服務(wù)端我們會(huì)創(chuàng)建一個(gè)WebSocket連接，用來實(shí)時(shí)推送動(dòng)態(tài)二維碼。我們創(chuàng)建一個(gè)QRCodeService類，實(shí)現(xiàn)動(dòng)態(tài)二維碼的生成和數(shù)據(jù)推送邏輯。

首先在QRCodeService里面定義一個(gè)WebSocketTemplate，用來向客戶端推送消息。

@Service
public class QRCodeService {
    @Autowired
    private SimpMessagingTemplate template;

    // ...
}

接下來定義生成動(dòng)態(tài)二維碼的方法。

public static BufferedImage generateQRImage(String text) throws Exception {
    ByteArrayOutputStream out = QRCode.from(text).to(ImageType.PNG).stream();
    ByteArrayInputStream in = new ByteArrayInputStream(out.toByteArray());
    return ImageIO.read(in);
}

上述方法使用QRCode庫生成二維碼，并將結(jié)果作為BufferedImage返回。

接下來是實(shí)現(xiàn)使用WebSocket發(fā)送消息的方法。

@Scheduled(fixedRateString = "${frequency}")
public void generateQRCode() throws Exception {
    String message = LocalDateTime.now().toString();
    BufferedImage qrImage = generateQRImage(message);
    ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
    ImageIO.write(qrImage, "png", outputStream);
    byte[] bytes = Base64.encodeBase64(outputStream.toByteArray());

    template.convertAndSend("/topic/qrCode", new String(bytes));
}

這個(gè)方法會(huì)定期生成一個(gè)新的二維碼，并使用Base64編碼轉(zhuǎn)換為字符串，然后使用WebSocket將其推送到客戶端。

使用@Scheduled注解可以設(shè)置定時(shí)任務(wù)，在這里我們可以設(shè)置fixedRate參數(shù)來指定生成二維碼的頻率。這個(gè)參數(shù)可以從application.properties文件中讀取。

現(xiàn)在，服務(wù)端的代碼已經(jīng)完成了。

3. 實(shí)現(xiàn)客戶端

我們將使用Vue作為我們的前端框架。使用Vue-Cli命令行工具初始化一個(gè)新的Vue項(xiàng)目。

打開App.vue，在template部分定義一個(gè)div元素用于展示動(dòng)態(tài)二維碼。

<template>
  <div id="app">
    <el-card v-if="qrcodeUrl" class="box-card">
        <div style="text-align: center;">
          <img v-bind:src="qrcodeUrl" height="40%"/>
        </div>
    </el-card>
  </div>
</template>

我們使用Element UI組件庫中的card組件來布局界面。qrcodeUrl是用來顯示動(dòng)態(tài)二維碼的URL地址。

在App.vue中還需要定義一下我們的WebSocket連接代碼。

<script>
export default {
  name: 'App',
  data() {
    return {
      qrcodeUrl: null
    }
  },
  mounted() {
    const url = 'ws://localhost:8080/ws/qrCode';
    this.socket = new WebSocket(url);
    this.socket.onmessage = (event) => {
      const imageData = event.data;
      const imageUrl = 'data:image/png;base64,' + imageData;
      this.qrcodeUrl = imageUrl;
    };
  }
}
</script>

上述代碼會(huì)在組件掛載后創(chuàng)建一個(gè)WebSocket連接，它通過url連接到服務(wù)器端的webSocket中心。當(dāng)接收到服務(wù)端發(fā)送的消息，客戶端會(huì)將收到的圖片數(shù)據(jù)解碼，將解碼后的data URL賦值給qrcodeUrl。

接下來定義一個(gè)生成二維碼的方法，用于向服務(wù)端發(fā)送請(qǐng)求來生成新的動(dòng)態(tài)二維碼。

<template>
  <!-- ... -->
  <el-button @click="generateQRCode()">生成</el-button>
  <!-- ... -->
</template>

<script>
export default {
  // ...
  methods: {
    generateQRCode() {
      this.$axios.get('/generateQRCode').then(response => {
        console.log(response);
      }).catch(error => {
        console.log(error);
      })
    }
  }
}
</script>

上述代碼我們?cè)赩ue中定義了一個(gè)方法，它向服務(wù)端發(fā)送一個(gè)請(qǐng)求，從而生成新的二維碼。我們使用axios庫來發(fā)送HTTP請(qǐng)求。

4. 編寫服務(wù)端的WebSocket配置類

為了讓服務(wù)端支持WebSocket，我們需要定義配置類WebSocketConfig，用來注冊(cè)WebSocketEndpoint和WebSocketMessageBroker。在這個(gè)類中我們還要定義啟用WebSocket的CORS配置。

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
 
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS();
    }
 
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST")
                .allowCredentials(false).maxAge(3600);
    }
}

現(xiàn)在我們已經(jīng)完成了后端服務(wù)的配置，接下來需要調(diào)整一下前端代碼。

5. 配置前端的axios

在Vue項(xiàng)目的main.js文件中引入axios，并將其掛載到Vue實(shí)例上。

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'

Vue.config.productionTip = false
Vue.use(ElementUI)

axios.defaults.baseURL = 'http://localhost:8080'
Vue.prototype.$axios = axios

new Vue({
  render: h => h(App),
}).$mount('#app')

在除了修改默認(rèn)的baseURL之外，上述代碼中還配置了Element UI組件庫。

我們?cè)跒g覽器運(yùn)行這個(gè)項(xiàng)目，當(dāng)用戶點(diǎn)擊"生成"按鈕時(shí)，新的二維碼會(huì)被隨機(jī)生成。按照上面定義的定時(shí)任務(wù)，每次生成的二維碼會(huì)在1分鐘后更新。

總結(jié)

在本文中，我們學(xué)習(xí)了如何使用Spring Boot和VueJS框架生成動(dòng)態(tài)二維碼。我們使用了QRCode庫和WebSocket來實(shí)現(xiàn)這個(gè)功能，并使用axios進(jìn)行了前端和后端之間的通信。

到此這篇關(guān)于SpringBoot和Vue實(shí)現(xiàn)動(dòng)態(tài)二維碼的示例代碼的文章就介紹到這了,更多相關(guān)SpringBoot Vue動(dòng)態(tài)二維碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: