Vue客户端将Golang Echo返回的日志数据转换为JSON对象的实现

问题原因 #

你当前逻辑是将整个日志文件内容作为普通字符串传入c.JSON方法，Echo的JSON序列化会自动对字符串内的双引号、换行符做转义处理，所以返回的是转义后的字符串，而非结构化的JSON数组。

最优方案：服务端直接处理成JSON数组返回 #

服务端直接解析日志内容为结构化数组再返回，前端无需额外处理即可直接使用，代码示例如下：

import (
    "bufio"
    "encoding/json"
    "net/http"
    "os"
    "strings"

    "github.com/labstack/echo/v4"
)

// 定义日志项结构体，对应每行日志的字段
type LogItem struct {
    L string `json:"L"`
    T string `json:"T"`
    M string `json:"M"`
}

func GetLogsHandler(c echo.Context) error {
    logFilePath := "你的日志文件实际路径"
    file, err := os.Open(logFilePath)
    if err != nil {
        return c.JSON(http.StatusInternalServerError, map[string]string{"error": "日志文件打开失败"})
    }
    defer file.Close()

    var logList []LogItem
    // 逐行读取日志
    scanner := bufio.NewScanner(file)
    for scanner.Scan() {
        line := strings.TrimSpace(scanner.Text())
        if line == "" {
            continue // 跳过空行
        }
        // 单行内容反序列化为日志对象
        var item LogItem
        if err := json.Unmarshal([]byte(line), &item); err != nil {
            // 格式错误的行可根据需求选择跳过或记录报错
            continue
        }
        logList = append(logList, item)
    }

    if err := scanner.Err(); err != nil {
        return c.JSON(http.StatusInternalServerError, map[string]string{"error": "日志文件读取失败"})
    }

    // 直接返回数组，Echo会自动序列化为你需要的JSON数组格式
    return c.JSON(http.StatusOK, logList)
}

注意：你原本的读取逻辑存在风险，Read方法不保证一次性读完所有字节，且如果读取过程中文件被修改会出现异常，使用bufio.Scanner逐行读取更适配你每行一个JSON的日志格式。

替代方案：前端处理转义字符串 #

如果无法修改服务端代码，可在前端拿到响应后手动解析为数组，JS示例如下：

// 假设rawStr是接口返回的转义后字符串
const lineList = rawStr.split('\n')
const result = []
lineList.forEach(line => {
    const trimLine = line.trim()
    if (!trimLine) return
    try {
        const logItem = JSON.parse(trimLine)
        result.push(logItem)
    } catch (err) {
        // 格式错误的行可自行处理
        console.warn('无效日志行', line)
    }
})
// result即为目标JSON数组

内容的提问来源于stack exchange，提问作者Omkar Chavan