推荐轮播展示的flask框架代码
时间: 2023-10-25 13:36:09 浏览: 117
Python基于Flask框架在线电影视频播放网站+源代码+文档说明+数据库.zip
5星 · 资源好评率100%
以下是一个基于 Flask 框架实现的推荐轮播展示的示例代码:
```python
from flask import Flask, render_template
app = Flask(__name__)
# 推荐结果
recommendations = [
{'name': '推荐项1', 'img_url': '/static/imgs/item1.jpg', 'description': '推荐项1的描述', 'score': 9.2},
{'name': '推荐项2', 'img_url': '/static/imgs/item2.jpg', 'description': '推荐项2的描述', 'score': 8.5},
{'name': '推荐项3', 'img_url': '/static/imgs/item3.jpg', 'description': '推荐项3的描述', 'score': 7.8},
{'name': '推荐项4', 'img_url': '/static/imgs/item4.jpg', 'description': '推荐项4的描述', 'score': 7.2},
{'name': '推荐项5', 'img_url': '/static/imgs/item5.jpg', 'description': '推荐项5的描述', 'score': 6.9},
]
@app.route('/')
def index():
return render_template('index.html', recommendations=recommendations)
if __name__ == '__main__':
app.run()
```
在上面的代码中,我们首先定义了一个包含推荐结果的列表 `recommendations`,每个推荐项包括名称、图片 URL、描述和评分等信息。
然后,我们定义了一个路由 `/`,当用户访问网站首页时,将渲染模板文件 `index.html`,并将推荐结果传递给模板。
最后,我们启动了 Flask 应用,并让它在本地运行。
在模板文件 `index.html` 中,我们可以通过循环遍历推荐项列表,并使用 Bootstrap 的 Carousel 组件来实现推荐轮播展示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>推荐轮播展示</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
{% for i in range(len(recommendations)) %}
<li data-target="#carouselExampleIndicators" data-slide-to="{{i}}" {% if i == 0 %}class="active"{% endif %}></li>
{% endfor %}
</ol>
<div class="carousel-inner">
{% for i, item in enumerate(recommendations) %}
<div class="carousel-item {% if i == 0 %}active{% endif %}">
<img src="{{item['img_url']}}" class="d-block w-100" alt="{{item['name']}}">
<div class="carousel-caption d-none d-md-block">
<h5>{{item['name']}}</h5>
<p>{{item['description']}}</p>
<p>评分:{{item['score']}}</p>
</div>
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">上一个</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">下一个</span>
</a>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
```
在上面的模板文件中,我们使用了轮播组件的 HTML 结构,并在其中嵌入了 Flask 的模板语法,以便动态地渲染推荐项列表。
最后,我们还引入了 jQuery 和 Bootstrap 的 JavaScript 文件,以便轮播组件可以正常工作。
当用户访问网站首页时,将会看到一个包含推荐项的轮播展示,用户可以通过点击左右箭头或者指示器来切换推荐项。
阅读全文