### 如何在 Django 和 Vue 中访问 ForeignKey 字段的数据 #### 在 Django 后端配置模型和序列化器 为了能够顺利获取外键字段的内容，在定义 `Django` 模型时，可以利用内置的 `ForeignKey` 来建立不同表之间的关系[^1]。 对于序列化操作，当涉及到关联对象（即外键）时，可以通过自定义序列化器来控制返回给前端的具体数据格式。下面是一个简单的例子展示如何创建一个包含外键字段的序列化器： ```python from rest_framework import serializers from .models import SysUser, Company class CompanySerializer(serializers.ModelSerializer): class Meta: model = Company fields = ['id', 'company_name'] class SysUserSerializer(serializers.ModelSerializer): company_info = CompanySerializer(source='company_id') class Meta: model = SysUser fields = ['user_id', 'company_info', 'user_account', 'user_name'] ``` 这段代码中，`SysUserSerializer` 使用了嵌套的 `CompanySerializer` 来表示来自 `Company` 表的信息，而不是仅仅提供公司的 ID 值[^2]。 #### 配置视图集与路由 为了让 API 能够响应请求并传递所需的数据，还需要设置相应的视图以及 URL 映射。通常情况下，这一步骤涉及到了 DRF 的 ViewSet 或者 GenericAPIView 类及其子类的选择，并配合 Router 实现自动化的 URL 分发机制。 ```python from rest_framework.viewsets import ModelViewSet from .serializers import SysUserSerializer from .models import SysUser class SysUserViewSet(ModelViewSet): queryset = SysUser.objects.all() serializer_class = SysUserSerializer ``` 接着注册此视图集到路由器中以便于管理API路径: ```python from django.urls import path, include from rest_framework.routers import DefaultRouter from .views import SysUserViewSet router = DefaultRouter() router.register(r'sysusers', SysUserViewSet) urlpatterns = [ path('', include(router.urls)), ] ``` 这样就完成了后端部分的工作，现在可以从 `/sysusers/` 接口获得完整的用户信息连同其所属公司详情一起发送至客户端。 #### 在 Vue.js 客户端发起 HTTP 请求读取数据 最后是在前端应用里调用上述 RESTful APIs 获取数据。假设已经安装好了 axios 库用于处理 AJAX 请求，则可以在组件内部编写如下方法来进行网络通信： ```javascript import axios from "axios"; export default { data() { return { users: [], }; }, created() { this.fetchUsers(); }, methods: { async fetchUsers() { try { const response = await axios.get("/api/sysusers/"); console.log(response.data); this.users = response.data; } catch (error) { console.error(error); } }, }, }; ``` 以上就是整个流程——从服务器端准备数据直到将其呈现在网页上的全过程概述。通过这种方式，不仅可以轻松地在外键之间导航，而且还可以保持前后两端的良好解耦合度[^3]。