場景

若依前后端分離版本地搭建開發環境并運行項目的教程：

若依前后端分離版手把手教你本地搭建環境并運行項目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分離搭建

基于上面搭建起來架構的基礎上，業務需求是某單據需要審批時，通過語音播報及時通知對應的賬號。

一種思路：

后端與前端使用websocket建立連接，連接時使用登錄賬號作為標識。

后臺使用定時任務，判斷當單據狀態為待審批的數據個數不為0時，向指定的賬戶推送消息，前端收到消息時，進行語音播報。

這個思路要考慮websocket在切換頁面時的銷毀和連接后臺websocket失敗時的重連機制。

另一種思路：

后臺只寫接口，接口中接收參數為賬號，根據賬號查詢該賬戶是否為要播報的賬戶，如果是要播報的賬戶并且待審批的數據個數不為0

時，則接口返回true,否則返回false。前端新建定時器，固定時間帶著當前登錄用戶的賬戶請求接口。

這種思路需要前端頻繁的請求接口，不大合適，但是如果后臺接口的地址是對接的第三方的系統，第三方的系統只提供對外的接口情況下，該思路較為適合。下面介紹這種思路的實現。

該思路用在并發量不大的前提下。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、首先實現指定的賬戶進行播報中配置指定的賬戶。

前端實現一個從所有賬戶中勾選賬戶的方式比較友好，這里為了簡單實現，所有采用手動輸入配置賬號的方式實現。

?

實現如上多選配置的操作可以參考如下

Vue中使用el-tag標簽實現輸入多個字符串實現新增和修改回顯(字符數組拼接和拆分)：

Vue中使用el-tag標簽實現輸入多個字符串實現新增和修改回顯(字符數組拼接和拆分)_BADAO_LIUMANG_QIZHI的博客-CSDN博客_el-tag vue

最終存儲進數據的形式如下

2、然后編寫后臺接口用來判斷是否需要進行播報

@RestController @RequestMapping(("/remindDispatcher")) @Slf4j public class BusRemindDispatcherController extends BaseController {@Autowiredprivate BusRemindDispatcherService busRemindDispatcherService;@GetMapping("/remind")public AjaxResult remind(String user) {return AjaxResult.success(busRemindDispatcherService.remind(user));}}

接口的業務邏輯實現：

獲取上面設置中的字符串然后使用→符合分割成字符串list

然后如果待審批的數據不為0且傳遞的賬號在要進行播報的賬戶中，則返回true,否則返回false

??? public Map<String, Boolean> remind(String user) {Map<String, Boolean> result = new HashMap<>();result.put("isRemind", false);BusParameterSetting busParameterSetting = busParameterSettingMapper.selectBusParameterSetting_redis(new BusParameterSetting());List<String> userList = busParameterSetting.getRemindDispatcher() != null ? Arrays.asList(busParameterSetting.getRemindDispatcher().split("→")) : Arrays.asList("");BusLogisticsTask busLogisticsTask = new BusLogisticsTask();busLogisticsTask.setOrderStatus("1");List<BusLogisticsTask> logisticsTasks = busLogisticsTaskService.selectBusLogisticsTaskList(busLogisticsTask);if (logisticsTasks.size() != 0 && userList.contains(user)) {result.put("isRemind", true);}return result;}

但是這里注意查詢配置的哪些賬戶可以接收播報的數據不用每次都從數據庫中查詢。

這里的selectBusParameterSetting_redis使用了緩存注解實現優先從Redis緩存層查詢，如果redis中沒有則

從數據庫mysql中查詢并將其更新到redis中一份。并且當調用更新接口更新數據時也會從數據中更新一份最新的更新

到redis中。實現可以參考如下：

SpringBoot中通過自定義緩存注解(AOP切面攔截)實現數據庫數據緩存到Redis：

SpringBoot中通過自定義緩存注解(AOP切面攔截)實現數據庫數據緩存到Redis_BADAO_LIUMANG_QIZHI的博客-CSDN博客

3、前端實現定時器調用接口

首先在登錄成功之后的頁面初始化之后調用建立定時器的操作，這里使用的ruoyi框架，所以是在layout下的index.vue

?

? mounted() {this.getApplyCarBroadCast();},

然后方法實現

??? // 語音播報getApplyCarBroadCast() {if (this.applyCarTime) {clearInterval(this.applyCarTime);}//獲取當前登錄用戶var userName = this.$store.state.user.name;this.applyCarTime = setInterval(() => {getApplyCarInfo(userName).then((res) => {let isRemind = res.data.isRemind;if(isRemind){//播報this.speech.speak({ text: "您有新的用車申請，請及時審批" }).then(() => {});}});}, 5000);},

注意這里的判斷定時器已經存在，先將之前的清除掉，再聲明新的。

然后若依前端框架中獲取登錄用戶的賬戶的方法是

var userName = this.$store.state.user.name;

定時器這里設定的是每5秒調用一次接口，接口的引入

import { getApplyCarInfo } from "@/api/home/home";

接口的實現

import request from '@/utils/requestWithOutAlert'export function getApplyCarInfo(query) {return request({url: '/fzys/remindDispatcher/remind',method: 'get',params:{user:query}}) }

注意這里的請求參數的傳遞形式。request是若依框架封裝的請求的工具類

這里復制了一份出來并修改了

將原來接口返回500等錯誤情況的彈窗提示修改為控制臺輸出。避免因后臺接口出現問題導致前端頁面一直彈窗提示錯誤的情況。

4、語音播報的實現

上面語音播報通過

??????????? this.speech.speak({ text: "您有新的用車申請，請及時審批" }).then(() => {});

完整的實現流程參考如下

Vue中使用speak-tts插件實現點擊按鈕后進行語音播報(TTS/文字轉語音)：

Vue中使用speak-tts插件實現點擊按鈕后進行語音播報(TTS/文字轉語音)_BADAO_LIUMANG_QIZHI的博客-CSDN博客_tts插件

?

總結

以上是生活随笔為你收集整理的SpringBoot+Vue实现指定账号审批单据时前端进行语音播报的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。