Building a Server Monitoring Web Application with Vue, Element, ECharts, and Flask

The author’s project team needs to monitor server load and disk space across multiple test environments, so a web application is built using Vue, Element, ECharts for the frontend and Flask for the backend.

Frontend setup : Use Vue CLI to create a project, then add Element UI, vue‑echarts, and axios with commands like vue create server-monitor , vue add element , npm install vue-echarts --save , npm install axios --save . After building, the app runs on localhost:8080.

Backend service : Create a backend folder with run.py containing a Flask app that serves static files from the built Vue app and defines routes. Example code:

from flask import Flask, render_template, jsonify
app = Flask(__name__, static_folder="../server-monitor/dist", static_url_path="", template_folder="../server-monitor/dist")

@app.route('/')
def index():
    return render_template("index.html")

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

Running python run.py starts the backend on port 5000.

To collect monitoring data, a monitor.config file stores the server password, and SQLite with Peewee ORM stores metrics in tables system_disk_monitor and system_uptime .

Data collection uses Paramiko to SSH into the target server, execute df and uptime , parse the output, and save results to the database:

ssh = paramiko.SSHClient()
ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())
ssh.connect('192.168.199.208', 22, 'pi', SERVER_PASS)
stdin, stdout, stderr = ssh.exec_command('df')
occupation_result_list = stdout.read().decode('utf-8').split('\n')
stdin, stdout, stderr = ssh.exec_command('uptime')
uptime_result_list = stdout.read().decode('utf-8').split('\n')
ssh.close()

A Flask route /systemMonitor queries the latest records from the SQLite tables, assembles a JSON object, and returns it:

@app.route('/systemMonitor', methods=['GET'])
def systemMonitor():
    result = {}
    # query disk info
    system_disk_monitor_query = system_disk_monitor.select().order_by(-system_disk_monitor.id).limit(1).dicts()
    result['disk'] = {}
    for row in system_disk_monitor_query:
        result['disk']['size'] = row['size']
        result['disk']['used'] = row['used']
        result['disk']['time'] = row['update_time']
    # query uptime info
    system_uptime_query = system_uptime.select().order_by(-system_uptime.id).limit(60).dicts()
    result['uptime'] = {'average': [], 'time': []}
    for row in system_uptime_query:
        result['uptime']['average'].append(row['average'])
        result['uptime']['time'].append(row['update_time'].strftime('%H:%M'))
    return jsonify(result)

On the frontend, App.vue uses the mounted lifecycle hook to call the backend API with axios, then updates ECharts data bindings for disk usage pie chart and uptime line chart.

mounted() {
    axios({
        method: "GET",
        url: "http://localhost:5000/systemMonitor"
    }).then(data => {
        this.pie1.series[0].data[0].name = '已使用' + data.data["disk"]["used"] + 'G';
        this.pie1.series[0].data[0].value = data.data["disk"]["used"];
        this.pie1.series[0].data[1].name = '剩余' + (data.data["disk"]["size"] - data.data["disk"]["used"]) + 'G';
        this.pie1.series[0].data[1].value = data.data["disk"]["size"] - data.data["disk"]["used"];
        this.line1.xAxis.data = data.data["uptime"]["time"].reverse();
        this.line1.series[0].data = data.data["uptime"]["average"].reverse();
    })
}

After rebuilding the Vue app ( npm run build ) and restarting the Flask server, the monitoring dashboard displays real‑time load and disk usage data.

Further extensions : For multiple servers, add email alerts, adjust API and database schemas, and explore more advanced monitoring tools like psutil or integrate with crontab/Windows Task Scheduler.