<think>根据您提供的Vue运行地址，我们需要确保Flask后端与Vue前端能够正确交互。之前的代码已经配置了CORS，允许所有来源的请求。但是，为了确保前端能够正确调用后端API，我们需要确认以下几点：1.Vue前端调用后端的地址是否正确（例如，在Vue中配置代理或直接使用Flask的地址和端口）2.
上传文件的请求格式是否与后端匹配###前端调用示例假设您的Vue项目运行在`http
://localhost
:5177`，而Flask运行在`http
://localhost
:5000`，由于端口不同，存在跨域问题。虽然Flask已经配置了CORS，但开发时也可以配置Vue的代理。###配置Vue代理（可选）在Vue项目的`vite.config.js`（如果使用Vite）中配置代理：```javascript//vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig
({plugins
:[vue
()],server
:{proxy
:{'/api'
:{target
:'http
://localhost
:5000',//Flask后端地址changeOrigin
:true,rewrite
:(path
)=>path.replace
(/^\/api/,''
)}}}}
)```这样，前端发往`/api/upload`的请求会被代理到`http
://localhost
:5000/upload`。###前端
上传文件代码示例在Vue组件中，
上传文件的代码可能如下：```vue<template><div><inputtype="
file"multiple@change="handle
FileUpload"/><button@click="upload
Files">
上传</button></div></template><script>importaxiosfrom'axios';exportdefault{
data(){return{
files
:[],sensorType1
:'MP2',gasType1
:'acetone',concentration1
:20,sensorType2
:'MP2',gasType2
:'acetone',concentration2
:20};},methods
:{handle
FileUpload
(event
){this.
files=event.target.
files;},upload
Files
(){constform
Data=newForm
Data();//添加多个
文件for
(leti=0;i<this.
files.length;i++
){form
Data.append
('
files',this.
files[i]
);}//添加其他表单数据form
Data.append
('sensor_type1',this.sensorType1
);form
Data.append
('gas_type1',this.gasType1
);form
Data.append
('concentration1',this.concentration1
);form
Data.append
('sensor_type2',this.sensorType2
);form
Data.append
('gas_type2',this.gasType2
);form
Data.append
('concentration2',this.concentration2
);//发送请求axios.post
('http
://localhost
:5000/upload',form
Data,{headers
:{'Content-Type'
:'multipart/form-
data'}}
).then
(response=>{console.log
('
上传成功',response.
data);}
).catch
(error=>{console.error
('
上传失败',error
);}
);}}};</script>```###后端代码调整之前给出的Flask后端代码已经支持
文件上传和表单数据。但请注意，我们在`/upload`路由中同时处理
文件（`request.
files`）和表单数据（`request.form`）。###调试建议如果前端调用后端仍然出现跨域问题，可以检查：1.Flask的CORS配置是否正确（之前的代码已经配置）2.浏览器控制台是否有CORS错误（如缺少`Access-Control-Allow-Origin`头）3.后端是否对OPTIONS请求做了处理（Flask-CORS会自动处理）###完整Flask代码由于之前已经提供了完整的`app.py`，这里不再重复。请确保使用之前提供的完整版本。###问题排查步骤1.**
测试后端API**：使用Postman或
curl测试上传功能：```bash
curl-XPOST-F"
files=@test.csv"-F"sensor_type1=MP2"-F"gas_type1=acetone"-F"concentration1=20"http
://localhost
:5000/upload```2.**检查Flask日志**：运行Flask时确保开启debug模式（`debug=True`），查看控制台日志。3.**检查前端请求**：在浏览器开发者工具的Network标签中检查请求是否正确，包括Form
Data部分。4.**检查CORS响应头**：在Network中查看响应是否包含：```Access-Control-Allow-Origin
:*```###如果仍然遇到问题如果按照以上步骤仍然遇到问题，请提供具体的错误信息（前端控制台错误、Flask日志错误等），以便进一步排查。§§相关问题§§
:1.如何在Vue中实现
文件上传进度显示？2.如何优化Flask处理大
文件上传的性能？3.在跨域请求中，如何处理身份验证（如JWT）？4.如何在前端优雅地处理后端返回的错误信息？</think>根据您的Vue运行地址（http
://localhost
:5177/），我将提供一个完整的Flask与Vue集成
解决方案，确保前后端无缝对接。以下是优化后的完整代码：
### 完整的Flask后端代码
(app.py
)
```python
from flask import Flask, request, jsonify, send_from_directory
from flask_cors import CORS
import os
import pandas as pd
import numpy as np
from werkzeug.utils import secure_
filename
from sklearn.model_selection import train_test_split
from sklearn.preprocessing import StandardScaler
from sklearn.neighbors import KNeighborsClassifier
from sklearn.svm import SVC
from sklearn.ensemble import RandomForestClassifier
from sklearn.metrics import accuracy_score, classification_report
import logging
import time
# 配置日志
logging.basicConfig
(
level=logging.DEBUG,
format='%
(asctime
)s - %
(name
)s - %
(levelname
)s - %
(message
)s',
handlers=[
logging.StreamHandler
(), # 输出到控制台
logging.
FileHandler
('app.log', encoding='utf-8'
) # 输出到
文件
]
)
logger = logging.getLogger
(__name__
)
app = Flask
(__name__
)
app.config['MAX_CONTENT_LENGTH'] = 100 * 1024 * 1024 # 100MB
文件大小限制
# 配置CORS允许Vue前端访问
CORS
(app, resources={
r"/*"
: {
"origins"
: "http
://localhost
:5177", # 指定Vue前端地址
"methods"
: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
"allow_headers"
: ["Content-Type", "Authorization"],
"supports_credentials"
: True
}
}
)
# 配置
上传文件夹
UPLOAD_FOLDER = 'uploads'
if not os.path.exists
(UPLOAD_FOLDER
):
os.makedirs
(UPLOAD_FOLDER
)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
# 允许的
文件扩展名
ALLOWED_EXTENSIONS = {'csv', 'xlsx', 'xls'}
# 全局数据集存储
dataset = None
gas_types = []
concentrations = []
sensor_types = []
last_activity = time.time
()
def allowed_
file(filename
):
"""检查
文件扩展名是否合法"""
return '.' in
filename and \
filename.rsplit
('.', 1
)[1].lower
() in ALLOWED_EXTENSIONS
def load_and_merge_
files
(files
):
"""加载并合并多个数据
文件"""
global
dataset, gas_types, concentrations, sensor_types, last_activity
dfs = []
for
file in
files
:
try
:
# 安全保存
文件
filename = secure_
filename
(file.
filename
)
file_path = os.path.join
(app.config['UPLOAD_FOLDER'],
filename
)
file.save
(file_path
)
logger.info
(f"Saved
file: {
file_path}"
)
# 根据
文件类型加载数据
if
filename.endswith
('.csv'
):
df = pd.read_csv
(file_path
)
elif
filename.endswith
(('.xlsx', '.xls'
)):
df = pd.read_excel
(file_path
)
else
:
logger.warning
(f"Unsupported
file type
: {
filename}"
)
continue
# 添加
文件来源标记（可选）
df['source_
file'] =
filename
dfs.append
(df
)
logger.info
(f"Loaded
file: {
filename}, shape
: {df.shape}"
)
# 记录前几行数据用于调试
logger.debug
(f"
File {
filename} head
:\n{df.head
()}"
)
except Exception as e
:
logger.error
(f"Error loading
file {
file.
filename}
: {str
(e
)}", exc_info=True
)
continue
# 合并所有数据
if dfs
:
dataset = pd.concat
(dfs, ignore_index=True
)
logger.info
(f"Merged
dataset shape
: {
dataset.shape}"
)
# 重置全局变量
gas_types = []
concentrations = []
sensor_types = []
last_activity = time.time
()
return True
return False
def preprocess_
data():
"""预处理数据集"""
global
dataset, last_activity
if
dataset is None
:
logger.error
("No
dataset available for preprocessing"
)
return False
try
:
# 1. 确保所有列名都是字符串
dataset.columns =
dataset.columns.astype
(str
)
logger.info
(f"Column names converted to strings
: {list
(dataset.columns
)}"
)
# 2. 处理缺失值
initial_row_count = len
(dataset
)
dataset.dropna
(inplace=True
)
dropped_rows = initial_row_count - len
(dataset
)
logger.info
(f"Dropped {dropped_rows} rows with missing values. New shape
: {
dataset.shape}"
)
# 3. 删除不必要的列
if 'source_
file' in
dataset.columns
:
dataset.drop
('source_
file', axis=1, inplace=True
)
logger.info
("Dropped 'source_
file' column"
)
# 4. 特征工程 - 检测传感器列
sensor_columns = []
for col in
dataset.columns
:
# 确保列名是字符串并检查前缀
col_lower = col.lower
()
if 'sensor' in col_lower or 'detector' in col_lower
:
sensor_columns.append
(col
)
# 5. 添加传感器平均值特征
if sensor_columns
:
dataset['sensor_mean'] =
dataset[sensor_columns].mean
(axis=1
)
logger.info
(f"Added 'sensor_mean' feature using {len
(sensor_columns
)} columns"
)
else
:
logger.warning
("No sensor columns found.
Creating placeholder features"
)
# 创建占位特征以避免后续错误
dataset['sensor_mean'] = 0.0
# 6. 检查目标列是否存在
if 'label' not in
dataset.columns
:
logger.error
("Required 'label' column not found in
dataset"
)
return False
# 7. 特征缩放
scaler = StandardScaler
()
numeric_cols =
dataset.select_dtypes
(include=['float64', 'int64']
).columns
# 排除目标列和可能存在的非数值列
numeric_cols = [col for col in numeric_cols if col != 'label']
if len
(numeric_cols
) > 0
:
dataset[numeric_cols] = scaler.fit_transform
(dataset[numeric_cols]
)
logger.info
(f"Scaled {len
(numeric_cols
)} numeric features"
)
else
:
logger.warning
("No numeric columns found for scaling"
)
last_activity = time.time
()
return True
except Exception as e
:
logger.error
(f"Preprocessing
failed: {str
(e
)}", exc_info=True
)
# 添加详细日志以便调试
if
dataset is not None
:
logger.debug
(f"
Dataset columns
: {list
(dataset.columns
)}"
)
logger.debug
(f"
Dataset dtypes
:\n{
dataset.dtypes}"
)
logger.debug
(f"
Dataset head
:\n{
dataset.head
()}"
)
return False
@app.route
('/'
)
def index
():
"""健康检查端点"""
global last_activity
status = {
'status'
: 'running',
'version'
: '1.0.0',
'last_activity'
: time.ctime
(last_activity
),
'endpoints'
: {
'/upload'
: 'POST - Upload
data files',
'/analyze'
: 'POST - Analyze
data',
'/reset'
: 'POST - Reset
data',
'/columns'
: 'GET - Get
dataset columns',
'/status'
: 'GET - Service status'
}
}
logger.info
(f"Status request
: {status}"
)
return jsonify
(status
)
@app.route
('/status'
)
def status
():
"""服务状态检查"""
return jsonify
({
'status'
: 'active',
'timestamp'
: time.time
(),
'
dataset_loaded'
: dataset is not None,
'
dataset_shape'
: dataset.shape if
dataset is not None else None
}
)
@app.route
('/upload', methods=['POST']
)
def upload_
files
():
"""处理
文件上传"""
global gas_types, concentrations, sensor_types, last_activity
logger.info
("Received upload request"
)
# 检查是否有
文件
if '
files' not in request.
files
:
logger.error
("No
file part in request"
)
return jsonify
({'error'
: 'No
file part'}
), 400
files = request.
files.getlist
('
files'
)
if len
(files
) == 0 or
files[0].
filename == ''
:
logger.error
("No selected
files"
)
return jsonify
({'error'
: 'No selected
files'}
), 400
# 过滤合法
文件
valid_
files = [f for f in
files if allowed_
file(f.
filename
)]
if not valid_
files
:
logger.error
("No valid
files found"
)
return jsonify
({'error'
: 'No valid
files. Only CSV, XLSX, XLS are allowed.'}
), 400
# 从表单获取传感器和气体信息
try
:
sensor_type1 = request.form.get
('sensor_type1', 'MP2'
)
gas_type1 = request.form.get
('gas_type1', 'acetone'
)
concentration1 = float
(request.form.get
('concentration1', 20
))
sensor_type2 = request.form.get
('sensor_type2', 'MP2'
)
gas_type2 = request.form.get
('gas_type2', 'acetone'
)
concentration2 = float
(request.form.get
('concentration2', 20
))
except Exception as e
:
logger.error
(f"Error parsing form
data: {str
(e
)}", exc_info=True
)
return jsonify
({'error'
: 'Invalid form
data. Please check concentration values.'}
), 400
# 加载并合并
文件
if not load_and_merge_
files
(valid_
files
):
logger.error
("
Failed to load and merge
files"
)
return jsonify
({'error'
: '
Failed to load
files. Check
file formats.'}
), 500
# 预处理数据
if not preprocess_
data():
logger.error
("Preprocessing
failed"
)
# 提供更多错误细节给前端
error_details = {
'error'
: '
Data preprocessing
failed',
'possible_causes'
: [
'Missing required "label" column',
'Invalid
data types in columns',
'No valid sensor columns found'
],
'columns'
: list
(dataset.columns
) if
dataset is not None else 'No
dataset loaded',
'dtypes'
: str
(dataset.dtypes
) if
dataset is not None else 'No
dataset loaded'
}
return jsonify
(error_details
), 500
# 更新气体和浓度信息
gas_types = [gas_type1, gas_type2]
concentrations = [concentration1, concentration2]
sensor_types = [sensor_type1, sensor_type2]
last_activity = time.time
()
# 准备响应数据
response = {
'message'
: f'Successfully uploaded {len
(valid_
files
)}
files',
'sample_count'
: len
(dataset
),
'gas_types'
: gas_types,
'concentrations'
: concentrations,
'sensor_types'
: sensor_types,
'columns'
: list
(dataset.columns
) # 返回列名供前端参考
}
logger.info
(f"Upload successful
: {response}"
)
return jsonify
(response
), 200
@app.route
('/columns', methods=['GET']
)
def get_columns
():
"""获取数据集列名"""
global
dataset
if
dataset is None
:
return jsonify
({'error'
: 'No
dataset available'}
), 404
return jsonify
({
'columns'
: list
(dataset.columns
),
'dtypes'
: {col
: str
(dtype
) for col, dtype in
dataset.dtypes.items
()}
}
)
@app.route
('/analyze', methods=['POST']
)
def analyze_
data():
"""执行数据分析"""
global
dataset, gas_types, concentrations, last_activity
logger.info
("Received analyze request"
)
# 检查数据是否已加载
if
dataset is None
:
logger.error
("No
dataset available"
)
return jsonify
({'error'
: 'No
data available. Please upload
files first.'}
), 400
# 获取前端传递的算法参数
try
:
data = request.get_json
()
if not
data:
logger.error
("Invalid request parameters"
)
return jsonify
({'error'
: 'Invalid request parameters'}
), 400
# 验证气体类型是否匹配
req_gas_types = [
data.get
('gas_type1', ''
),
data.get
('gas_type2', ''
)
]
if req_gas_types != gas_types
:
error_msg = f'Gas type mismatch. Current
: {gas_types}, Requested
: {req_gas_types}'
logger.error
(error_msg
)
return jsonify
({'error'
: error_msg}
), 400
# 获取算法参数，提供默认值
params =
data.get
('params', {}
)
knn_params = params.get
('knn', {'n_neighbors'
: 5, 'metric'
: 'euclidean'}
)
svm_params = params.get
('svm', {'C'
: 1.0, 'kernel'
: 'rbf'}
)
rf_params = params.get
('random_forest', {'n_estimators'
: 100, 'max_depth'
: None}
)
except Exception as e
:
logger.error
(f"Error parsing JSON
data: {str
(e
)}", exc_info=True
)
return jsonify
({'error'
: 'Invalid JSON
data'}
), 400
# 准备特征和标签
try
:
# 确保列名都是字符串
dataset.columns =
dataset.columns.astype
(str
)
# 检查标签列是否存在
if 'label' not in
dataset.columns
:
logger.error
("'label' column not found in
dataset"
)
return jsonify
({'error'
: "Required 'label' column not found in
dataset"}
), 500
X =
dataset.drop
('label', axis=1
)
y =
dataset['label']
# 划分训练集和
测试集
X_train, X_test, y_train, y_test = train_test_split
(
X, y, test_size=0.2, random_state=42
)
logger.info
(f"
Data split
: Train={len
(X_train
)}, Test={len
(X_test
)}"
)
except Exception as e
:
logger.error
(f"
Data preparation
failed: {str
(e
)}", exc_info=True
)
return jsonify
({'error'
: '
Data preparation
failed'}
), 500
# 存储结果
results = {}
last_activity = time.time
()
try
:
# 1. KNN算法
knn = KNeighborsClassifier
(
n_neighbors=knn_params.get
('n_neighbors', 5
),
metric=knn_params.get
('metric', 'euclidean'
)
)
knn.fit
(X_train, y_train
)
knn_train_pred = knn.predict
(X_train
)
knn_test_pred = knn.predict
(X_test
)
results['knn'] = {
'name'
: 'K-近邻算法
(KNN
)',
'train_accuracy'
: accuracy_score
(y_train, knn_train_pred
),
'test_accuracy'
: accuracy_score
(y_test, knn_test_pred
),
'classification_report'
: classification_report
(y_test, knn_test_pred, output_dict=True
)
}
logger.info
(f"KNN analysis completed
: Test accuracy={results['knn']['test_accuracy']}"
)
# 2. SVM算法
svm = SVC
(
C=svm_params.get
('C', 1.0
),
kernel=svm_params.get
('kernel', 'rbf'
),
probability=True,
random_state=42
)
svm.fit
(X_train, y_train
)
svm_train_pred = svm.predict
(X_train
)
svm_test_pred = svm.predict
(X_test
)
results['svm'] = {
'name'
: '支持向量机
(SVM
)',
'train_accuracy'
: accuracy_score
(y_train, svm_train_pred
),
'test_accuracy'
: accuracy_score
(y_test, svm_test_pred
),
'classification_report'
: classification_report
(y_test, svm_test_pred, output_dict=True
)
}
logger.info
(f"SVM analysis completed
: Test accuracy={results['svm']['test_accuracy']}"
)
# 3. 随机森林算法
rf_max_depth = rf_params.get
('max_depth', None
)
if rf_max_depth == 'None' or rf_max_depth == ''
:
rf_max_depth = None
elif rf_max_depth
:
try
:
rf_max_depth = int
(rf_max_depth
)
except ValueError
:
rf_max_depth = None
rf = RandomForestClassifier
(
n_estimators=rf_params.get
('n_estimators', 100
),
max_depth=rf_max_depth,
random_state=42
)
rf.fit
(X_train, y_train
)
rf_train_pred = rf.predict
(X_train
)
rf_test_pred = rf.predict
(X_test
)
results['random_forest'] = {
'name'
: '随机森林
(Random Forest
)',
'train_accuracy'
: accuracy_score
(y_train, rf_train_pred
),
'test_accuracy'
: accuracy_score
(y_test, rf_test_pred
),
'classification_report'
: classification_report
(y_test, rf_test_pred, output_dict=True
),
'feature_importances'
: dict
(zip
(X.columns, rf.feature_importances_
))
}
logger.info
(f"Random Forest analysis completed
: Test accuracy={results['random_forest']['test_accuracy']}"
)
except Exception as e
:
logger.error
(f"Analysis
failed: {str
(e
)}", exc_info=True
)
return jsonify
({'error'
: 'Analysis
failed', 'details'
: str
(e
)}
), 500
logger.info
("Analysis completed successfully"
)
return jsonify
({
'message'
: 'Analysis completed successfully',
'results'
: results,
'test_sample_count'
: len
(X_test
),
'timestamp'
: time.time
()
}
), 200
@app.route
('/reset', methods=['POST']
)
def reset_
data():
"""重置数据集"""
global
dataset, gas_types, concentrations, sensor_types, last_activity
dataset = None
gas_types = []
concentrations = []
sensor_types = []
last_activity = time.time
()
logger.info
("
Data reset"
)
return jsonify
({'message'
: '
Data reset successfully'}
), 200
@app.route
('/uploads/<
filename>', methods=['GET']
)
def uploaded_
file(filename
):
"""访问
上传的
文件"""
return send_from_directory
(app.config['UPLOAD_FOLDER'],
filename
)
if __name__ == '__main__'
:
# 开发环境 - 允许Vue前端访问
app.run
(host='0.0.0.0', port=5000, debug=True
)
```
### Vue前端调用示例
以下是一个简单的Vue组件示例，展示如何调用上述API：
```vue
<template>
<div class="container">
<h1>气体传感器数据分析</h1>
<!--
文件上传 -->
<div class="section">
<h2>
上传数据
文件</h2>
<input type="
file" multiple @change="handle
FileChange" ref="
fileInput">
<div class="form-group">
<label>传感器1类型
: <input v-model="sensorType1"></label>
<label>气体1类型
: <input v-model="gasType1"></label>
<label>浓度1
: <input type="number" v-model.number="concentration1"></label>
</div>
<div class="form-group">
<label>传感器2类型
: <input v-model="sensorType2"></label>
<label>气体2类型
: <input v-model="gasType2"></label>
<label>浓度2
: <input type="number" v-model.number="concentration2"></label>
</div>
<button @click="upload
Files">
上传文件</button>
<p v-if="uploadStatus">{{ uploadStatus }}</p>
</div>
<!-- 数据分析 -->
<div class="section" v-if="columns.length > 0">
<h2>数据分析</h2>
<div class="algorithm-params">
<div v-for="
(algo, key
) in algorithms"
:key="key">
<h3>{{ algo.name }}</h3>
<div v-for="param in algo.params"
:key="param.name">
<label>
{{ param.label }}
:
<input
:type="param.type" v-model="params[key][param.name]">
</label>
</div>
</div>
</div>
<button @click="analyze
Data">执行分析</button>
<!-- 显示结果 -->
<div v-if="results" class="results">
<div v-for="
(result, algo
) in results"
:key="algo" class="result-card">
<h3>{{ result.name }}</h3>
<p>训练准确率
: {{ result.train_accuracy.toFixed
(4
) }}</p>
<p>
测试准确率
: {{ result.test_accuracy.toFixed
(4
) }}</p>
<div v-if="result.feature_importances">
<h4>特征重要性
:</h4>
<ul>
<li v-for="
(importance, feature
) in result.feature_importances"
:key="feature">
{{ feature }}
: {{ importance.toFixed
(4
) }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
files
: [],
sensorType1
: 'MP2',
gasType1
: 'acetone',
concentration1
: 20,
sensorType2
: 'MP2',
gasType2
: 'acetone',
concentration2
: 20,
uploadStatus
: '',
columns
: [],
// 算法参数配置
algorithms
: {
knn
: {
name
: 'K-近邻算法',
params
: [
{ name
: 'n_neighbors', label
: '邻居数量', type
: 'number', default
: 5 },
{ name
: 'metric', label
: '距离度量', type
: 'text', default
: 'euclidean' }
]
},
svm
: {
name
: '支持向量机',
params
: [
{ name
: 'C', label
: '正则化参数', type
: 'number', default
: 1.0 },
{ name
: 'kernel', label
: '核函数', type
: 'text', default
: 'rbf' }
]
},
random_forest
: {
name
: '随机森林',
params
: [
{ name
: 'n_estimators', label
: '树的数量', type
: 'number', default
: 100 },
{ name
: 'max_depth', label
: '最大深度', type
: 'number', default
: null }
]
}
},
params
: {
knn
: { n_neighbors
: 5, metric
: 'euclidean' },
svm
: { C
: 1.0, kernel
: 'rbf' },
random_forest
: { n_estimators
: 100, max_depth
: null }
},
results
: null
};
},
methods
: {
handle
FileChange
(event
) {
this.
files = Array.from
(event.target.
files
);
},
async upload
Files
() {
if
(this.
files.length === 0
) {
this.uploadStatus = '请选择
文件';
return;
}
const form
Data = new Form
Data();
this.
files.forEach
(file => {
form
Data.append
('
files',
file);
}
);
form
Data.append
('sensor_type1', this.sensorType1
);
form
Data.append
('gas_type1', this.gasType1
);
form
Data.append
('concentration1', this.concentration1
);
form
Data.append
('sensor_type2', this.sensorType2
);
form
Data.append
('gas_type2', this.gasType2
);
form
Data.append
('concentration2', this.concentration2
);
try {
const response = await axios.post
('http
://localhost
:5000/upload', form
Data, {
headers
: {
'Content-Type'
: 'multipart/form-
data'
}
}
);
this.uploadStatus = `
上传成功! 样本数
: ${response.
data.sample_count}`;
this.columns = response.
data.columns;
// 获取列信息
const colsResponse = await axios.get
('http
://localhost
:5000/columns'
);
console.log
('数据集列信息
:', colsResponse.
data);
} catch
(error
) {
console.error
('
上传失败
:', error
);
this.uploadStatus = `
上传失败
: ${error.response?.
data?.error || error.message}`;
}
},
async analyze
Data() {
try {
const response = await axios.post
('http
://localhost
:5000/analyze', {
params
: this.params,
gas_type1
: this.gasType1,
gas_type2
: this.gasType2
}
);
this.results = response.
data.results;
console.log
('分析结果
:', this.results
);
} catch
(error
) {
console.error
('分析失败
:', error
);
alert
(`分析失败
: ${error.response?.
data?.error || error.message}`
);
}
}
}
};
</script>
<style scoped>
.container {
max-width
: 800px;
margin
: 0 auto;
padding
: 20px;
}
.section {
margin-bottom
: 30px;
padding
: 20px;
border
: 1px solid #ddd;
border-radius
: 8px;
}
.form-group {
margin
: 15px 0;
}
.form-group label {
display
: block;
margin-bottom
: 5px;
}
button {
padding
: 10px 15px;
background-color
: #4CAF50;
color
: white;
border
: none;
border-radius
: 4px;
cursor
: pointer;
}
button
:hover {
background-color
: #45a049;
}
.algorithm-params {
display
: grid;
grid-template-columns
: repeat
(auto-fit, minmax
(250px, 1fr
));
gap
: 20px;
margin-bottom
: 20px;
}
.results {
display
: grid;
grid-template-columns
: repeat
(auto-fit, minmax
(300px, 1fr
));
gap
: 20px;
margin-top
: 20px;
}
.result-card {
padding
: 15px;
border
: 1px solid #ccc;
border-radius
: 5px;
background-color
: #f9f9f9;
}
</style>
```
### 关键集成点说明
1. **CORS配置**：
```python
CORS
(app, resources={
r"/*"
: {
"origins"
: "http
://localhost
:5177", # 指定Vue前端地址
"methods"
: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
"allow_headers"
: ["Content-Type", "Authorization"],
"supports_credentials"
: True
}
}
)
```
精确匹配Vue开发服务器的地址，确保跨域请求正常工作
2. **
文件上传处理**：
- 前端使用Form
Data处理多
文件上传
- 后端使用`request.
files.getlist
('
files'
)`获取
文件列表
3. **状态管理**：
```python
last_activity = time.time
()
```
添加最后活动时间戳，便于监控系统状态
4. **错误处理增强**：
```python
return jsonify
({
'error'
: '
Data preprocessing
failed',
'possible_causes'
: [...],
'columns'
: [...]
}
)
```
提供详细的错误信息，帮助前端展示友好的错误提示
5. **API响应优化**：
- 返回数据集列信息
- 返回特征重要性
- 返回分类报告（字典格式）
### 部署和
测试步骤
1. **启动Flask后端**：
```bash
python app.py
```
2. **启动Vue前端**：
```bash
npm run dev
```
3. **
测试上传功能**：
- 在Vue界面选择CSV
文件
- 填写传感器和气体信息
- 点击
上传按钮
4. **
测试分析功能**：
- 调整算法参数
- 点击"执行分析"按钮
- 查看分析结果
### 推荐的项目结构
```
gas_sensor_app/
├── backend/
│ ├── app.py # Flask主程序
│ ├── requirements.txt # Python依赖
│ └── uploads/ #
上传文件存储
├── frontend/
│ ├── src/
│ │ ├── components/ # Vue组件
│ │ ├── views/ # 页面视图
│ │ ├── router/ # 路由配置
│ │ └── App.vue # 主组件
│ ├── package.json
│ └── vite.config.js # Vue配置
└── README.md
```
### 生产环境部署建议
1. **使用生产服务器**：
```python
from waitress import serve
serve
(app, host="0.0.0.0", port=5000
)
```
2. **配置Nginx反向代理**：
```nginx
server {
listen 80;
server_name your-domain.com;
location / {
proxy_pass http
://localhost
:5000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
location /static/ {
alias /path/to/your/app/static/;
}
}
```
3. **添加身份验证**：
- 使用JWT或OAuth2保护API端点
- 限制
上传文件大小和类型
这个
解决方案完全适配您的Vue前端地址（http
://localhost
:5177），并提供了完整的前后端集成示例。
本文解决了使用PHP cURL上传文件时遇到的错误代码26问题。主要原因是使用了错误的文件路径、路径转义不正确及文件不存在等问题。文章详细介绍了如何避免这些问题并给出了正确的解决方案。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
