1、利用https://bootstrapmade.com
https://colorlib.com/wp/templateshttps://colorlib.com/wp/free-bootstrap-admin-dashboard-templates
现有模板做网站,不必全部自己搭建,想要替换图标可以在【iconfont】网站找。
下载模板
index.html复制到templates文件夹里,assets复制到static文件夹里,forms没什么用不用管,再将之前爬到的数据库豆瓣电影250.db复制到目录下(可右键dbflask,选择reload from disk刷新)
2、
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('index.html')
if __name__ == '__main__':
app.run()
此时运行网页无法显示图片
如使用连接http://127.0.0.1:5000/assets/img/favicon.png进入上图选中的css图片,是找不到的,因为图片没有保存在同一路径,要在assets前加目录名static/才行
打开index.html文件,选中assets,ctrl+c,ctrl+r,将所有assets替换为static/assets,选择replace all
3、修改网页,分别制作四个网页:movie,score,word,team
from flask import Flask,render_template
import sqlite3
app = Flask(__name__)
@app.route('/')
def index():
return render_template("index.html")
@app.route('/index')
def home():
#return render_template('index.html')
return index()
@app.route('/movie')
def movie():
return render_template("movie.html")
@app.route('/score')
def score():
return render_template("score.html")
@app.route('/word')
def word():
return render_template("word.html")
@app.route('/team')
def team():
return render_template("team.html")
if __name__ == '__main__':
app.run()
4
4、movie页面
sqlite3数据库引入网页
@app.route('/movie')
def movie():
#查询数据库
datalist=[]#存储查询结果,不然data随着cur关闭就没了
con=sqlite3.connect("豆瓣电影250.db")
cur=con.cursor()
sql="select*from movie250"
data=cur.execute(sql)
for item in data:
datalist.append(item)
cur.close()
con.close()
#返回网页 把datalist放到movies这个变量里一起返回
return render_template("movie.html",movies=datalist)
5.score页面
echarts制作图表显示每个评分有多少部电影部电影
①将下载好的echarts复制到dbflask–>static–>assets–>js下面
②可以直接在官网–>实例 里面配置好想要的图表样式,然后右下角download,用pycharm打开可以得到完整的script代码(直接复制的话只能得到option,还要自己写别的)
③用sql获取dbmovie的数据改善图表,只需要改正两个data即可
④从数据库获取数据填入图表
@app.route('/score')
def score():#每个评分有多少部电影部电影
score=[]
num=[]
con = sqlite3.connect("豆瓣电影250.db")
cur = con.cursor()
sql = "select score,count(score) from movie250 group by score"
data = cur.execute(sql)
for item in data:
score.append(str(item[0]))#要注意和echarts格式一样,这个例子横坐标刚好是数字不改格式也能显示
num.append(item[1])
cur.close()
con.close()
return render_template("score.html",score=score,num=num)
6.word词云页面
https://editor.youkuaiyun.com/md/?articleId=106731193