记录一个自己开发AI自动化测试平台的流程-（三-登录模块前后端开发）

摸不到的颜色叫做彩虹

已于 2025-05-06 18:01:48 修改

阅读量400

点赞数 17

文章标签： python django vue

于 2025-05-06 17:47:58 首次发布

本文链接：https://blog.csdn.net/studytest11111/article/details/147744123

版权

环境的配置

后端配置：

用过django后端框架的朋友们应该比较熟悉django setting文件的配置了，在这只是简单介绍一下setting的配置，具体的大家可以依据自己的开发环境去调整。

环境管理：
- 使用python-dotenv加载.env文件管理环境变量
- 关键参数均通过环境变量获取（数据库/SECRET_KEY等）
安全配置：
- 调试模式默认开启（生产环境应设为False）
- 允许访问的主机列表通过环境变量配置
- 密钥使用环境变量管理
核心功能配置：
- 启用REST framework并配置JWT认证
- 设置跨域资源共享(CORS_ALLOW_ALL_ORIGINS=True)
- 使用WhiteNoise进行静态文件托管
- 自定义时区中间件TimezoneMiddleware
数据库：
- MySQL数据库连接配置（参数通过环境变量获取）
- 字符集设置为utf8mb4
- 时区设为Asia/Shanghai
国际化：
- 默认语言为英文
- 使用上海时区(Asia/Shanghai)
- 启用时区感知(USE_TZ=True)
文件管理：
- 静态文件路径配置为/staticfiles
- 媒体文件存储路径设置为/media
异步任务：
- 配置Celery使用Redis作为消息代理
- 设置定时任务每分钟检查测试计划
- 任务序列化使用JSON格式
REST框架：
- 强制要求身份验证(IsAuthenticated)
- JWT认证有效期：访问令牌1天/刷新令牌7天
- 使用HS256签名算法

这里还是要建议大家尽量用.env的方式去存储敏感信息，比如说数据连接、知识库链接等，避免生产环境的问题

前端配置：

技术架构

核心框架：Vue3 + Vite5 (ES Module模式)
UI框架：Element Plus 2.8 + 配套图标库
路由管理：Vue Router 4.4
HTTP请求：Axios 1.7

核心功能模块

可视化系统
- 关系图绘制：@antv/g6 + @dagrejs/graphlib
- 通用图表：ECharts5 + Chart.js4 双支持
- 脑图编辑：kityminder-core + kity
- 流程图：jsplumb + vuedraggable
辅助工具
- 日期处理：Dayjs替代Moment
- 颜色操作：color + tinycolor2双方案
- 工具函数：Lodash深度集成

开发工具链

调试工具：Vue DevTools深度集成
模块兼容：
- @rollup/plugin-commonjs处理CJS模块
- vite-plugin-commonjs二次兼容
构建优化：Vite5生产模式优化

典型技术特征

混合图表体系：同时集成AntV/G6、ECharts、Chart.js三种可视化方案
企业级组件：Element Plus提供后台管理系统基础组件
交互增强：支持拖拽排序、流程图连线等高阶交互
兼容性策略：通过Babel runtime支持旧版浏览器
轻量化设计：采用Dayjs替代Moment节省体积

工程化配置

开发命令：vite dev热更新开发
构建命令：vite build生产打包
预览命令：vite preview本地验证

登录模块开发

在这里插入图片描述

后端登录：

主要用的事APIVIEW模式，这个模式的好处是比较好维护，开发的过程中也可以完全采用restful风格

class LoginView(APIView):
    permission_classes = [AllowAny]
    authentication_classes = []
    
    def post(self, request):
        try:
            username = request.data.get('username')  # 获取用户名
            password = request.data.get('password')  # 获取密码
            
            if not username or not password:  # 前置判断，判断用户名密码是否非空
                return Response({
                    "code": 400,
                    "message": "用户名和密码不能为空",
                    "data": None
                })

            user = authenticate(username=username, password=password)  # 格式化检查
            
            if user is not None:
                refresh = RefreshToken.for_user(user)  # token生成
                access_token = str(refresh.access_token)  # token生成
                
                return Response({
                    "code": 200,
                    "message": "登录成功",
                    "data": {
                        "token": access_token,
                        "refresh": str(refresh),
                        "user": {
                            "id": user.id,
                            "username": user.username,
                            "avatar": user.profile.avatar if hasattr(user, 'profile') else "",
                            "email": user.email
                        },
                        "redirect_url": "/"
                    }
                })
            else:
                return Response({
                    "code": 401,
                    "message": "用户名或密码错误",
                    "data": None
                }, status=status.HTTP_400_BAD_REQUEST)
                
        except Exception as e:
            print("Login error:", str(e))
            return Response({
                "code": 500,
                "message": f"登录失败：{str(e)}",
                "data": None
            }, status=status.HTTP_500_INTERNAL_SERVER_ERROR)