vue处理后端返回的日志

最新推荐文章于 2024-08-30 21:41:15 发布

活宝小娜

最新推荐文章于 2024-08-30 21:41:15 发布

阅读量671

点赞数 7

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44401371/article/details/137349591

版权

vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

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中数据状态轮询