flask原生sql 並映射到html

1. 後端代碼

其中數據庫配置，見文章

數據庫數據

from flask import Flask,session,render_template,redirect,request,url_for,flash
from exts import  db
import config
from models import  User,Admin,RentInfo,Car,FixCar
from decorators import user_login_required,admin_login_requried
import datetime
import traceback
app = Flask(__name__)
app.config.from_object(config)
db.init_app(app)


@app.route('/back/')
@admin_login_requried
def back():
    print("back")
    context = {
        'quarter_table':quarter_table()
    }
    resAdmin = Admin.query.all()

    return  render_template('back/back.html',**context)

def quarter_table():
    sql = "SELECT  *FROM quarter_table;"
    try:
        # 執行sql語句
        result = db.session.execute(sql).fetchall()
    except:
        # 拋出錯誤信息
        traceback.print_exc()
        # 如果發生錯誤則回滾
        db.rollback()
    return result

2. 前端HTML渲染

渲染效果

<div class="data-div">
      <div class="row tableHeader">
          <!--	col-lg-幾就是幾個寬度，bootstrap裏面定義的-->
          <div class="col-xs-2 "> 年份</div>
           <div class="col-xs-2 "> 季度</div>
          <div class="col-xs-2"> 租金收入</div>
          <div class="col-xs-2"> 不退押金收入</div>
          <div class="col-xs-2"> 總收入</div>
          <div class="col-xs-2"> 累計收入</div>
      </div>
      <div class="tablebody">

          <!-- 每一行-->
          {% for quarter in quarter_table %}
          <div class="row">
              <div class="col-xs-2 "> {{ quarter[0] }}</div>
              <div class="col-xs-2"> {{ quarter[1] }}</div>
              <div class="col-xs-2"> {{ quarter[2] }}</div>
              <div class="col-xs-2"> {{ quarter[3] }}</div>
              <div class="col-xs-2"> {{ quarter[4] }}</div>
              <div class="col-xs-2"> {{ quarter[6] }}</div>
          </div>
          {% endfor %}

      </div>
  </div>