Home.html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="{{url_for("static",filename="css/css.css")}}">
</head>
<body>
<h1>Welcome to recipe book</h1>
<p>{{length}}</p>
<script>
const amount = "{{length}}";
let list = {{images | tojson}};
const base_URL = "{{ url_for('static',filename='images') }}";
const altText = {0:"Breakfast",1:"Lunch",2:"Dinner",3:"Snacks"};
for(let count=0;count<amount;count++){
let current_image = document.createElement('img');
let Cur_URL = base_URL + "/" + list[count];
console.log(Cur_URL);
current_image.setAttribute("src",Cur_URL);
current_image.setAttribute('alt',altText[count]);
current_image.setAttribute('height','200');
current_image.setAttribute('width','auto');
document.body.appendChild(current_image);
}
</script>
</body>
</html>
main.py Flask python 文件：
#,redirect,url_for,send_from_directory,
from flask import Flask,render_template
import os
app = Flask(__name__)
@app.route("/")
def home():
parent = r"C:\Users\khait\Desktop\Website\Recipe_Book\static\images"
everything = os.listdir(parent)
images = []
for i in everything:
if os.path.isfile(os.path.join(parent,i)):
images.append(os.path.join(i))
length = len(images)
return render_template("Home.html",images=images,length=length)
if __name__ == "__main__":
app.run(debug=True)`
我只是想在我的 html 中使用长度变量。它会抛出与此行相关的错误：“const amount = {{length}};”和这一行“console.log(amount);”：
错误1： 预期属性分配.javascript
错误 2： 声明或声明预期。javascript
我知道对此有很多类似的问题，我也问了一个关于长度变量的类似问题。但这是一个数字烧瓶变量，这是一个列表烧瓶变量。我浏览了它们，但找不到我的问题的答案。我也有兴趣知道布尔、字符和字符串变量的正确语法是什么。我假设字典变量与列表变量具有相同的逻辑。正确的？ 任何帮助将不胜感激。
在你的 JavaScript 代码中使用 Flask 变量时，你需要小心处理它们在渲染 HTML 时如何转换为文本。让我们分解一下你的错误以及如何解决它们：
错误 1：预期属性赋值
这个错误是因为你的 Flask 变量
{{length}}
被渲染为 JavaScript 代码的一部分，从而导致语法无效。当你期望一个属性分配时，它看起来像是一个属性。
错误 2：声明或声明预期
这个错误的发生是因为，类似于第一个错误，
{{length}}
被渲染为 JavaScript 代码的一部分，并且没有被解释为一个变量。
解决方案
为了解决这些问题，你需要确保你的 JavaScript 代码能够正确地解释 Flask 变量。你可以通过以下方式做到这一点：
-
使用
tojson过滤器并将结果包装在单引号中:
```html
<script>
const amount = {{ length | tojson }};
let list = {{ images | tojson }};
const base_URL = "{{ url_for('static', filename='images') }}";
const altText = { 0: "Breakfast", 1: "Lunch", 2: "Dinner", 3: "Snacks" };
for (let count = 0; count < amount; count++) {
let current_image = document.createElement('img');
let Cur_URL = base_URL + "/" + list[count];
console.log(Cur_URL);
current_image.setAttribute("src", Cur_URL);
current_image.setAttribute('alt', altText[count]);
current_image.setAttribute('height', '200');
current_image.setAttribute('width', 'auto');
document.body.appendChild(current_image);
}
</script>
```
这将确保
length
被渲染为一个有效的 JavaScript 数字，并且
images
被渲染为一个 JavaScript 数组。
解释
-
tojson过滤器将 Python 数据结构转换为 JSON 格式，该格式可以直接在 JavaScript 中使用。 -
将
{{ length | tojson }}包装在单引号中可确保它被解释为一个 JavaScript 字符串，从而避免语法错误。
其他数据类型
-
布尔值:
{{ true | tojson }}将渲染为true。 -
字符串:
{{ "hello" | tojson }}将渲染为"hello"。 -
字典:
你可以使用与列表相同的
tojson过滤器。
通过使用
tojson
过滤器并将结果适当地包装，你可以安全地在 JavaScript 代码中使用来自 Flask 的不同数据类型。