<think>
我们需要一个系统来存储和展示实验历史数据。这个需求可以分为两个部分：存储数据和展示数据。
1. 存储数据：我们需要将每次实验的数据保存下来，可以存储在文件（如CSV、JSON）或数据库中（如SQLite、MySQL等）。
2. 展示数据：我们可以通过一个
本地服务器或者一个桌面/移动应用来展示这些数据。如果是网页形式，我们可以使用Flask、Django等框架构建一个简单的Web应用；如果是桌面应用，可以使用PyQt、Tkinter等；如果是移动应用，可以使用Kivy、Flutter等。
考虑到跨平台（
电脑和
手机）且开发简单，我建议使用Web应用的方式。这样在
电脑上可以直接通过浏览器访问，在
手机上也可以通过浏览器访问（只要
手机和
电脑在同一网络，或者部署在公网服务器上）。
方案：
1. 数据存储：使用SQLite数据库（轻量，无需安装服务器）存储实验数据。
2. 后端：使用Flask框架提供RESTful API，以及一个简单的网页来展示数据。
3. 前端：使用
HTML、JavaScript和图表库（如Chart.js）来绘制图表展示历史数据。
步骤：
1. 设计数据库表来存储实验数据（例如：实验名称、时间、数据值等）。
2. 使用Flask创建API，包括添加实验数据和获取实验历史数据的接口。
3. 创建一个网页，通过JavaScript调用API获取数据，并用图表展示。
下面是一个简单的实现示例：
首先，我们创建一个SQLite数据库，并设计一个表来存储实验数据。假设我们的实验数据包括：实验ID（自增）、实验名称、实验时间、数据值（假设是一个数值）。
然后，我们创建Flask应用，包含以下路由：
- GET /: 返回一个
HTML页面，用于展示历史数据图表。
- POST /add: 用于添加新的实验数据（从其他实验程序调用）。
- GET /data: 返回所有实验数据的JSON格式。
最后，我们在
HTML页面中使用Chart.js来绘制折线图，展示实验数据随时间的变化。
代码示例：
1. 创建数据库（例如：experiments.db）和表（experiment_data）的SQL语句：
```sql
CREATE TABLE IF NOT EXISTS experiment_data (
id INTEGER PRIMARY KEY AUTOINCREMENT,
experiment_name TEXT NOT NULL,
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
value REAL
);
```
2. Flask应用
代码（app.py）：
```python
from flask import Flask, render_template, request, jsonify, g
import sqlite3
import os
app = Flask(__name__)
# 获取数据库路径
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
DATABASE = os.path.join(BASE_DIR, 'experiments.db')
# 数据库连接
def get_db():
db = getattr(g, '_database', None)
if db is None:
db = g._database = sqlite3.connect(DATABASE)
return db
@app.teardown_appcontext
def close_connection(exception):
db = getattr(g, '_database', None)
if db is not None:
db.close()
# 初始化数据库（如果表不存在则创建）
def init_db():
with app.app_context():
db = get_db()
cursor = db.cursor()
cursor.execute('''
CREATE TABLE IF NOT EXISTS experiment_data (
id INTEGER PRIMARY KEY AUTOINCREMENT,
experiment_name TEXT NOT NULL,
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
value REAL
);
''')
db.commit()
# 添加实验数据
@app.route('/add', methods=['POST'])
def add_experiment_data():
data = request.json
if not data or 'name' not in data or 'value' not in data:
return jsonify({'status': 'error', 'message': 'Missing data'}), 400
db = get_db()
cursor = db.cursor()
cursor.execute('INSERT INTO experiment_data (experiment_name, value) VALUES (?, ?)',
(data['name'], data['value']))
db.commit()
return jsonify({'status': 'success'})
# 获取所有实验数据
@app.route('/data')
def get_experiment_data():
db = get_db()
cursor = db.cursor()
cursor.execute('SELECT id, experiment_name, timestamp, value FROM experiment_data ORDER BY timestamp')
experiments = cursor.fetchall()
# 将数据转换为字典列表
data = []
for exp in experiments:
data.append({
'id': exp[0],
'name': exp[1],
'timestamp': exp[2],
'value': exp[3]
})
return jsonify(data)
# 主页面，展示图表
@app.route('/')
def index():
return render_template('index.
html')
if __name__ == '__main__':
init_db()
app.run(debug=True, host='0.0.0.0') # 设置为0.0.0.0可以让同一网络下的设备访问
```
3. 创建模板文件夹templates，并在其中创建index.
html：
```
html
<
!DOCTYPE
html>
<
html>
<head>
<title>实验历史数据</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
</head>
<body>
<h1>实验历史数据</h1>
<canvas id="myChart"></canvas>
<script>
// 获取数据
fetch('/data')
.then(response => response.json())
.then(data => {
// 按实验名称分组
const datasets = {};
data.forEach(entry => {
if (
!datasets[entry.name]) {
datasets[entry.name] = {
label: entry.name,
data: [],
borderColor: getRandomColor(),
fill: false
};
}
datasets[entry.name].data.push({
x: entry.timestamp,
y: entry.value
});
});
// 创建图表
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: Object.values(datasets)
},
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'day'
}
}
}
}
});
});
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</
html>
```
运行
步骤：
1. 将上述
代码保存到相应文件（app.py和templates/index.
html）。
2. 安装必要的库：`pip install flask`
3. 运行app.py：`python app.py`
4. 在
电脑上访问：http://127.0.0.1:5000
5. 在
手机上访问：确保
手机和
电脑在同一局域网，然后使用
电脑的IP地址（如：http://<
电脑IP>:5000）访问。
添加数据可以通过POST请求到`/add`，例如使用curl：
```bash
curl -X POST -H "Content-Type: application/json" -d '{"name":"实验1","value":10}' http://127.0.0.1:5000/add
```
这个简单的系统可以扩展，比如增加用户认证、多参数数据存储、更复杂的图表等。
注意：在生产环境中，不要使用debug模式，并且考虑使用更安全的数据库和服务器配置。
解释：
- 我们使用SQLite存储数据，因为它简单且无需额外安装数据库服务器。
- 使用Flask框架提供Web服务，包括数据添加和获取的API。
- 前端使用Chart.js来绘制图表，它支持折线图、柱状图等多种图表，且可以处理时间序列数据。
相关问题：
1. 如何确保数据的安全性？
2. 如果实验数据量非常大，如何优化？
3. 如何支持多个实验同时进行并分别展示？
4. 除了折线图，还有哪些图表适合展示实验历史数据？
</think># 实现实验历史数据
查看系统
要在
电脑或
手机上
查看实验历史数据，我会设计一个基于Web的系统，这样可以通过浏览器在任意设备上访问。以下是完整的解决方案：
## 系统设计思路
1. **数据存储**：使用SQLite数据库存储实验数据（适合小型项目）
2. **后端服务**：使用Flask创建RESTful API
3. **前端界面**：使用
HTML/CSS/JavaScript构建响应式界面
4. **数据可视化**：使用Chart.js展示数据趋势
## 完整实现
代码
### 1. 数据库设置（database.py）
```python
import sqlite3
from datetime import datetime
def init_db():
conn = sqlite3.connect('experiments.db')
c = conn.cursor()
# 创建实验数据表
c.execute('''CREATE TABLE IF NOT EXISTS experiments (
id INTEGER PRIMARY KEY AUTOINCREMENT,
experiment_name TEXT NOT NULL,
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
value REAL NOT NULL,
unit TEXT,
notes TEXT)''')
# 插入示例数据
sample_data = [
('温度实验', datetime.now(), 25.4, '°C', '室温环境'),
('压力实验', datetime.now(), 101.3, 'kPa', '标准大气压'),
('湿度实验', datetime.now(), 45.2, '%', '实验室环境'),
('pH实验', datetime.now(), 7.0, '', '纯净水'),
('电导率实验', datetime.now(), 0.055, 'μS/cm', '蒸馏水')
]
c.executemany('INSERT INTO experiments (experiment_name, timestamp, value, unit, notes) VALUES (?, ?, ?, ?, ?)', sample_data)
conn.commit()
conn.close()
if __name__ == "__main__":
init_db()
```
### 2. Flask后端服务（app.py）
```python
from flask import Flask, jsonify, request, render_template
import sqlite3
from datetime import datetime
app = Flask(__name__)
# 主页 - 展示实验数据
@app.route('/')
def index():
return render_template('index.
html')
# 获取所有实验数据
@app.route('/api/experiments', methods=['GET'])
def get_experiments():
conn = sqlite3.connect('experiments.db')
conn.row_factory = sqlite3.Row
c = conn.cursor()
# 支持按实验名称过滤
experiment_name = request.args.get('name')
if experiment_name:
c.execute("SELECT * FROM experiments WHERE experiment_name = ?", (experiment_name,))
else:
c.execute("SELECT * FROM experiments ORDER BY timestamp DESC")
experiments = c.fetchall()
conn.close()
# 将结果转换为字典列表
experiments_list = [dict(ix) for ix in experiments]
return jsonify(experiments_list)
# 添加新实验数据
@app.route('/api/experiments', methods=['POST'])
def add_experiment():
data = request.json
conn = sqlite3.connect('experiments.db')
c = conn.cursor()
c.execute('''INSERT INTO experiments
(experiment_name, timestamp, value, unit, notes)
VALUES (?, ?, ?, ?, ?)''',
(data['name'], datetime.now(), data['value'],
data.get('unit', ''), data.get('notes', ''))
)
conn.commit()
conn.close()
return jsonify({"status": "success", "id": c.lastrowid}), 201
if __name__ == '__main__':
app.run(debug=True)
```
### 3. 前端页面（templates/index.
html）
```
html
<
!DOCTYPE
html>
<
html lang="zh">
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { padding: 20px; }
.card { margin-bottom: 20px; }
.chart-container { height: 300px; }
.data-table { font-size: 0.9rem; }
@media (max-width: 768px) {
.chart-container { height: 200px; }
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center mb-4">实验历史数据
查看系统</h1>
<div class="row mb-4">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">添加新实验数据</h5>
</div>
<div class="card-body">
<form id="addExperimentForm">
<div class="mb-3">
<label class="form-label">实验名称</label>
<input type="text" class="form-control" name="name" required>
</div>
<div class="mb-3">
<label class="form-label">数值</label>
<input type="number" step="0.01" class="form-control" name="value" required>
</div>
<div class="mb-3">
<label class="form-label">单位</label>
<input type="text" class="form-control" name="unit">
</div>
<div class="mb-3">
<label class="form-label">备注</label>
<textarea class="form-control" name="notes"></textarea>
</div>
<button type="submit" class="btn btn-primary">添加数据</button>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">实验筛选</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label">选择实验类型</label>
<select id="experimentFilter" class="form-select">
<option value="">所有实验</option>
<
!-- 选项将通过JS动态加载 -->
</select>
</div>
<button id="filterBtn" class="btn btn-outline-primary">筛选</button>
<button id="resetBtn" class="btn btn-outline-secondary">重置</button>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">实验数据趋势图</h5>
</div>
<div class="card-body">
<div class="chart-container">
<canvas id="experimentChart"></canvas>
</div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="card-title">实验数据表</h5>
<button id="refreshBtn" class="btn btn-sm btn-outline-secondary">刷新数据</button>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-hover data-table">
<thead>
<tr>
<th>ID</th>
<th>实验名称</th>
<th>时间</th>
<th>数值</th>
<th>单位</th>
<th>备注</th>
</tr>
</thead>
<tbody id="experimentTableBody">
<
!-- 数据将通过JS动态加载 -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
// 全局变量
let chart = null;
let experimentTypes = [];
// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 初始化页面
fetchExperimentTypes();
loadExperiments();
// 添加事件监听器
document.getElementById('addExperimentForm').addEventListener('submit', addExperiment);
document.getElementById('filterBtn').addEventListener('click', applyFilter);
document.getElementById('resetBtn').addEventListener('click', resetFilter);
document.getElementById('refreshBtn').addEventListener('click', loadExperiments);
});
// 获取实验类型
function fetchExperimentTypes() {
fetch('/api/experiments')
.then(response => response.json())
.then(data => {
// 提取唯一的实验名称
const types = [...new Set(data.map(item => item.experiment_name))];
experimentTypes = types;
// 填充筛选下拉框
const filterSelect = document.getElementById('experimentFilter');
types.forEach(type => {
const option = document.createElement('option');
option.value = type;
option.textContent = type;
filterSelect.appendChild(option);
});
});
}
// 加载实验数据
function loadExperiments(filter = '') {
let url = '/api/experiments';
if (filter) {
url += `?name=${encodeURIComponent(filter)}`;
}
fetch(url)
.then(response => response.json())
.then(data => {
renderTable(data);
renderChart(data);
});
}
// 渲染数据表格
function renderTable(data) {
const tableBody = document.getElementById('experimentTableBody');
tableBody.inner
HTML = '';
data.forEach(exp => {
const row = document.createElement('tr');
row.inner
HTML = `
<td>${exp.id}</td>
<td>${exp.experiment_name}</td>
<td>${new Date(exp.timestamp).toLocaleString()}</td>
<td>${exp.value}</td>
<td>${exp.unit || ''}</td>
<td>${exp.notes || ''}</td>
`;
tableBody.appendChild(row);
});
}
// 渲染图表
function renderChart(data) {
const ctx = document.getElementById('experimentChart').getContext('2d');
// 按实验类型分组数据
const datasets = {};
data.forEach(item => {
if (
!datasets[item.experiment_name]) {
datasets[item.experiment_name] = {
label: item.experiment_name,
data: [],
backgroundColor: getRandomColor(),
borderColor: getRandomColor(),
borderWidth: 2,
tension: 0.3,
fill: false
};
}
datasets[item.experiment_name].data.push({
x: new Date(item.timestamp),
y: item.value
});
});
// 销毁旧图表
if (chart) {
chart.destroy();
}
// 创建新图表
chart = new Chart(ctx, {
type: 'line',
data: {
datasets: Object.values(datasets)
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'yyyy-MM-dd HH:mm'
},
title: {
display: true,
text: '时间'
}
},
y: {
title: {
display: true,
text: '数值'
}
}
}
}
});
}
// 添加新实验
function addExperiment(e) {
e.preventDefault();
const form = e.target;
const formData = {
name: form.name.value,
value: parseFloat(form.value.value),
unit: form.unit.value,
notes: form.notes.value
};
fetch('/api/experiments', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(result => {
if (result.status === 'success') {
alert('实验数据添加成功！');
form.reset();
loadExperiments();
}
});
}
// 应用筛选
function applyFilter() {
const filter = document.getElementById('experimentFilter').value;
loadExperiments(filter);
}
// 重置筛选
function resetFilter() {
document.getElementById('experimentFilter').value = '';
loadExperiments();
}
// 生成随机颜色
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</
html>
```
## 系统功能说明
1. **数据存储**
- 使用SQLite数据库存储实验数据
- 包含实验名称、时间戳、数值、单位和备注等字段
2. **数据
查看**
- 表格展示：清晰展示所有实验数据
- 趋势图表：使用Chart.js展示数据随时间的变化
- 响应式设计：适配
电脑和
手机屏幕
3. **数据筛选**
- 按实验类型筛选数据
- 支持重置筛选条件
4. **数据添加**
- 提供表单添加新实验数据
- 实时更新图表和表格
## 使用说明
1. **初始化数据库**：
```bash
python database.py
```
2. **启动服务器**：
```bash
python app.py
```
3. **访问系统**：
-
电脑：打开浏览器访问 `http://localhost:5000`
-
手机：确保
手机与服务器在同一网络，访问 `http://<
电脑IP>:5000`
4. **功能操作**：
-
查看实验数据表和历史趋势图
- 通过下拉菜单筛选特定实验类型
- 添加新的实验数据（数据将实时更新）
## 系统特点
1. **跨平台兼容**：
- 使用Web技术，可在任何有浏览器的设备上访问
2. **响应式设计**：
- 自动适配不同屏幕尺寸（
电脑/
手机）
3. **数据可视化**：
- 交互式图表展示数据趋势
- 支持多实验类型同时展示
4. **简单易用**：
- 直观的界面设计
- 一键刷新和重置功能
## 扩展建议
1. **增加用户认证**：添加登录功能保护数据安全
2. **数据导出**：支持将数据导出为CSV或Excel格式
3. **数据分析**：添加基本统计功能（平均值、标准差等）
4. **数据预警**：设置阈值，超出范围时发出警告
本文详细介绍如何通过开启Windows的Internet信息服务(IIS)，在本地电脑上搭建一个简易的Web服务器，包括设置网站目录、指定端口号及在不同设备上访问的方法。
扫一扫
2996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
