flask를 사용하며 html 파일에 인자가 잘 안넘어가는것 같은데 어디서 잘못된건지 잘 모르겠네요...

flask 를 사용하며
할려고 하는 내용은 index.html 화일을 실행하면 왼쪽에 메뉴가 나오는데
거기서 "자료3" 을 선택하면 dataframe_html.html 의 내용이 나오게 할려고 합니다.

지금 나오는 결과는 dataframe 의 내용이 테이블형식으로 나오는게 아니하 하나의 사각형박스 안에 모두 나오고
제일 연장자를 구해서 테이블 위에 나오게 한 내용이나
dataframe_html.html 내용에서

등 tag로 표시한 부분은 전혀 나오지 않네요...

어느 부분에서 잘못 되었는지 아무리 봐도 잘 모르겠네요... 하나하나 배워가면서 처음 만드는 것이다 보니 .....
첨부한 화일은 1.server.py 2.index.html 3.dataframe_html.html 입니다

1.
'''

server.py

from flask import Flask, render_template, jsonify
import pandas as pd
import plotly.graph_objects as go

app = Flask(name)

@app.route("/", methods=['GET', 'POST'])
def index():
return render_template('index.html')

@app.route("/data3")
def data3():
# 예제 데이터프레임 생성
data = {'Name': ['Alice', 'Bob', 'Charlie'],
'Age': [25, 30, 22]}
df = pd.DataFrame(data)

# 데이터프레임을 HTML로 변환
df_html = df.to_html(escape=False)  # HTML 코드 이스케이프 비활성화

# 나이가 가장 많은 사람 정보 추출
oldest_person = df[df['Age'] == df['Age'].max()]

 # 템플릿에 넘겨줄 데이터 설정
oldest_name = oldest_person['Name'].iloc[0]
oldest_age = int(oldest_person['Age'].iloc[0])  # int로 변환
print(oldest_name, oldest_age)
return jsonify(df_html=df_html,
               oldest_name=oldest_name, oldest_age=oldest_age)

if name == 'main':
app.run(debug=True)

'''

2.
'''
<!DOCTYPE html>





경상북도 주요 지표



<link rel="stylesheet" href="../static/css/mdb.min.css" />
 <!--<link rel="stylesheet" href="../static/css/all.css" />-->
<!-- Google Fonts Roboto.https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap -->
<link rel="stylesheet" href="../static/css/all.csscss2_family" />


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />























278


New Posts















156


New Comments















64.89 %


Bounce Rate















423


Total Visits













<!-- Content for '고용노동위기지역' -->
<div class="content" id="content-employment-crisis" style="display: none;">
  <main style="margin-top: 58px">
    <div class="container pt-4">
  <!--Section: Minimal statistics cards-->
      <section>

        <div class="row">
          <div class="col-xl-3 col-sm-6 col-12 mb-4">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between px-md-1">
                  <div>
                    <h3 class="text-danger">278</h3>
                    <p class="mb-0">New Projects</p>
                  </div>
                  <div class="align-self-center">
                    <i class="fas fa-rocket text-danger fa-3x"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-sm-6 col-12 mb-4">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between px-md-1">
                  <div>
                    <h3 class="text-success">156</h3>
                    <p class="mb-0">New Clients</p>
                  </div>
                  <div class="align-self-center">
                    <i class="far fa-user text-success fa-3x"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-sm-6 col-12 mb-4">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between px-md-1">
                  <div>
                    <h3 class="text-warning">64.89 %</h3>
                    <p class="mb-0">Conversion Rate</p>
                  </div>
                  <div class="align-self-center">
                    <i class="fas fa-chart-pie text-warning fa-3x"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-sm-6 col-12 mb-4">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between px-md-1">
                  <div>
                    <h3 class="text-info">423</h3>
                    <p class="mb-0">Support Tickets</p>
                  </div>
                  <div class="align-self-center">
                    <i class="far fa-life-ring text-info fa-3x"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xl-3 col-sm-6 col-12 mb-4">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between px-md-1">
                  <div>
                    <h3 class="text-info">278</h3>
                    <p class="mb-0">New Posts</p>
                  </div>
                  <div class="align-self-center">
                    <i class="fas fa-book-open text-info fa-3x"></i>
                  </div>
                </div>
                <div class="px-md-1">
                  <div class="progress mt-3 mb-1 rounded" style="height: 7px">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 80%" aria-valuenow="80"
                      aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-sm-6 col-12 mb-4">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between px-md-1">
                  <div>
                    <h3 class="text-warning">156</h3>
                    <p class="mb-0">New Comments</p>
                  </div>
                  <div class="align-self-center">
                    <i class="far fa-comments text-warning fa-3x"></i>
                  </div>
                </div>
                <div class="px-md-1">
                  <div class="progress mt-3 mb-1 rounded" style="height: 7px">
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35"
                      aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-sm-6 col-12 mb-4">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between px-md-1">
                  <div>
                    <h3 class="text-success">64.89 %</h3>
                    <p class="mb-0">Bounce Rate</p>
                  </div>
                  <div class="align-self-center">
                    <i class="fas fa-mug-hot text-success fa-3x"></i>
                  </div>
                </div>
                <div class="px-md-1">
                  <div class="progress mt-3 mb-1 rounded" style="height: 7px">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="60"
                      aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-sm-6 col-12 mb-4">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between px-md-1">
                  <div>
                    <h3 class="text-danger">423</h3>
                    <p class="mb-0">Total Visits</p>
                  </div>
                  <div class="align-self-center">
                    <i class="fas fa-map-signs text-danger fa-3x"></i>
                  </div>
                </div>
                <div class="px-md-1">
                  <div class="progress mt-3 mb-1 rounded" style="height: 7px">
                    <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40"
                      aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!--Section: Statistics with subtitles-->
    </div>
  </main>
</div>

<!-- Content for '자료3' -->
<div class="content" id="content-data3" style="display: none;">
  <main style="margin-top: 38px">
    <div class="container pt-4">  
         <div id="dataframe-container" style="overflow-x:auto;"></div>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const menuData3 = document.getElementById('menu-data3');
        const dataframeContainer = document.getElementById('dataframe-container');
        const oldestNameElement = document.getElementById('oldest-name-html'); // Modified id

        menuData3.addEventListener('click', function () {
          fetch('/data3')
            .then(response => response.json())
            .then(data => {
              dataframeContainer.innerHTML = data.df_html;
              oldestNameElement.textContent = data.oldest_name; // Update oldest name
            });
        });
      });
    </script>

    </main>
    <!--Main layout-->
    </div>  
</div>






'''

  1. dataframe_html.html
    '''
    <!DOCTYPE html>


    DataFrame HTML Example

DataFrame HTML Example

전달 데이터

hello {{ oldest-name }} !!

My First Heading

제일 연장자는 {{ oldest_name }} 이며 {{ oldest_age }}살입니다.

My first paragraph.

{{ df_html|safe|e }}



'''

hope88 님 1078

2023년 8월 29일 2:50 오후

댓 글 (0) | 추 천 (0)
목록으로