python全栈04-----豆瓣案例（上）

最新推荐文章于 2021-06-24 06:54:57 发布

zaaaacki

最新推荐文章于 2021-06-24 06:54:57 发布

阅读量138

点赞数

分类专栏： python全栈文章标签： python flask

本文链接：https://blog.csdn.net/zaaaacki/article/details/109191811

版权

本文档介绍了如何使用Python的Flask框架构建一个简单的豆瓣电影展示应用。首先创建了douban文件夹，设置了静态文件和模板文件的结构。然后逐步添加HTML元素，如标题、CSS样式、搜索框、电影信息（包括图片、名称和评分）。通过宏定义(itemGroup)简化重复代码，实现了动态加载电影数据。最后，展示了如何添加电视剧部分并限制显示数量。

摘要由CSDN通过智能技术生成

豆瓣案例

效果图

首先我们创建douban文件夹
再在douban文件夹中创建templates文件夹，放入我们的html模板
再在douban文件夹中创建static文件夹，放入我们的静态文件配置
- 在static文件夹中创建css文件夹，images文件夹，对我们的静态文件配置分类
在douban文件夹中创建douban.py文件

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def douban():
    return render_template('index.html')

if __name__=='__main__':
    app.run(debug=True)

创建index,html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

在body标签中写入标题：豆瓣评分
再将配置文件导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{
  {url_for('static',filename = 'css/base.css') }}">
    <link rel="stylesheet" href="{
  {url_for('static',filename = 'css/item.css') }}">
</head>
<body>
    <h1>豆瓣评分</h1>
</body>
</html>

打开网站

标题显示成功，配置文件导入成功
接下来调用css文件

base.css          这是base.css文件中的一部分用于展示
.container{
    width: 375px;
    height: 600px;
    background: pink;
}

<body>
    <h1>豆瓣评分</h1>
    <div class="container">

    </div>
</body>

打开网址

背景变为粉色

继续载入搜索框

<body>
    <h1>豆瓣评分</h1>
    <div class="container">
        <div class="search-group">
            <input type="text" class="search-input">
        </div>

    </div>
</body>

打开网址

我们继续写入电影和更多

<body>
    <h1>豆瓣评分</h1>
    <div class="container">
        <div class="sea

最低0.47元/天解锁文章

zaaaacki

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
python全栈04-----豆瓣案例（上）

豆瓣案例效果图首先我们创建douban文件夹再在douban文件夹中创建templates文件夹，放入我们的html模板再在douban文件夹中创建static文件夹，放入我们的静态文件配置在static文件夹中创建css文件夹，images文件夹，对我们的静态文件配置分类在douban文件夹中创建douban.py文件from flask import Flask,render_templateapp = Flask(__name__)@app.route('/
复制链接

扫一扫

专栏目录