base.html–(父模板页)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{# <link rel="stylesheet" href="/static/css/bootstrap.css">#}
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<style>
#top span{
color:red;
}
h1{
color: #2aabd2;
}
</style>
{% block style %}
{% endblock %}
</head>
<body>
<h1 align="center" >当当网书籍管理系统</h1>
<div id="top">
<span class="glyphicon glyphicon-pencil">
<a href="/analyseInfo">前五名出版数量</a></span>|
<span class="glyphicon glyphicon-th-list">
<a href="/">查看书籍信息</a></span>
</div>
<hr/>
{% block centent %}fo
{% endblock %}
</body>
</html>
indexhtml–(子模板页)
{% extends "base.html" %}
{% block centent %}
<table class="table table-striped">
<tr>
<td>编号</td>
<td>书名</td>
<td>价格</td>
<td>作者</td>
<td>出版社</td>
<td>出版日期</td>
<td>评论数</td>
</tr>
{% for book in books %}
<tr>
<td>{{ book["BookId"] }}</td>
<td>{{ book["Title"] |mysub}}</td>
<td>{{ book["Price"] }}元</td>
<td>{{ book["Author"] |mysub }}</td>
<td>{{ book["Press"] }}</td>
<td>{{ book["PubTime"] }}</td>
<td>{{ book["Rate"] }}</td>
</tr>
{% endfor %}
</table>
{% endblock %}
analyseInfo.html–(子模板页)
{% extends "base.html" %}
{% block centent %}
<script src="/static/js/echarts.min.js"></script>
<div id="main" style="width: 1000px;height:500px;" ></div>
<script type="text/javascript" >
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '出版社出版数量'
},
tooltip: {},
legend: {
data: ['评论数']
},
xAxis: {
data: {{ x |safe }}
},
yAxis: {},
series: [
{
name: '评论数',
type: 'bar',
data: {{ y }}
}
]
};
myChart.setOption(option);
</script>
{% endblock %}
myconfig.py–(密钥)
DEBUG=True
SECRET_KEY=("132455" "")
Mysql.py–(连接数据库)
import pymysql
class mysql:
def __init__(self):
# 建立连接
self.conn=pymysql.connect(host="127.0.0.1",user="root",passwd="123456",db="test")
# 基于连接得到游标
self.cursor=self.conn.cursor(pymysql.cursors.DictCursor)#默认返回的是元组格式,DictCursor是字典格式
# 让游标执行sql语句
# 查询customer表
def query(self,sql,args=None):
self.cursor.execute(sql,args)
# 通过游标对象的fetchall方法获取所有行
result=self.cursor.fetchall()
return result
# 增删改的通用方法,args用于向sql语句中的%s传递数据
def update(self,sql,args=None):
# sql="delete from goods where goodsid=%s"
result=self.cursor.execute(sql,args)
if result>0:
self.conn.commit() #提交
return True
else:
return False
app.py–(视图函数运行)
from flask import Flask, render_template, request, redirect, flash
from flask_bootstrap import Bootstrap
from Mysql import mysql
import pandas as pd
app = Flask(__name__)
app.config.from_pyfile("myconfig.py")
Bootstrap(app)
global rows
@app.route('/')
def index():
global rows
sqlunit = mysql()
sql="select * from books "
rows = sqlunit.query(sql)
print(rows)
return render_template("index.html",books=rows)
@app.template_filter("mysub") #mysub是注册过滤器的名字
def mysubstr(title):
#判断文字长度,如果超过15个,截取前15个文字,拼接...
if len(title)>15:
return title[0:15]+"..."
else: #文字不大于15,返回原文字
return title
@app.route('/analyseInfo')
def analyseInfo():
global rows
df=pd.DataFrame(rows)
newDf=df.groupby("Press").count()["BookId"].sort_values(ascending=False).head()
print(list(newDf.index))
print(list(newDf.values))
return render_template("analyseInfo.html",x=list(newDf.index),y=list(newDf.values))
if __name__ == '__main__':
app.run(debug=True)
版权声明:本文为m6190703原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。