位置: IT常识 - 正文

vue实现前端展示后端实时日志带颜色示例详解(vue前端页面设计)

编辑:rootadmin
这篇文章主要为大家介绍了vue实现前端展示后端实时日志带颜色示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪 目录

推荐整理分享vue实现前端展示后端实时日志带颜色示例详解(vue前端页面设计),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue前端展示神经网络训练过程,vue实现前端展示图片,vue前端界面,vue前端展示并修改图片,vue实现前端展示图片,vue前端展示神经网络架构,vue实现前端展示图片,vue实现前端展示图片,内容如对您有帮助,希望把文章链接给更多的朋友!

vue实现前端展示后端带颜色的日志需求操作采用innerHTML例子需求:解决效果vue实现前端展示后端带颜色的日志需求

通过loki获取项目产生的日志,并且在前端显示出来,一开始在没有经过处理的数据会显示一些乱码,并没有将字符转换

经过一番查询后,发现可以使用ansi_up来对日志进行操作颜色代码进行转化。

操作

ansi_up

能够装换颜色代码

GitHub地址https://github.com/drudru/ansi_up

安装

npm install ansi_up

引入

import {default as AnsiUp} from 'ansi_up';

使用

vue实现前端展示后端实时日志带颜色示例详解(vue前端页面设计)

后端采用loki收集日志

this.logs = res.data.result[0].valuesvar 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]"></div></div>

显示

采用innerHTML例子需求:

项目是一个管理系统,当执行安装任务时,需要把后端安装过程中的日志推送到前端,前端在页面上展示实时进度,并且与终端显示的颜色保持一致。用websocket或者前端设置定时器的方式,定时去获取后端的json数据比较简单,比较纠结的是怎么显示颜色,方便用户直观看到安装过程中的进度,报错等信息。

后端拿到的json数据:

可以看到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); //调用ansi_to_html()方法,txt就是从后端拿到的json数据var statusLog= document.getElementById("statusLog"); //statusLog 即是页面需要展示内容的divstatusLog.innerHTML = html;效果

以上就是vue实现前端展示后端实时日志带颜色示例详解的详细内容,更多关于vue前端展示后端日志带颜色的资料请关注本站其它相关文章!

本文链接地址:https://www.jiuchutong.com/zhishi/313100.html 转载请保留说明!

上一篇:浏览器的渲染过程(中药资源与开发跨专业考研)

下一篇:织梦dedecms图片按月存放怎么实现?代码分享(织梦官方)

  • 农产品增值税加计扣除可以补申报吗
  • 税务行政复议是税务行政复议机关的裁决活动
  • 企业收到的政府补贴交所得税吗
  • 租金没有发票可以入账吗
  • 广告策划费会计分录
  • 转让长期股权投资的净收益计入
  • 年度结转之前需要做什么
  • 生产成本福利费用汇算清缴嘛
  • 付稿费会计分录
  • 税控盘维护费是普票能全额抵扣吗
  • 出口退税金额和进项税额不一致
  • 房地产开发公司怎么做账
  • 增值税普通发票有什么用
  • 资询服务收入算服务还是劳务
  • 小规模给个人开普票怎么填写
  • 福利费应计入什么费用
  • 经营负债是指什么
  • 房地产开发企业建造的商品房,在出售前
  • 固定资产要办理什么手续
  • Windows 11 Build 22000.176 (KB5006050) 更新推送(附更新内容+安装)
  • 分次发放年终奖怎么做账
  • 班夫国家公园最佳旅游时间
  • express框架使用
  • 劳务费用 税
  • 关于灵活就业人员待遇享受政策
  • zencart安装教程
  • 职工教育经费的计提比例是多少
  • vue-nginx刷新404问题
  • 期末结转主营业务收入负数
  • 2022年如何在股室工作中落实党风见证
  • macps字体怎么导入
  • 长期股权投资印花税计入什么科目
  • python中dataframe的布尔过滤
  • 筹建期所得税年度申报如何填列
  • 挂靠设计公司费用标准怎么记账
  • 员工个人所得税申报方式选哪个
  • 其他应收款资产类
  • 咨询公司小规模纳税人企业所得税核定征收
  • 番茄开发票属于蔬菜吗?
  • 递延所得税资产和所得税费用的关系
  • 小规模增值税纳税人税率
  • 一般纳税人租赁费税率5%是简易征收吗?
  • 货物已到发票未开具
  • 月末结存材料的实际成本例题
  • 保险公司代扣的车船使用税分录
  • 房地产企业进项税抵扣的时间
  • 以前年度的损益调整为负值说明什么
  • 进口增值税已抵进项税额
  • 固定基金减少的理由
  • 原材料采购未入库会计分录
  • 进口增值税与关税的关系
  • 金蝶计价方法在哪里
  • 如何证明自己是中国人
  • 待报解预算收入给我转了钱是什么意思
  • 资产负债表负债率怎么计算
  • 航天信息开票软件客服
  • 弥补上年亏损的分录 所得税
  • 员工预支工资可以从工资里扣吗
  • sql server使用心得
  • sql教程
  • 跨服务器访问数据库
  • Win10应用商店下载错误
  • winadserv.exe - winadserv是什么进程
  • win7电脑蓝牙图标怎么弄出来
  • win7电脑ip地址怎么查
  • win10在更新界面怎么办
  • win7开机黑屏只有一个鼠标箭头
  • linux就该这么些
  • android base64传图片
  • 背景透明度设置
  • flask使用celery
  • 守护进程和普通进程
  • context和getApplicationContext()介绍
  • 简单的智能家居
  • javascript怎么编写
  • 北京税务师取消了吗
  • 中国税务网络版
  • 北京税务查验中心官网
  • 年终奖怎么报个税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设