vue實現(xiàn)前端展示后端實時日志帶顏色示例詳解
vue實現(xiàn)前端展示后端帶顏色的日志
需求
通過loki獲取項目產(chǎn)生的日志，并且在前端顯示出來，一開始在沒有經(jīng)過處理的數(shù)據(jù)會顯示一些亂碼，并沒有將字符轉換
經(jīng)過一番查詢后，發(fā)現(xiàn)可以使用ansi_up來對日志進行操作顏色代碼進行轉化。
操作
ansi_up
能夠裝換顏色代碼
GitHub地址 https://github.com/drudru/ansi_up
安裝
npm install ansi_up
引入
import {default as AnsiUp} from 'ansi_up';
使用
后端采用loki收集日志
this.logs = res.data.result[0].values
var ansi_up = new AnsiUp()
for (const i in res.data.result[0].values) {
this.logs[i][1] = ansi_up.ansi_to_html(res.data.result[0].values[i][1])
}
渲染
<div v-for="(log, index) in logs" :key="index"> <div v-html="log[1]" style="margin-bottom: 5px; font-size: 16px"></div> </div>
顯示
采用innerHTML例子
需求：
項目是一個管理系統(tǒng)，當執(zhí)行安裝任務時，需要把后端安裝過程中的日志推送到前端，前端在頁面上展示實時進度，并且與終端顯示的顏色保持一致。
用websocket或者前端設置定時器的方式，定時去獲取后端的json數(shù)據(jù)比較簡單，比較糾結的是怎么顯示顏色，方便用戶直觀看到安裝過程中的進度，報錯等信息。
后端拿到的json數(shù)據(jù)：
可以看到ansi 的顏色代碼就好像亂碼一樣，如果直接展示到頁面上，是不會轉換ansi 的顏色代碼，看到的就類似一個普通的txt文本，用戶沒法直觀看到想要的信息。
解決
對ansi 的顏色代碼進行轉化，輸出在頁面上，需要用到的插件：ansi_up
項目地址：https://github.com/drudru/ansi_up
2.1 安裝
$ npm install ansi_up
2.2 引入
import {default as AnsiUp} from 'ansi_up';
2.3 使用
var ansi_up = new AnsiUp;
var html = ansi_up.ansi_to_html(txt); //調(diào)用ansi_to_html()方法，txt就是從后端拿到的json數(shù)據(jù)
var statusLog= document.getElementById("statusLog"); //statusLog 即是頁面需要展示內(nèi)容的div
statusLog.innerHTML = html;
效果
以上就是vue實現(xiàn)前端展示后端實時日志帶顏色示例詳解的詳細內(nèi)容，更多關于vue前端展示后端日志帶顏色的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue儲存storage時含有布爾值的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
dhtmlxGantt是一個強大的JavaScript Gantt圖表庫,提供易于使用、高度可自定義的Gantt圖表組件,它支持多項任務和進度條,以及多種列和行布局,可用于創(chuàng)建各種類型的時間線和計劃表,本文給大家介紹前端vue實現(xiàn)甘特圖的相關知識,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章給大家介紹了基于vue封裝一個帶眼睛的密碼子組件的方法,文章中有詳細的代碼講解,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-09-09
本篇文章主要介紹了詳解基于mpvue的小程序markdown適配解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue.js實現(xiàn)模擬微信朋友圈開發(fā)demo
本篇文章主要介紹了Vue.js實現(xiàn)模擬微信朋友圈開發(fā)demo，實現(xiàn)展示朋友圈，評論，點贊等功能，有興趣的可以了解一下。2017-04-04
Electron+vue從零開始打造一個本地播放器的方法示例
這篇文章主要介紹了Electron+vue從零開始打造一個本地播放器的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要介紹了vue修改滾動條樣式,首先要知道，修改滾動條樣式，利用偽元素-webkit-scrollbar。下面來看看文章內(nèi)容的具體實現(xiàn)吧2021-11-11
vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別
這篇文章主要介紹了對vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別,需要的朋友可以參考下2022-05-05
vue?this.$router和this.$route區(qū)別解析及路由傳參的2種方式?&&?this.$route
this.$router?相當于一個全局的路由器對象,包含了很多屬性和對象（比如?history?對象）,任何頁面都可以調(diào)用其?push(),?replace(),?go()?等方法,本文給大家介紹Vue中this.$router與this.$route的區(qū)別?及push()方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
Vue中l(wèi)ocalStorage的用法和監(jiān)聽localStorage值的變化
這篇文章主要介紹了Vue中l(wèi)ocalStorage的用法和監(jiān)聽localStorage值的變化,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04