場景

若依前后端分離版本地搭建開發(fā)環(huán)境并運行項目的教程：

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

基于上面搭建起來架構(gòu)的基礎(chǔ)上，業(yè)務(wù)需求是某單據(jù)需要審批時，通過語音播報及時通知對應(yīng)的賬號。

一種思路：

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

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

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

另一種思路：

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

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

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

該思路用在并發(fā)量不大的前提下。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

1、首先實現(xiàn)指定的賬戶進行播報中配置指定的賬戶。

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

?

實現(xiàn)如上多選配置的操作可以參考如下

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

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

最終存儲進數(shù)據(jù)的形式如下

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));}}

接口的業(yè)務(wù)邏輯實現(xiàn)：

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

然后如果待審批的數(shù)據(jù)不為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;}

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

這里的selectBusParameterSetting_redis使用了緩存注解實現(xiàn)優(yōu)先從Redis緩存層查詢，如果redis中沒有則

從數(shù)據(jù)庫mysql中查詢并將其更新到redis中一份。并且當調(diào)用更新接口更新數(shù)據(jù)時也會從數(shù)據(jù)中更新一份最新的更新

到redis中。實現(xiàn)可以參考如下：

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

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

3、前端實現(xiàn)定時器調(diào)用接口

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

?

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

然后方法實現(xiàn)

??? // 語音播報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);},

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

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

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

定時器這里設(shè)定的是每5秒調(diào)用一次接口，接口的引入

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

接口的實現(xiàn)

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

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

這里復(fù)制了一份出來并修改了

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

4、語音播報的實現(xiàn)

上面語音播報通過

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

完整的實現(xiàn)流程參考如下

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

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。