1. 项目概述：工厂生产质检运营管理系统
在制造业数字化转型浪潮中，我最近完成了一个基于Flask+Vue的工厂生产质检运营管理系统。这个系统最特别之处在于采用了Flask与Django双后端架构——Flask负责轻量级API和图像处理接口，Django则处理复杂的业务逻辑和后台管理。前端使用Vue3+Element Plus构建响应式界面，整个开发过程在PyCharm中完成。
这个系统主要解决三个痛点：一是传统纸质质检流程效率低下，二是质量数据分散难以统计分析，三是供应商质量评估缺乏数据支撑。通过我们的系统，质检效率提升了40%，缺陷追溯时间从平均2小时缩短到15分钟，供应商评估也有了客观的数据指标。
2. 技术架构设计
2.1 技术栈选型考量
选择Flask+Django的组合经过了仔细权衡。Flask的轻量级特性非常适合开发RESTful API，特别是对实时性要求高的质检数据接口。而Django的全功能框架则完美胜任复杂的业务逻辑处理，特别是其自带的Admin后台，让我们快速搭建起了质检标准管理模块。
前端选用Vue3主要基于两点：一是组合式API更适合处理质检表单的复杂交互逻辑，二是Element Plus组件库提供了现成的数据可视化组件，可以快速构建质量看板。实测下来，Vue3的Composition API确实比Options API更利于维护大型表单的逻辑。
2.2 系统模块划分
系统核心分为两大模块：
- 生产质检模块
- 缺陷分类管理（Django Admin实现）
- 检测流程引擎（Flask Blueprint构建）
- 图像识别接口（单独部署的Flask服务）
- 运营管理模块
- 质量看板（Vue动态图表）
- 工单追踪系统（Celery异步任务）
- 供应商评估（Django聚合查询）
这种模块化设计使得后期将图像识别服务独立为微服务变得非常容易。
3. 开发环境搭建
3.1 PyCharm多项目配置
在PyCharm中，我们创建了如下项目结构：
code复制/factory_qa
/backend_flask # Python 3.8虚拟环境
/backend_django # Python 3.8虚拟环境
/frontend # Node.js 16.x
关键配置技巧：
- 为每个后端创建独立的虚拟环境，避免依赖冲突
- 在PyCharm中配置复合运行配置，可以同时启动多个服务
- 使用.env文件管理各环境的配置变量
3.2 数据库配置
采用PostgreSQL作为主数据库，Redis用于缓存高频访问的质检结果：
python复制# Django的数据库配置
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': 'qa_production',
'USER': 'qa_user',
'PASSWORD': 'complexpassword123',
'HOST': 'localhost',
'PORT': '5432',
}
}
# Redis缓存配置
CACHES = {
"default": {
"BACKEND": "django_redis.cache.RedisCache",
"LOCATION": "redis://127.0.0.1:6379/1",
"OPTIONS": {
"CLIENT_CLASS": "django_redis.client.DefaultClient",
}
}
}
注意：生产环境务必使用不同的密码，并考虑使用连接池
4. 核心功能实现
4.1 缺陷分类管理
利用Django Admin快速构建了缺陷分类后台：
python复制@admin.register(DefectCategory)
class DefectCategoryAdmin(admin.ModelAdmin):
list_display = ('code', 'name', 'severity_level')
list_filter = ('production_line',)
search_fields = ('code', 'name')
fieldsets = (
(None, {'fields': ('code', 'name')}),
('严重程度', {'fields': ('severity_level', 'risk_value')}),
)
开发中发现Django Admin默认的权限控制不够精细，我们通过重写has_change_permission等方法实现了车间级别的数据权限控制。
4.2 检测流程引擎
使用Flask Blueprint构建RESTful接口：
python复制# api/quality.py
quality_bp = Blueprint('quality', __name__)
@quality_bp.route('/inspections', methods=['POST'])
def create_inspection():
try:
data = request.get_json()
validate_inspection_data(data) # 使用JSON Schema验证
inspection = InspectionService.create(data)
return jsonify(inspection.to_dict()), 201
except ValidationError as e:
return jsonify({'error': str(e)}), 400
接口验证使用JSON Schema：
json复制{
"$schema": "http://json-schema.org/draft-07/schema#",
"type": "object",
"properties": {
"defect_code": {"type": "string", "pattern": "^D\\d{4}$"},
"severity": {"type": "integer", "minimum": 1, "maximum": 5}
},
"required": ["defect_code", "severity"]
}
4.3 前端架构设计
Vue采用模块化组织：
code复制src/
modules/
quality/
├── DefectClassifier.vue
├── RealTimeMonitor.vue
└── api/
├── flaskService.js
└── djangoService.js
axios服务封装示例：
javascript复制// flaskService.js
import axios from 'axios'
const flaskApi = axios.create({
baseURL: process.env.VUE_APP_FLASK_API,
timeout: 10000
})
export const submitInspection = (data) => {
return flaskApi.post('/inspections', data)
}
5. 系统集成与部署
5.1 跨框架数据交互
为解决Flask和Django之间的数据一致性问题，我们采用了：
- 共享的JSON Schema定义
- 统一的时间戳格式（ISO 8601）
- 公共的枚举值定义（通过Git子模块共享）
5.2 Docker化部署
使用Docker Compose编排服务：
yaml复制version: '3.8'
services:
postgres:
image: postgres:13
environment:
POSTGRES_PASSWORD: qa_prod_password
volumes:
- pg_data:/var/lib/postgresql/data
redis:
image: redis:6
ports:
- "6379:6379"
flask-api:
build: ./backend_flask
ports: ["5000:5000"]
depends_on:
- postgres
- redis
django-admin:
build: ./backend_django
ports: ["8000:8000"]
depends_on:
- postgres
vue-frontend:
build: ./frontend
ports: ["8080:8080"]
depends_on:
- flask-api
- django-admin
volumes:
pg_data:
5.3 CI/CD流程
GitLab CI配置示例：
yaml复制stages:
- test
- build
- deploy
test:
stage: test
services:
- postgres:13
- redis:6
script:
- cd backend_django && python manage.py test
- cd backend_flask && pytest
- cd frontend && npm run test:unit
build:
stage: build
script:
- docker-compose build
only:
- master
deploy:
stage: deploy
script:
- scp docker-compose.prod.yml user@server:/app
- ssh user@server "cd /app && docker-compose -f docker-compose.prod.yml up -d"
only:
- master
6. 扩展性设计
6.1 插件式架构
质检算法通过Flask Blueprint动态加载：
python复制# plugins/__init__.py
def load_plugins(app):
plugin_dir = current_app.config['PLUGIN_DIR']
for filename in os.listdir(plugin_dir):
if filename.endswith('.py') and not filename.startswith('_'):
module_name = f'plugins.{filename[:-3]}'
try:
module = importlib.import_module(module_name)
app.register_blueprint(module.bp)
current_app.logger.info(f'Loaded plugin: {module_name}')
except Exception as e:
current_app.logger.error(f'Failed to load {module_name}: {str(e)}')
6.2 微服务演进路线
- 第一阶段：将Django Admin剥离为独立服务
- 第二阶段：Flask图像处理转为Serverless函数（如AWS Lambda）
- 第三阶段：Vue微前端化各功能模块
7. 开发经验与避坑指南
7.1 跨域问题解决
开发中遇到的主要挑战是Vue前端需要同时访问Flask和Django后端。解决方案：
- 使用CORS中间件：
python复制# Flask配置
from flask_cors import CORS
CORS(app, resources={r"/api/*": {"origins": "*"}})
# Django配置
CORS_ALLOWED_ORIGINS = [
"http://localhost:8080",
"http://127.0.0.1:8080"
]
- 生产环境应使用Nginx反向代理统一API入口
7.2 会话管理方案
由于使用多后端，我们采用JWT进行身份验证：
python复制# Flask JWT实现示例
from flask_jwt_extended import create_access_token
@app.route('/login', methods=['POST'])
def login():
username = request.json.get('username')
password = request.json.get('password')
user = authenticate(username, password) # 与Django共用用户库
if user:
access_token = create_access_token(identity=username)
return jsonify(access_token=access_token)
return jsonify({"msg": "Bad credentials"}), 401
7.3 性能优化技巧
- 数据库优化：
- Django中使用select_related/prefetch_related
- Flask-SQLAlchemy配置连接池
- 缓存策略：
- 高频质检结果缓存5分钟
- 使用Redis存储会话信息
- 前端优化：
- Vue组件按需加载
- 使用Web Worker处理大数据量图表渲染
8. 项目演进与展望
目前系统已在3个车间部署运行，下一步计划：
- 引入机器学习进行缺陷预测
- 增加移动端质检App（基于Uniapp）
- 实现与MES系统的深度集成
这个项目给我的最大启示是：技术选型没有绝对的好坏，关键是要根据具体场景选择最合适的工具组合。Flask+Django+Vue的组合在初期看起来有些"非主流"，但实际证明它能完美平衡开发效率和系统性能。