一、准备工作
- file->new objects;
- 新建文件夹static,js;
- 新建app.py,mysql.py;
- 新建模版文件base.html,展示文件index.html,数量文件show.html
- 在Bootstrap这里下载js和css
- 在echarts在柱状图
二、app.py
from flask import Flask,render_template,request
from mysql import mysql
import pandas as pd
app=Flask(__name__)
global rows
@app.route("/")
def index():
global rows
db=mysql()
sql="select * from books"
rows=db.query(sql)
return render_template("index.html",rows=rows)
@app.route("/theshy")
def theshy():
global rows
df=pd.DataFrame(rows)
print(df)
df2=df.groupby("Press").count()["BookId"].sort_values(ascending=False).head()
return render_template("power.html",x=list(df2.index),y=list(df2))
@app.template_filter("filter")
def filter(tt):
# global rows
# tt=pd.DataFrame(rows)
if len(tt)>15:
return tt[:15]+"..."
else:
return tt
if __name__ == '__main__':
app.run(debug=True,port=1234)
三、mysql.py
```python
import pymysql
class mysql():
def __init__(self,db="test"):
self.conn=pymysql.connect(host="127.0.0.1",db=db,user="root",password="123456")
self.cursor=self.conn.cursor(pymysql.cursors.DictCursor)
def query(self,sql,args=None):
self.cursor.execute(sql,args=args)
return self.cursor.fetchall()
def update(self,sql,args=None):
num=self.cursor.execute(sql,args=args)
self.conn.commit()
if num:
return True
else:
return False
def close(self):
self.conn.close()
四、base.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/css/bootstrap.css">
{% block style %}
{% endblock %}
</head>
<body>
<h2 align="center">当当网书籍信息</h2>
<p>
<a href="/theshy">
<span class="glyphicon glyphicon-indent-left">前五条数据</span>
</a>|
<a href="/">
<span class="glyphicon glyphicon-th-list">书籍详细信息</span>
</a>
<hr />
</p>
{% block content %}
{% endblock %}
{% block scripts %}
{% endblock %}
</body>
</html>
五、index.html
{% extends "base.html" %}
{% block content %}
<table class="table table-striped">
<tr>
<th>编号</th>
<th>书名</th>
<th>价格</th>
<th>作者</th>
<th>出版社</th>
<th>出版日期</th>
<th>评论数</th>
</tr>
{% for row in rows %}
<tr>
<td>{{ row["BookId"] }}</td>
<td>{{ row["Title"]|filter }}</td>
<td>{{ row["Price"] }}</td>
<td>{{ row["Author"] |filter}}</td>
<td>{{ row["Press"] }}</td>
<td>{{ row["PubTime"] }}</td>
<td>{{ row["Comments"] }}</td>
</tr>
{% endfor %}
</table>
{% endblock %}
六、show.html
{% extends "base.html" %}
{% block content %}
<div id="box" style="width: 800px;height: 900px;margin: 0 auto"></div>
<script src="static/js/echarts.min.js"></script>
<script>
myecharts=echarts.init(document.getElementById("box"))
option = {
title : {
text: '当当网图书出版社统计',
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['图书出版社']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : {{ x|safe }}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'图书出版社',
type:'bar',
data:{{ y|safe }}
},
]
};
myecharts.setOption(option)
</script>
{% endblock %}```