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