项目实训(六) —— flask将数据库数据传向HTML

本篇记录将flask内容读入前端的经验。

flask将后端数据传入前端有固定的语句。以根目录绑定的函数为例(以下最后一行)：

@app.route('/')
def show():
    result = read_data(user_ID)  # 读数据库并传到变量result内
    data = np.array(result)      # 列表转化为数组，便于操作
    # print(data)
    number = data.shape[0]       # 获取数组行数，即为记录信息条数
    return render_template('circle_show.html', user_data=data, food_number=number, user_id=user_ID, user_name=user_name)

return render_template()方法的第一个参数是指定返回的HTML，后续参数就是向该HTML传递参数的部分。以上将列表“result”强制转化为数组后，传入HTML,或许无此必要。

HTML内使用参数时，需要以固定的格式：用“{{ 名称 }}”标识该量由后端传入。

凡是传入的变量都可以直接在HTML内简单地使用：

<div id="ID">{{ user_id }}——{{ user_name }}</div>


for (var i = 0; i < {{food_number}}; i++)

但是如果想要用for循环有目的地展现一个传入的数组，就遇到了问题：for循环的循环关键参数 i 无法被传入的数组的下表识别。

在花费一天时间后，终于以jianjia2和Java script语言嵌套入HTML的方式得以解决。

主要思路是：

1. 建立新的数组，利用jianjia2按照列接收传入的二维数组的数据：

<script type="text/javascript">
     namearray=[]
     materialarray=[]
     timearray=[]
     picarray=[]
</script>

{% for data in user_data %}
     <script type="text/javascript">
            namearray.push('{{data[:][0]}}');
            materialarray.push('{{data[:][1]}}');
            timearray.push('{{data[:][2]}}');
            picarray.push('{{data[:][3]}}');
     </script>
{% endfor %}

2. 再Java script的for循环既可以自如使用新的含有原列表数据的数组了：

 <script>
 //遍历数据 利用下标的变化
 for (var i = 0; i < {{food_number}}; i++) {
     var j =i+1;
     var picname =picarray[i];
     
     document.write("<h2>" + j + '号菜谱' + "<h2/>");
     document.write("<h3>" + '菜名：'+ namearray[i] + "<h3/>");
     document.write("<h3>" + '材料：'+ materialarray[i] + "<h3/>");
     document.write("<img src= "+picname+">");
     document.write("<h3>" + '上传时间：'+ timearray[i] + "<h3/>");    
 }
</script>

此方法虽然解决的读取显示的问题，但无疑是以增大空间复杂度为代价而实现的，若后续能发现新的更好的方法，定加以替换。