二、后端：获取日志文件的信息，并以Json格式传至前端。

一、工程结构

在这里插入图片描述

type LogName struct {
	Name string
}

r := gin.Default()//使用gin框架
r.Static("static", "templates/static/")//加载静态资源
r.LoadHTMLGlob("templates/view/*")//加载页面
r.GET("/log", func(c *gin.Context) {
	pwd, _ := os.Getwd()//获取当前路径
	fileInfoList, _ := ioutil.ReadDir(pwd)//获取当前路径下文件列表
	logList := make([]model.LogName, 0)//准备用于存储日志文件名的数据结构
	for i := range fileInfoList {
		if path.Ext(fileInfoList[i].Name()) == ".log" || path.Ext(fileInfoList[i].Name()) == ".yaml" || path.Ext(fileInfoList[i].Name()) == ".txt" {//通过后缀过滤
			log := model.LogName{
					Name: fileInfoList[i].Name(),
				}
			logList = append(logList, log)
		}
	}
	s, _ := json.Marshal(logList)//序列化
	c.HTML(http.StatusOK, "log.html", gin.H{"information": string(s)})
})

三、前端：接收Json数据，动态生成表格，操作日志文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="hidden" id="list" name="list" value={{.information}}>//接收json数据,隐藏
<table>
    <thead>
    <tr>
        <td>name</td>
        <td>show</td>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script>
    var arr =JSON.parse($("#list").val());//解析json数据
    var tbody = document.querySelector('tbody');
    for (var i = 0; i < arr.length; i++) {//根据记录数动态为表格添加行
        var tr = document.createElement('tr')
        tbody.appendChild(tr);
        for (var k in arr[i]) {//根据单条记录中项数，动态为表格添加列
            var td = document.createElement('td');
            td.innerHTML = arr[i][k];
            tr.appendChild(td);
        }
        var td = document.createElement('td');//添加按钮列
        td.innerHTML=  '<a href="javascript:;">显示</a>';//链接指向js脚本
        tr.appendChild(td);
    }
    var a=document.querySelectorAll('a');
    for(var i=0;i<a.length;i++) {//为按钮添加监听器
        a[i].addEventListener('click', function (){
            window.open("http://ip/"+this.parentNode.parentNode.childNodes[0].textContent);
        })//a->td[1]->tr->td[0]->td[0].textContent
    }
</script>
</body>
</html>

yum -y install httpd#httpd或apache2
systemctl enable httpd
systemctl start httpd
ln -s 资源路径 /var/www/html/filename#将资源路径软链接至/var/www/html目录下
chmod o+x 资源路径#授予用户执行资源的权限

使用httpd为资源生成url。
需要注意：
1.路径和url的区别。
2.资源的访问权限。
3./etc/httpd/conf/httpd.conf配置文件中规定了支持的路径和格式。