小明：最近我在做一个教材征订管理系统，想加个排行榜功能，你觉得怎么实现比较好？
小李：嗯，排行榜的话，首先得考虑数据结构和存储方式。你打算按什么来排？比如销量、订购人数，还是其他指标？
小明：我主要是想按订购数量来排，显示哪些教材最受欢迎。
小李：那好，先设计一个数据库表来记录每本教材的订购数量。可以有一个`books`表，里面包含教材ID、名称、价格等信息，再建一个`orders`表，记录每本书的订购次数。
小明：听起来不错，那具体怎么操作呢？
小李：我们可以用SQL来统计每个教材的订购数量。例如，使用GROUP BY和COUNT函数。然后根据这个结果生成排行榜。
小明：那我可以写一个查询语句来获取排名数据吗？
小李：当然可以。比如，你可以这样写：SELECT book_id, COUNT(*) AS total_orders FROM orders GROUP BY book_id ORDER BY total_orders DESC;
小明：这应该能返回所有教材的订购数量，然后排序。不过如果用户想看到前10名怎么办？
小李：可以在SQL中加上LIMIT 10，或者在后端代码里处理结果集，只取前10条。
小明：明白了。那我要怎么把这些数据展示到网页上呢？
小李：如果你用的是Web框架，比如Django或Spring Boot，可以将查询结果传给前端模板，然后用HTML和CSS展示成表格或列表。
小明：有没有更高级一点的展示方式？比如图表？
小李：当然可以。可以用ECharts或者Chart.js这样的JavaScript库，把数据渲染成柱状图或饼图。
小明：那我要怎么集成这些库呢？
小李：如果是前端页面，可以直接引入CDN链接，然后在HTML中初始化图表。后端只需要提供JSON格式的数据接口。
小明：好的，那我先尝试写一个简单的例子吧。
小李：没问题，我可以给你一个Python的例子，用Flask框架做后端，用Jinja2模板展示数据。
小明：太好了，那我们开始吧。
小李：首先，你需要创建一个Flask应用，并定义两个路由：一个用于显示排行榜，另一个用于获取数据。
小明：那数据库部分怎么处理？
小李：可以用SQLite或者MySQL。这里以SQLite为例，先创建一个`books`表和一个`orders`表。
小明：那具体的SQL语句是怎样的？
小李：可以这样写：
CREATE TABLE books (
id INTEGER PRIMARY KEY,
title TEXT NOT NULL,
author TEXT,
price REAL
);
CREATE TABLE orders (
id INTEGER PRIMARY KEY,
book_id INTEGER,
order_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
小明：那插入一些测试数据呢？
小李：比如，插入几本教材和几次订单，用来测试排行榜。
小明：那后端代码怎么写呢？
小李：接下来是Flask的代码，我们创建一个路由，获取排行榜数据。
小明：那代码应该怎么组织？
小李：大致结构如下：
from flask import Flask, render_template
import sqlite3
app = Flask(__name__)
def get_ranking():
conn = sqlite3.connect('school.db')
cursor = conn.cursor()
query = """
SELECT b.title, COUNT(*) AS count
FROM orders o
JOIN books b ON o.book_id = b.id
GROUP BY o.book_id
ORDER BY count DESC
LIMIT 10
"""
cursor.execute(query)
results = cursor.fetchall()
conn.close()
return results
@app.route('/ranking')
def ranking():
ranking_data = get_ranking()
return render_template('ranking.html', data=ranking_data)
if __name__ == '__main__':
app.run(debug=True)
小明：这个代码看起来没问题，那前端模板怎么写？
小李：可以用Jinja2模板引擎，比如创建一个`ranking.html`文件，内容如下：
教材排行榜
教材订购排行榜
教材名称 订购次数
{{ item[0] }}
{{ item[1] }}
{% endfor %}
小明：这样就能显示排行榜了，但我想让它更直观，比如用图表。
小李：没问题，我们可以用ECharts来展示数据。首先在HTML中引入ECharts的CDN。
小明：那具体怎么修改呢？
小李：修改后的`ranking.html`如下：
教材排行榜
教材订购排行榜
小明：这样看起来更好看，但需要传递数据到前端，对吧？
小李：没错，我们需要在后端将数据转换为JSON格式传给前端。
小明：那后端代码该怎么改？
小李：可以修改`get_ranking()`函数，返回JSON数据，同时调整路由。
小明：那具体的代码是什么？
小李：修改后的代码如下：
from flask import Flask, jsonify
import sqlite3
app = Flask(__name__)
def get_ranking_json():
conn = sqlite3.connect('school.db')
cursor = conn.cursor()
query = """
SELECT b.title, COUNT(*) AS count
FROM orders o
JOIN books b ON o.book_id = b.id
GROUP BY o.book_id
ORDER BY count DESC
LIMIT 10
"""
cursor.execute(query)
results = cursor.fetchall()
conn.close()
return [{'title': row[0], 'count': row[1]} for row in results]
@app.route('/api/ranking')
def api_ranking():
return jsonify(get_ranking_json())
if __name__ == '__main__':
app.run(debug=True)
小明：这样前端就可以通过AJAX请求获取数据了。
小李：是的，你可以用JavaScript发起GET请求，然后动态更新图表。
小明：那前端代码该怎么改？
小李：可以添加一个脚本，从API获取数据并绘制图表。
小明：那具体的代码是什么？
小李：修改后的HTML如下：
教材排行榜
教材订购排行榜
小明：这样就完成了！感觉挺有用的。
小李：是的，这个系统现在可以支持排行榜功能，还能扩展成更多分析模块，比如按时间范围筛选、用户推荐等。
小明：谢谢你的帮助，我学到了很多。
小李：不客气，继续加油！