vue处理后端返回的日志

vue处理后端返回的日志,并保持日志内容最新(滚动到最新内容)
1、后端返回的日志格式如下所示,该如何处理成正常的文本换行
在这里插入图片描述

2、在获取日志的接口中做如下处理,把返回的/n替换成换行标签,并根据任务状态判断日志是否需要轮询

getLogInfo(id) {
   this.$axios
     .get(`/ai/train/logs/${id}`)
      .then((res) => {
          if (res.data.code == 200) {
              this.logText = "";
              if (res.data.data) {
                 res.data.data.forEach((item) => {
                    this.logText += item.replace(/\n/g, "<br/>");
                 });
              if ( this.modelInfo.status == 0 ) {
                this.startPolling();
              } else {
                this.endPolling();
              }              
              this.scrollToBottom();
         } else {
           this.logText = "暂无日志信息";
         }
    }
})

3、在html中使用,为标签设置v-html

<div class="log-box-content-text" v-html="logText" id="logCon"></div>

4、轮询日志,一般日志是需要实时更新的,所以需要根据任务状态轮询日志

startPolling() {
    this.pollTimer = setTimeout(() => {
        this.getLogInfo(this.id);
    }, 5000);
},
endPolling() {
    clearInterval(this.pollTimer);
},

5、滚动条保持最底部方法,在获取日志的接口调用

    scrollToBottom() {
      this.$nextTick(() => {
        var container = document.querySelector("#logCon");
        container.scrollTop = container.scrollHeight;
      });
    },

轮询相关资源:vue中数据状态轮询

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/514669.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python构建高效可扩展的Web应用程序库之aiohttp使用详解

概要 在Python异步编程领域中,aiohttp库以其强大的功能成为构建高效可扩展的Web应用程序的重要工具。它利用asyncio提供异步HTTP客户端和服务器功能,使其成为处理并发请求和优化性能的理想选择。在本全面指南中,将深入探讨aiohttp库,包括安装方法、特性、基本和高级功能、…

突破校园网限速:使用 iKuai 多拨分流负载均衡 + Clash 代理(内网带宽限制通用)

文章目录 1. 简介2. iKuai 部署2.1 安装 VMware2.2 安装 iKuai(1) 下载固件(2) 安装 iKuai 虚拟机(3) 配置 iKuai 虚拟机(4) 配置 iKuai(5) 配置多拨分流 2.3 测试速度 3. Clash 部署3.1 准备工作(1) 配置磁盘分区(2) 安装 Docker(3) 安装 Clash(4) 设置代理 1. 简介 由于博主…

DETR【Transformer+目标检测】

End-to-End Object Detection with Transformers 2024 NVIDIA GTC&#xff0c;发布了地表最强的GPU B200&#xff0c;同时&#xff0c;黄仁勋对谈《Attention is All You Need》论文其中的7位作者&#xff0c;座谈的目的无非就是诉说&#xff0c;Transformer才是今天人工智能成…

vtk,ITK,DICOM3.0

(14 封私信 / 80 条消息) VTK ITK OPENCV&#xff0c;从图像处理的角度来说&#xff0c;哪种用的人多&#xff1f; - 知乎 (zhihu.com) 医学领域&#xff1a;通常要求使用ITK和VTK。 ITK做底层处理算法。 VTK做可视化显示。 ITK:Insight Segment and Regestration Toolkit …

链表之单链表

上一篇博客我们学习了线性表中的顺序表&#xff0c;这一篇博客让我们继续往下了解线性表的链表&#xff0c;链表分为好几种结构&#xff0c;活不多说&#xff0c;让我们开始学习吧&#xff01; 目录 1.链表 2.链表的结构 3.单链表的实现 1.链表 1.概念&#xff1a;它是一种物…

【QT入门】 自定义标题栏界面qss美化+按钮功能实现

往期回顾&#xff1a; 【QT入门】 鼠标按下和移动事件实现无边框窗口拖动-CSDN博客【QT入门】 设计实现无边框窗口拉伸的公用类-CSDN博客【QT入门】对无边框窗口自定义标题栏并实现拖动和拉伸效果-CSDN博客 【QT入门】 自定义标题栏界面qss美化按钮功能实现 一、最终效果 二、…

Linux简单介绍

Linux简单介绍 编译器VMware虚拟机Ubuntu——LinuxOS为什么使用LinuxOS&#xff1f; 目录结构Windows目录结构Linux操作系统home是不是家目录&#xff1f; Linux常用命令终端命令行提示符与权限切换命令tab 作用&#xff1a;自动补全上下箭头pwd命令ls命令mkdir命令touch命令rm…

Vue 大文件切片上传实现指南包会,含【并发上传切片,断点续传,服务器合并切片,计算文件MD5,上传进度显示,秒传】等功能

Vue 大文件切片上传实现指南 背景 在Web开发中&#xff0c;文件上传是一个常见的功能需求&#xff0c;尤其是当涉及到大文件上传时&#xff0c;为了提高上传的稳定性和效率&#xff0c;文件切片上传技术便显得尤为重要。通过将大文件切分成多个小块&#xff08;切片&#xff0…

小程序滑动删除组件+全选批量删除组件+附源码

小程序滑动删除组件全选批量删除组件附源码 说明 使用 uni-app、uview 组件开发&#xff0c;全端&#xff08;微信小程序、QQ小程序、抖音小程序等等&#xff09; 支持滑动删除组件、支持左滑删除、长按进入批量删除、全选删除、长按弹窗删除、 组件式开发&#xff0c;文章…

LabVIEW太赫兹波扫描成像系统

LabVIEW太赫兹波扫描成像系统 随着科技的不断发展&#xff0c;太赫兹波成像技术因其非电离性、高穿透性和高分辨率等特点&#xff0c;在生物医学、材料质量无损检测以及公共安全等领域得到了广泛的应用。然而&#xff0c;在实际操作中&#xff0c;封闭性较高的信号采集软件限制…

Leetcode 674. 最长连续递增序列

心路历程&#xff1a; 这道题和递增子序列的一样&#xff0c;由于题目中要求连续&#xff0c;实际上会让状态转移更加简单&#xff0c;因为候选的动作集合相当于更小了。 状态&#xff1a;nums的区间[0, i]&#xff0c;第i个元素和第i-1个元素的大小关系 动作&#xff1a;是否…

Vue3_2024_7天【回顾上篇watch常见的后两种场景】___续

Vue3中监听多条数据的两种使用 1.watch【使用上一章写法&#xff0c;监听两个属性&#xff0c;然后执行相应操作…】 2.watchEffect【相对于使用watch&#xff0c;watchEffect默认页面初始加载&#xff0c;有点类似加配置&#xff1a;立即执行 immediate】 代码&#xff1a; …

无熟人难办事?--迪米特法则

1.1 第一天上班 第一天上班&#xff0c;电脑安装工作但是安装的同事小张刚巧有事要忙&#xff0c;主管有事也出去了&#xff0c;没有人搭理。小张快下班的时候才回来&#xff0c;开始帮我装系统&#xff0c;加域&#xff0c;设置密码等。 1.2 无熟人难办事 管理上出了问题&a…

文献阅读:将条形码神经解剖学与空间转录分析相结合,可以识别投射神经元相关基因

文献介绍 「文献题目」 Integrating barcoded neuroanatomy with spatial transcriptional profiling enables identification of gene correlates of projections 「研究团队」 Anthony M. Zador&#xff08;美国冷泉港实验室&#xff09; 「发表时间」 2021-05-10 「发表期…

Rust---复合数据类型之枚举、数组

目录 枚举的使用Option 枚举数组的使用输出结果 枚举&#xff08;Enum&#xff09;&#xff1a;表示一个类型可以有多个不同的取值。枚举类型可以包含不同的变体&#xff08;variants&#xff09;&#xff0c;每个变体可以有不同的数据类型。 枚举的使用 enum Direction {Up,…

[QOpenGLWidget+QMouseEvent]实时绘制长方形

复现moho-打卡第1天 - 20240402 1.1--QOpenGLWidget中显示长方形 实现方法&#xff1a;顶点着色器中给定长方形的四个顶点数据&#xff0c;代码如下&#xff1a; // 顶点位置 GLfloat vertics[1][4][3] { {{mousePressPosX,mousePressPosY,0.0},{mousePressPosX,mouseMoveP…

hexo博客7:构建简单的多层安全防御体系

【hexo博客7】构建简单的多层安全防御体系 写在最前面理解全面安全策略的重要性防御常见的网络攻击1. SQL注入攻击2. 文件上传漏洞3. 跨站脚本攻击&#xff08;XSS&#xff09;4. 跨站请求伪造&#xff08;CSRF&#xff09;5. 目录遍历/本地文件包含&#xff08;LFI/RFI&#x…

CAN的协议层

CAN属于异步通讯&#xff0c;没有时钟信号线&#xff0c;连接在同一个总线网络中的各个节点会像串口异步通讯那样&#xff0c;节点间使用约定好的波特率进行通信&#xff0c;特别的&#xff0c;CAN还会使用“位同步”的方式来抗干扰&#xff0c;吸收误差&#xff0c;实现对总线…

Docker实战教程 第2章 Docker基础

3-1 Docker介绍 什么是Docker 虚拟化&#xff0c;容器 Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从Apache2.0协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&…

【活动预告】SLMOps 系列(三)|SLMOps 的最后一公里 - 模型评估技巧

点击蓝字 关注我们 编辑&#xff1a;Alan Wang 排版&#xff1a;Rani Sun 2023年&#xff0c;Azure OpenAI Service 引领了 AI 2.0 时代的热潮&#xff0c;各行业企业都在 AI 模型的探索与应用中持续发力。相比复杂度更高的大模型&#xff0c;有时候轻量且高效的小模型&#xf…