当前位置：首页>python>Python-flask-1:搭建主页面

Python-flask-1:搭建主页面

2026-08-18 23:11:47

1：效果图

2：代码

目录结构

index.html

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metacontent="width=device-width, initial-scale=1.0"name="viewport"><title>豆瓣Top250数据可视化分析</title><metacontent=""name="descriptison"><metacontent=""name="keywords"><!-- Favicons --><linkhref="static/assets/img/favicon.png"rel="icon"><linkhref="static/assets/img/apple-touch-icon.png"rel="apple-touch-icon"><!-- Google Fonts --><linkhref="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900"rel="stylesheet"><!-- Vendor CSS Files --><linkhref="static/assets/vendor/bootstrap/css/bootstrap.min.css"rel="stylesheet"><linkhref="static/assets/vendor/icofont/icofont.min.css"rel="stylesheet"><linkhref="static/assets/vendor/boxicons/css/boxicons.min.css"rel="stylesheet"><linkhref="static/assets/vendor/animate.css/animate.min.css"rel="stylesheet"><linkhref="static/assets/vendor/venobox/venobox.css"rel="stylesheet"><linkhref="static/assets/vendor/aos/aos.css"rel="stylesheet"><!-- Template Main CSS File --><linkhref="static/assets/css/style.css"rel="stylesheet"></head><body><!-- ======= Header ======= --><headerid="header"><divclass="container"><divclass="logo float-left"><h1class="text-light"><ahref="/index"><span>DouBan</span></a></h1><!-- Uncomment below if you prefer to use an image logo --><!-- <a href="index.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>--></div><navclass="nav-menu float-right d-none d-lg-block"><ul><liclass="active"><ahref="/index">首页 <iclass="la la-angle-down"></i></a></li><li><ahref="/movie">电影</a></li><li><ahref="/score">评分</a></li><li><ahref="/word">词云</a></li><li><ahref="/team">团队</a></li></ul></nav><!-- .nav-menu --></div></header><!-- End Header --><!-- ======= Our Team Section ======= --><sectionid="team"class="team"><divclass="container"><divclass="section-title"><h2>豆瓣Top250数据可视化分析</h2><p>应用python爬虫、Flask框架、Echarts、WordCloud等技术实现</p></div><!-- ======= Counts Section ======= --><sectionclass="counts section-bg"><divclass="container"><divclass="row"><divclass="col-lg-3 col-md-6 text-center"data-aos="fade-up"><ahref="/movie"><divclass="count-box"><iclass="icofont-simple-smile"style="color: #20b38e;"></i><spandata-toggle="counter-up">250</span><p>经典电影</p></div></a></div><divclass="col-lg-3 col-md-6 text-center"data-aos="fade-up"data-aos-delay="200"><ahref="/score"><divclass="count-box"><iclass="icofont-document-folder"style="color: #c042ff;"></i><spandata-toggle="counter-up">521</span><p>评分报告</p></div></a></div><divclass="col-lg-3 col-md-6 text-center"data-aos="fade-up"data-aos-delay="400"><ahref="/word"><divclass="count-box"><iclass="icofont-live-support"style="color: #46d1ff;"></i><spandata-toggle="counter-up">1,463</span><p>词频统计</p></div></a></div><divclass="col-lg-3 col-md-6 text-center"data-aos="fade-up"data-aos-delay="600"><ahref="/team"><divclass="count-box"><iclass="icofont-users-alt-5"style="color: #ffb459;"></i><spandata-toggle="counter-up">15</span><p>团队成员</p></div></a></div></div></div></section><!-- End Counts Section --></div></section><!-- End Our Team Section --><!-- ======= Footer ======= --><footerid="footer"><divclass="container"><divclass="copyright">                &copy; python爬虫可视化分析实验</div><divclass="credits">                Douban Movie Top <ahref="https://movie.douban.com/top250"target="_blank"title="豆瓣Top250">豆瓣Top250</a> - Douban Movie <ahref="https://movie.douban.com/"title="豆瓣电影"target="_blank">豆瓣电影</a></div></div></footer><!-- End Footer --><ahref="#"class="back-to-top"><iclass="icofont-simple-up"></i></a><!-- Vendor JS Files --><scriptsrc="static/assets/vendor/jquery/jquery.min.js"></script><scriptsrc="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script><scriptsrc="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script><scriptsrc="static/assets/vendor/php-email-form/validate.js"></script><scriptsrc="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script><scriptsrc="static/assets/vendor/venobox/venobox.min.js"></script><scriptsrc="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script><scriptsrc="static/assets/vendor/counterup/counterup.min.js"></script><scriptsrc="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script><scriptsrc="static/assets/vendor/aos/aos.js"></script><!-- Template Main JS File --><scriptsrc="static/assets/js/main.js"></script><style>.copyrights {text-indent: -9999px;height: 0;line-height: 0;font-size: 0;overflow: hidden;        }</style><divclass="copyrights"id="links20210126">        Collect from <ahref="http://www.cssmoban.com/"title="网站模板">模板之家</a><ahref="https://www.chazidian.com/"title="查字典">查字典</a></div></body></html>

main.py

from flask import Flask, render_templateimport sqlite3app = Flask(__name__)# 路由解析：通过用户访问的路径，匹配相应函数@app.route('/')defindex():return render_template("index.html")# 返回首页@app.route('/index')defhome():return render_template("index.html")# 返回电影页面@app.route('/movie')defmovie():    datalist = []    con = sqlite3.connect("moveTop.db")  # 打开数据库    cur = con.cursor()  # 获取游标    sql = "select * from movieTop250"# sql查询语句    data = cur.execute(sql)  # 获取数据for item indata:# 将数据保存在列表中        datalist.append(item)    cur.close()  # 关闭游标    con.close()  # 关闭连接return render_template("movie.html", movies=datalist)# 返回评分界面@app.route('/score')defscore():return render_template("score.html")# 返回词云界面@app.route('/word')defword():return render_template("word.html")# 返回团队界面@app.route('/team')defteam():return render_template("team.html")if __name__ == '__main__':    app.run(debug=True)

本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。

Python-flask-1:搭建主页面

最新文章

热门文章

随机文章

Python-flask-1:搭建主页面

Linux 学了很久还停在命令行?建议把这 10 个项目啃一遍

学 Python,先吃透这 108 个高频词

最新文章

热门文章

随机文章