niit-dev/web-backend
Archived
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: niit-dev:backend-dev
Branches Tags
niit-dev:main niit-dev:frontend-dev niit-dev:backend-dev niit-dev:producer-dev
...
pull from: niit-dev:main
Branches Tags
niit-dev:main niit-dev:frontend-dev niit-dev:backend-dev niit-dev:producer-dev

7 Commits
backend-de ... main

Author SHA1 Message Date
Gzs2406
a2c10eb54d fix:更新更新时间 2025-01-03 16:08:59 +08:00
Gzs2406
64a34cc63d fix:修复了python环境的依赖问题 调整docker 端口 2025-01-03 15:46:07 +08:00
Gzs2406
400503455b feat:添加Dockerfile 2025-01-03 15:41:14 +08:00
kaku
67627c1c66 Merge pull request 'frontend-dev' (#2) from frontend-dev into main 
Reviewed-on: #2
 2025-01-03 15:38:45 +08:00
Gzs2406
2897fe4b8e update:更新前端页面布局：郭志胜 2025-01-03 15:37:59 +08:00
Gzs2406
66b5d0d287 feat:完善前端页面郭志胜 2025-01-03 15:32:26 +08:00
kaku
b218c62ac7 Merge pull request 'backend-dev' (#1) from backend-dev into main 
Reviewed-on: #1
 2025-01-03 11:05:29 +08:00
10 changed files with 497 additions and 14 deletions
Expand all files Collapse all files

17
Dockerfile Normal file
View File

@@ -0,0 +1,17 @@
FROM python:3.12
# 设置工作目录
WORKDIR /app
# 将当前目录内容复制到位于容器的/app目录下
COPY . /app
# 安装依赖
RUN pip config set global.index-url https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple
RUN pip install --no-cache-dir -r requirements.txt
# 暴露容器的端口
EXPOSE 8000
# 在容器启动时运行app.py
CMD ["python", "main.py"]

2
config.ini
View File

@@ -1,6 +1,6 @@
[server] [server]
listen = 0.0.0.0 listen = 0.0.0.0
port = 8080 port = 8000
debug = true debug = true
[database] [database]

7
requirements.txt
View File

@@ -1,3 +1,4 @@
Flask == 3.1.0 Flask
pymysql == 1.1.1 pymysql
confluent-kafka == 2.7.0 confluent-kafka
kafka-python-ng

11
router/api.py
View File

@@ -12,7 +12,7 @@ def readKafka():
messages = [] messages = []
try: try:
# 读取消息，最多读取10条消息 # 读取消息，最多读取10条消息
msg = consumer.poll(timeout_ms=500, max_records=50) msg = consumer.poll(timeout_ms=1000, max_records=50)
for partition, msgs in msg.items(): for partition, msgs in msg.items():
for message in msgs: for message in msgs:
messages.append(raw_Data_to_jsonstr(message.value.decode('utf-8'))) messages.append(raw_Data_to_jsonstr(message.value.decode('utf-8')))
@@ -44,7 +44,7 @@ def orders_count_by_name():
messages = [] messages = []
try: try:
# 读取消息，最多读取10条消息 # 读取消息，最多读取10条消息
msg = consumer.poll(timeout_ms=500, max_records=50) msg = consumer.poll(timeout_ms=1000, max_records=50)
for partition, msgs in msg.items(): for partition, msgs in msg.items():
for message in msgs: for message in msgs:
jsondata = json.loads(message.value.decode('utf-8')) jsondata = json.loads(message.value.decode('utf-8'))
@@ -54,10 +54,11 @@ def orders_count_by_name():
finally: finally:
# 取消订阅并关闭消费者 # 取消订阅并关闭消费者
consumer.close() consumer.close()
print(messages)
return jsonify(messages) return jsonify(messages)
@api_bp.route('/stream/ordernamecount') @api_bp.route('/stream/ordernamecount')
def order_name_count(): def order_name_count():
consumer: KafkaConsumer = get_KafkaConsumer("order_name_count") consumer: KafkaConsumer = get_KafkaConsumer("order_name_count")
@@ -65,7 +66,7 @@ def order_name_count():
messages = [] messages = []
try: try:
# 读取消息，最多读取10条消息 # 读取消息，最多读取10条消息
msg = consumer.poll(timeout_ms=500, max_records=50) msg = consumer.poll(timeout_ms=1000, max_records=50)
for partition, msgs in msg.items(): for partition, msgs in msg.items():
for message in msgs: for message in msgs:
jsondata = json.loads(message.value.decode('utf-8')) jsondata = json.loads(message.value.decode('utf-8'))
@@ -87,7 +88,7 @@ def summary():
messages = [] messages = []
try: try:
# 读取消息，最多读取10条消息 # 读取消息，最多读取10条消息
msg = consumer.poll(timeout_ms=500, max_records=50) msg = consumer.poll(timeout_ms=1000, max_records=50)
for partition, msgs in msg.items(): for partition, msgs in msg.items():
for message in msgs: for message in msgs:
jsondata = json.loads(message.value.decode('utf-8')) jsondata = json.loads(message.value.decode('utf-8'))

16
router/page.py
View File

@@ -10,3 +10,19 @@ def index():
@page_bp.route('/show') @page_bp.route('/show')
def test(): def test():
return render_template('show.html') return render_template('show.html')
@page_bp.route('/ordercount')
def ordercount():
return render_template('ordercount.html')
@page_bp.route('/streamordersummary')
def streamodersummary():
return render_template('streamordersummary.html')
@page_bp.route('/streamordernamecount')
def streamodernamecount():
return render_template('streamordernamecount.html')
@page_bp.route('/streamsummary')
def streamsummary():
return render_template('streamsummary.html')

76
templates/index.html
View File

@@ -3,13 +3,81 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>哇哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</title> <title>订单信息实时统计系统</title>
<!-- 引入Bootstrap的CSS文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 为iframe添加适当的边距和样式 */
iframe {
border-radius: 8px; /* 圆角 */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影 */
width: 100%; /* 自适应宽度 */
height: 400px; /* 固定高度 */
}
/* 给容器添加一些间距 */
.container-fluid {
margin-top: 30px; /* 顶部间距 */
}
/* 设置页面标题的样式 */
h1 {
text-align: center;
margin-bottom: 30px;
}
/* 设置Chart容器的样式 */
.chart-container {
margin-bottom: 30px; /* 每个图表容器之间的间距 */
}
</style>
</head> </head>
<body> <body>
<div class="container"> <!-- 页面容器 使用container-fluid -->
<div> <div class="container-fluid mt-5">
<iframe src="/show" frameborder="0" width="500" height="600"></iframe></iframe>
<!-- 第一个图表容器放在最上面 -->
<div class="row">
<div class="col-12 chart-container">
<iframe src="/show" frameborder="0"></iframe>
</div> </div>
</div> </div>
<!-- 其他四个图表容器，分成两列一行 -->
<div class="row">
<!-- 第二个图表容器 -->
<div class="col-lg-6 col-md-6 col-sm-12 chart-container">
<iframe src="/ordercount" frameborder="0"></iframe>
</div>
<!-- 第三个图表容器 -->
<div class="col-lg-6 col-md-6 col-sm-12 chart-container">
<iframe src="/streamordersummary" frameborder="0"></iframe>
</div>
</div>
<div class="row">
<!-- 第四个图表容器 -->
<div class="col-lg-6 col-md-6 col-sm-12 chart-container">
<iframe src="/streamordernamecount" frameborder="0"></iframe>
</div>
<!-- 第五个图表容器 -->
<div class="col-lg-6 col-md-6 col-sm-12 chart-container">
<iframe src="/streamsummary" frameborder="0"></iframe>
</div>
</div>
<div class="row">
<h2>制作人员名单</h2>
<p>郭子奇：架构设计，服务器部署和Python代码调试</p>
<p>许家禾：spark streaming&spark core/rdd</p>
<p>李尧宇：环境部署，在Kafka中创建主题order用Python代码实现producer，并每隔5秒推送数据给Kafka的order主题</p>
<p>李烁升：使用spark streaming每隔两秒实时统计所有订单类别的数量</p>
<p>郭志胜：数据生产及数据展示</p>
<p>陈楠：使用spark sql统计各个订单的有效数和无效数量</p>
</div>
</div>
<!-- 引入Bootstrap的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

89
templates/ordercount.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态订单柱状图</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
canvas {
width: 100% !important;
height: 400px !important;
}
</style>
</head>
<body>
<h2>订单数量柱状图</h2>
<canvas id="orderChart"></canvas>
<script>
// 初始化图表数据
const ctx = document.getElementById('orderChart').getContext('2d');
const chartData = {
labels: [],
datasets: [{
label: '订单数量',
data: [],
backgroundColor: 'rgba(75, 192, 192, 0.6)', // 柱状图的颜色
borderColor: 'rgb(75, 192, 192)',
borderWidth: 1
}]
};
const config = {
type: 'bar', // 设置为柱状图
data: chartData,
options: {
responsive: true,
scales: {
x: {
type: 'category',
position: 'bottom',
},
y: {
beginAtZero: true,
ticks: {
stepSize: 1
}
}
}
}
};
const orderChart = new Chart(ctx, config);
// 获取数据并更新图表
function fetchDataAndUpdateChart() {
fetch('/api/orders-count')
.then(response => response.json())
.then(data => {
// 按照 order_name 分类，汇总 order_count 的数量
let orderNames = {};
data.forEach(order => {
const name = order.order_name;
const count = parseInt(order.order_count);
if (orderNames[name]) {
orderNames[name] += count;
} else {
orderNames[name] = count;
}
});
// 更新图表数据
chartData.labels = Object.keys(orderNames); // 使用订单名称作为X轴标签
chartData.datasets[0].data = Object.values(orderNames); // 使用订单数量作为Y轴数据
orderChart.update();
})
.catch(error => console.error('获取数据失败:', error));
}
// 每5秒更新一次图表数据
setInterval(fetchDataAndUpdateChart, 10000);
// 初始数据加载
fetchDataAndUpdateChart();
</script>
</body>
</html>

91
templates/streamordernamecount.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态订单数量图表</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
canvas {
width: 100% !important;
height: 400px !important;
}
</style>
</head>
<body>
<h2>订单名称数量动态图表</h2>
<canvas id="orderChart"></canvas>
<script>
// 初始化图表
const ctx = document.getElementById('orderChart').getContext('2d');
const chartData = {
labels: [], // X轴标签
datasets: [{
label: '订单数量',
data: [], // Y轴数据
borderColor: 'rgb(75, 192, 192)', // 线条颜色
backgroundColor: 'rgba(75, 192, 192, 0.2)', // 背景填充色
borderWidth: 1
}]
};
const config = {
type: 'bar', // 使用条形图
data: chartData,
options: {
responsive: true,
scales: {
x: {
type: 'category', // X轴使用类别型
position: 'bottom',
},
y: {
beginAtZero: true, // Y轴从0开始
ticks: {
stepSize: 1
}
}
}
}
};
const orderChart = new Chart(ctx, config);
// 获取数据并更新图表
function fetchDataAndUpdateChart() {
fetch('/api/stream/ordernamecount')
.then(response => response.json())
.then(data => {
// 统计每个订单名称的数量
let orderNames = {};
data.forEach(order => {
const name = order.order_name; // 获取订单名称
const count = order.order_name_count; // 获取订单数量
// 累加相同订单名称的数量
if (orderNames[name]) {
orderNames[name] += count;
} else {
orderNames[name] = count;
}
});
// 更新图表数据
chartData.labels = Object.keys(orderNames); // X轴标签为订单名称
chartData.datasets[0].data = Object.values(orderNames); // Y轴数据为订单数量
// 更新图表
orderChart.update();
})
.catch(error => console.error('获取数据失败:', error));
}
// 每5秒更新一次数据
setInterval(fetchDataAndUpdateChart, 10000);
// 初始数据加载
fetchDataAndUpdateChart();
</script>
</body>
</html>

100
templates/streamordersummary.html Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态订单数量图表</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
canvas {
width: 100% !important;
height: 400px !important;
}
</style>
</head>
<body>
<h2>订单数量动态图表</h2>
<canvas id="orderChart"></canvas>
<script>
// 初始化图表
const ctx = document.getElementById('orderChart').getContext('2d');
const chartData = {
labels: [], // X轴标签
datasets: [{
label: '订单数量',
data: [], // Y轴数据
borderColor: 'rgb(75, 192, 192)', // 线条颜色
backgroundColor: 'rgba(75, 192, 192, 0.2)', // 背景填充色
borderWidth: 1
}]
};
const config = {
type: 'line', // 使用折线图
data: chartData,
options: {
responsive: true,
plugins: {
legend: {
display: true, // 显示图例
}
},
scales: {
x: {
type: 'category', // X轴使用类别型
position: 'bottom',
},
y: {
beginAtZero: true, // Y轴从0开始
ticks: {
stepSize: 1
}
}
}
}
};
const orderChart = new Chart(ctx, config);
// 获取数据并更新图表
function fetchDataAndUpdateChart() {
fetch('/api/stream/ordersummary')
.then(response => response.json())
.then(data => {
console.log('Received data:', data);
// 统计每个时间点的订单数量
let orderCounts = {};
data.forEach(order => {
const status = order.status; // 获取订单时间
const count = order.count; // 获取订单数量
// 按时间统计数量
if (orderCounts[status]) {
orderCounts[status] += count;
} else {
orderCounts[status] = count;
}
});
console.log('Order counts:', orderCounts);
// 更新图表数据
chartData.labels = Object.keys(orderCounts); // 设置X轴标签为时间
chartData.datasets[0].data = Object.values(orderCounts); // 设置Y轴数据为订单数量
// 更新图表
orderChart.update();
})
.catch(error => console.error('获取数据失败:', error));
}
// 每10秒更新一次数据
setInterval(fetchDataAndUpdateChart, 10000);
// 初始数据加载
fetchDataAndUpdateChart();
</script>
</body>
</html>

100
templates/streamsummary.html Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>订单数量随时间变化图表</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
canvas {
width: 100% !important;
height: 400px !important;
}
</style>
</head>
<body>
<h2>订单数量随时间变化图表</h2>
<canvas id="orderChart"></canvas>
<script>
// 初始化图表
const ctx = document.getElementById('orderChart').getContext('2d');
const chartData = {
labels: [], // 时间戳标签
datasets: [{
label: '累计订单数量',
data: [], // 累计的订单数量
borderColor: 'rgb(75, 192, 192)', // 线条颜色
backgroundColor: 'rgba(75, 192, 192, 0.2)', // 背景填充色
borderWidth: 1,
fill: false
}]
};
const config = {
type: 'line', // 使用折线图
data: chartData,
options: {
responsive: true,
scales: {
x: {
type: 'linear', // X轴为线性类型
position: 'bottom',
title: {
display: true,
text: '时间 (秒)'
}
},
y: {
beginAtZero: true, // Y轴从0开始
ticks: {
stepSize: 1
},
title: {
display: true,
text: '订单数量'
}
}
}
}
};
const orderChart = new Chart(ctx, config);
// 获取数据并更新图表
function fetchDataAndUpdateChart() {
fetch('/api/stream/summary')
.then(response => response.json())
.then(data => {
// 累计订单数量
let cumulativeCount = 0;
let labels = [];
let counts = [];
data.forEach(order => {
const status = order.status; // 获取订单时间
const count = order.count; // 获取订单数量
cumulativeCount += count; // 累加数量
labels.push(status); // 保存时间戳
counts.push(cumulativeCount); // 保存累计数量
});
// 更新图表数据
chartData.labels = labels; // 设置时间戳为X轴标签
chartData.datasets[0].data = counts; // 设置累计的订单数量为Y轴数据
// 更新图表
orderChart.update();
})
.catch(error => console.error('获取数据失败:', error));
}
// 每5秒更新一次数据
setInterval(fetchDataAndUpdateChart, 10000);
// 初始数据加载
fetchDataAndUpdateChart();
</script>
</body>
</html>