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