原理：

通过 Python 调用 Shell 脚本去执行 Nginx Log 的相关命令，然后进行处理再请求 Requests 库来向后端定义好的接口来推送数据并展示。

Part1：收集端

import os
import requests
import json
import time

url="http://10.8.31.61:5555/GetNginxResource"
nginx_data={}

def exec_cmd(logname):
    nginx_cmd = "awk -F' ' '{print $21}' " + logname + " |sort |uniq -c"
    response = os.popen(nginx_cmd)
    nginx_data['data']=str(response.read()).replace("\n","")
    #print(nginx_data)
    response.close()
    return nginx_data

def httpPost(datas):
    header = {"Content-Type":"application/json"}
    resp_content = requests.post(url=url,data=json.dumps(datas),headers=header)
    #resp_content = json.loads(resp_content.content)
    print(resp_content.text)

if __name__ == '__main__':
    hostname=str(os.popen("hostname |awk -F'.' '{print $1}' |awk -F'-' '{print $2}'").read()).replace("\n","")
    while(1):
        data=exec_cmd("/home/q/nginx/logs/access_ars2.beta.shangri-la.com.log")
        data1=data['data'].split(",")
        dict1={}
        for i in data1:
            data2=i.strip().split(" ")
            if(len(data2)>=2):
                key,value=data2[1],data2[0]
                dict1[key]=value
            else:
                pass
        listkey=['200','204','206','301','302','304','400','401','403','404','415','499','500','503']
        dict2={}
        for i in listkey:
            if(i in dict1.keys()):
                dict2[i]=int(dict1[i])
        print(dict2)
        httpPost(dict(hostname=hostname,nginx_data=dict2))
        time.sleep(3600)

Part2：接收端

@resource.route('/GetNginxResource',methods=['POST'])
def GetNginxResource():
    '''接收来自linux上传的数据'''
    query = request.get_json()
    hostname = query["hostname"]
    nginx_data = query["nginx_data"]
    createtime = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
    sql = 'insert into nginx_log_info (hostname,nginx_data,create_time) VALUES '
    data = '("' + hostname + '","' + str(nginx_data) + '","' +  str(createtime) + '"'
    end = data + ")"
    sql = sql + end
    print(sql)
    db = conndb()
    db.execute_sql(sql)
    data = {'code': 200, 'message': 'success', 'status': '10000'}
    return json.dumps(data)

Part3：展示端

这部分主要分为以下两块内容：

第一块是页面请求

<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> Nginx Log信息
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.hostname" placeholder="环境" class="handle-input mr10" clearable @clear="clear_name"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="hostname" width="150" label="环境"></el-table-column>
                <el-table-column prop="nginx_data" width="800" label="nginx log统计信息"></el-table-column>
                <el-table-column prop="create_time"  label="创建时间"></el-table-column>
            </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pageIndex"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parseInt(pageTotal)">
          </el-pagination>
        </div>
    </div>
</template>

<script>
import server from '../api/request.js'
export default {
  name: 'InterfaceMem',
  data () {
    return {
      query: {
        hostname: '',
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      pageTotal: 0
    }
  },
  created () {
    this.getNginxData()
  },
  methods: {
    // 获取后端返回的真实数据
    getNginxData () {
      server({url: '/getNginxList', data: this.query, method: 'post'})
        .then(response => {
          console.log('**********')
          console.log(response)
          this.tableData = response.listdata
          console.log(this.tableData)
          console.log(this.tableData['nginx_data'])
          this.pageTotal = response.pageTotal || 5
        })
    },
    // 触发搜索按钮
    handleSearch () {
      server({url: '/getNginxList', data: this.query, method: 'post'})
        .then(response => {
          console.log(response)
          this.tableData = response.listdata
          console.log(this.tableData)
          this.pageTotal = response.pageTotal || 5
        })
    },
    // 分页导航
    handleSizeChange (val) {
      // console.log(val)
      this.$set(this.query, 'pageSize', val)
      // console.log(this.query)
      this.getNginxData()
    },
    // 翻页改变页码触发
    handleCurrentChange (val) {
      this.$set(this.query, 'pageIndex', val)
      this.getNginxData()
    },
    clear_name () {
      this.query.hostname = ''
      this.getNginxData()
    }
  }
}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>

第二块是后端请求处理

@resource.route('/getNginxList',methods=['POST'])
def getNginxList():
    '''fe的页面列表数据获取'''
    query = request.get_json()
    print(query)
    if (query["hostname"] == ""):
        sql1 = "select id,hostname,nginx_data,create_time from nginx_log_info  order by id DESC limit " + str(
            (query['pageIndex'] - 1) * query["pageSize"]) + "," + str(query["pageSize"])
        count_sql = "select count(*) from nginx_log_info"
        colume_sql = "select id from nginx_log_info"

    else:
        sql1 = "select id,hostname,nginx_data,create_time from nginx_log_info where hostname like '%" + str(query["hostname"]) + "%' order by id DESC" + " limit " + str(
            (query['pageIndex'] - 1) * query["pageSize"]) + "," + str(query["pageSize"])
        count_sql = "select count(*) from nginx_log_info where hostname like '%" + str(query["hostname"]) + "%' order by id DESC"
        colume_sql = "select id from nginx_log_info"

    sql2 = "select id,hostname,nginx_data,create_time from nginx_log_info"
    db = conndb()
    listdata = db.get_data(sql1, sql2)
    db = conndb()
    result = db.get_data(count_sql, colume_sql)
    print(result)
    pageTotal = result[0]['id']
    print(listdata)
    print(pageTotal)
    data = {'listdata': listdata, "pageTotal": pageTotal, "code": 200}
    return json.dumps(data)

Part4：页面展示