学习版Django测试平台_前端组件设计与后端逻辑非深度解析

一、前端技术要点

• 技术栈：Vue 2 + Element-UI + Axios
• 核心功能： 组件化：导航（NavLeft）、表格（WrapComponent）、分页组件复用，通过slot动态填充内容。权限控制：路由守卫（beforeEach）拦截未登录用户，本地存储（localStorage）保存令牌和用户信息。请求处理：Axios封装请求拦截器，统一添加JWT请求头，响应拦截器处理错误提示。

二、后端Django核心逻辑与知识点

1. 技术栈与架构

• 技术栈：Django + Django REST framework + JWT + SQLite
• 架构优势： Django：自带ORM、认证系统，快速搭建后端；REST framework：视图集（ViewSet）和序列化器（Serializer）简化API开发；JWT：无状态认证，适合前后端分离场景。

2. 数据模型设计（ORM应用）

• 核心表： User：继承Django原生AbstractUser，添加nickname字段；Role：存储角色名和菜单权限（JSONField）；UserRole：用户与角色的多对多关联表。
• 知识点： ORM：对象关系映射，用Python代码操作数据库，避免手写SQL；JSONField：存储菜单权限JSON，需替换SQLite的sqlite3.dll兼容。

3. JWT认证流程

• 流程步骤： 登录时校验密码，生成JWT令牌；前端请求携带Authorization: Bearer {token}；后端自定义认证类（CustomJSONWebTokenAuthentication）解析令牌，验证用户身份。
• 知识点： JWT vs Session：JWT无状态，适合分布式系统；Session依赖服务器存储，多节点需共享。

4. 视图集与接口实现

• 核心接口： 用户管理：通过UserViewSet实现增删改查，支持模糊查询和分页；密码操作：重置密码（SystemResetPassword视图）、修改密码（函数视图update_password）。
• 知识点： ViewSet：封装CRUD方法，减少代码量（如list对应GET请求）；序列化器：ModelSerializer自动映射模型字段，实现数据与JSON转换。

5. 权限控制

• 实现方式： 角色（Role）与用户关联，菜单权限存储在Role.auth字段；前端根据authMenus动态渲染可访问菜单，后端视图用IsAdminUser权限类控制接口访问。
• 知识点： 权限类：Django REST framework的BasePermission自定义权限逻辑（如IsTester角色校验）。

三、基础知识点补充

• Django是什么？：Python Web框架，提供“模型-视图-模板”架构，适合快速开发。
• RESTful API：接口设计规范，用HTTP方法（GET/POST/PUT/DELETE）对应资源操作。
• 跨域问题：前端通过Vue代理（devServer.proxy）转发请求，后端用django-cors-headers允许跨域。
• 分页实现：后端CustomPagination类统一响应结构，前端分页组件对接currentPage和totalNum。

四、项目亮点与解决方法

• 亮点： 前后端分离架构，组件化开发提升复用性；JWT认证与角色权限结合，实现菜单级权限控制。
• 问题解决： SQLite JSONField兼容：下载对应版本sqlite3.dll替换Python文件；密码安全：Djangomake_password加密存储，前端校验复杂度。

五、前端组件核心逻辑（基础向）

1. 组件化开发基础

• 可复用组件示例： 导航组件（NavLeft.vue）：作用：左侧菜单+面包屑导航，通过slot动态生成菜单项（如“用户管理”“接口测试”）。技术点：el-menu绑定路由（router属性），点击菜单自动跳转；面包屑通过$route.path解析当前路径。为什么要用组件？：避免重复写导航代码，修改时只需改一个地方（如新增菜单）。表格+分页组件（WrapComponent.vue）：作用：统一页面布局（搜索栏+表格+分页），通过slot传入表格列和操作按钮。例子：用户管理页面的表格列（用户名、昵称、角色）由父组件通过<template #table>传入。

2. 权限控制基础

• 登录拦截（路由守卫）：代码逻辑：面试问题：“怎么让未登录用户不能进入首页？” 回应：用Vue路由守卫（beforeEach），检查本地是否有登录令牌（token），没有就跳转登录页。
• 本地存储（localStorage）：存什么？登录后的token（字符串）、用户信息（用户名、角色）、可访问的菜单列表。为什么用它？关闭浏览器后数据不丢失，下次打开自动登录（需配合“记住密码”功能）。

六、后端Django核心细节（重点！）

1. 数据模型设计（ORM入门）

• 自定义用户表（继承Django原生用户）：为什么要自定义？：原生用户表没有昵称、角色等信息，需要扩展。ORM好处：用Python代码操作数据库（如User.objects.filter(username='test')），不用写SQL。
• 多对多关系（用户-角色关联）：表结构：User、Role两张表，通过第三张表UserRole关联（Django自动生成，也可手动定义）。操作示例：给用户分配角色

2. JWT认证流程（从登录到请求）

• 登录接口（后端逻辑）：接收前端传来的用户名、密码；用Django的authenticate(username=username, password=password)校验密码；校验通过后，生成JWT令牌（包含用户ID、过期时间等）；返回令牌给前端，前端存到localStorage。
• 请求认证（后端如何校验令牌）：自定义认证类（CustomJSONWebTokenAuthentication）：面试问题：“JWT和Session有什么区别？” 回应：Session存在服务器，多台服务器需要共享（麻烦）；JWT是令牌，存在用户浏览器，后端不存数据，适合前后端分离。

3. 视图集（ViewSet）快速开发API

• 用户列表接口（GET /api/users）：为什么用ViewSet？：自动支持GET（查）、POST（增）、PUT（改）、DELETE（删）四种请求，少写很多代码。
• 序列化器（Serializer）：作用：把数据库中的数据（如User对象）转成JSON格式给前端，或把前端传来的JSON转成可保存到数据库的数据。例子：UserSerializer定义哪些字段要返回（用户名、昵称、角色），隐藏密码等敏感字段。

七、基础知识点补充（Django必学）

1. 跨域问题解决：前端：开发时用Vue配置代理（vue.config.js），把/api开头的请求转发到后端（如http://localhost:8000/api）。后端：安装django-cors-headers，在settings.py中添加CORS_ORIGIN_ALLOW_ALL = True，允许所有前端域名访问。
2. 分页实现：后端：定义CustomPagination类，控制每页显示数量（如10条/页），返回数据包含当前页、总页数、总数据量。前端：分页组件接收后端返回的current_page和total_num，点击页码时向后端发送新的page参数。
3. 密码安全：后端：用Django的make_password加密密码（如user.password = make_password(raw_password)），存到数据库的是加密后的字符串。前端：输入密码时校验复杂度（至少8位，包含字母和数字），防止用户设置简单密码。

八、面试高频问题（初级版）

1. “Django中如何创建一个接口？”

回应：定义模型（models.py）；写序列化器（serializers.py，转JSON）；用ModelViewSet写视图（views.py，处理请求）；配置路由（urls.py，关联URL和视图）。

1. “前端怎么拿到后端的数据？”

回应：前端用Axios发请求（如axios.get('/api/users')），后端返回JSON数据，前端用v-for循环渲染到页面上（如表格）。

1. “权限控制是怎么做的？”

回应：后端给不同角色（管理员、测试员）配置不同权限（如管理员能删用户，测试员不能）；登录时后端返回用户的角色和可访问菜单，前端根据角色隐藏/显示菜单；后端接口用权限类（如IsAdminUser）校验用户是否有权限访问。

九、总结

该测试平台以Django为后端核心，通过ORM简化数据操作，JWT实现安全认证，适合测试开发工程师学习前后端协作、自动化测试平台搭建。重点掌握Django视图集、序列化器和权限控制，以及前端组件化和权限拦截的实现逻辑，可用于落地企业级测试平台或二次开发。

• 前端重点：组件复用（减少重复代码）、登录拦截（路由守卫+本地存储）、接口调用（Axios发请求）。
• Django重点： 模型（ORM操作数据库，多对多关联）；视图集（快速生成CRUD接口）；JWT认证（登录流程+令牌校验）。
• 学习建议：先跑通项目代码，再逐行看前后端如何交互，重点理解“前端发请求→后端处理→返回数据→前端渲染”的流程，遇到问题查Django官方文档。