### 使用 Vue 和 Django 实现个人中心页面 为了构建一个功能完整的个人中心页面，可以采用前后端分离架构，即前端使用 Vue.js 进行开发，而后端则基于 Django 提供 RESTful API 接口服务。以下是具体实现方法： #### 后端部分（Django） 1. **安装必要的包** 需要在 `requirements.txt` 文件中加入如下依赖项[^4]: ```plaintext djangorestframework==3.13.1 django-cors-headers==3.13.0 ``` 2. **配置 CORS Headers** 修改项目的 settings.py 文件，在中间件列表里添加 corsheaders 中间件，并设置允许跨域请求的域名。 ```python MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', ... ] CORS_ORIGIN_ALLOW_ALL = True # 或者指定特定的白名单CORS_ORIGIN_WHITELIST ``` 3. **定义用户个人信息API接口** 创建一个新的 app 来管理用户的个人信息逻辑，比如名为 userprofile 的应用程序。在这个app内编写序列化类和视图集来暴露获取当前登录用户信息的功能。 ```python from rest_framework import serializers, viewsets from django.contrib.auth.models import User class UserProfileSerializer(serializers.ModelSerializer): class Meta: model = User fields = ['id', 'username', 'email'] class UserProfileViewSet(viewsets.ModelViewSet): queryset = User.objects.all() serializer_class = UserProfileSerializer def get_object(self): return self.request.user ``` 4. **URL路由映射** 将上述视图集注册到 URL 路由当中去，以便能够被外部调用。 ```python from django.urls import include, path from .views import UserProfileViewSet from rest_framework.routers import DefaultRouter router = DefaultRouter() router.register(r'user/profile', UserProfileViewSet) urlpatterns = [ path('', include(router.urls)), ] ``` #### 前端部分（Vue.js） 1. **安装 Axios 库用于发起 HTTP 请求** 安装 axios 可以方便地向后端发送异步请求并接收响应数据。 ```bash npm install axios --save ``` 2. **创建组件展示用户资料** 编写一个简单的 Vue 组件 PersonalCenter.vue 显示从服务器拉取下来的用户基本信息。 ```html <!-- components/PersonalCenter.vue --> <template> <div v-if="loading">Loading...</div> <div v-else> Username: {{ userInfo.username }}<br/> Email Address: {{ userInfo.email }} </div> </template> <script> export default { data () { return { loading: true, userInfo: {} } }, created () { this.fetchUserInfo(); }, methods: { async fetchUserInfo() { try { let response = await this.$axios.get('/api/user/profile/'); this.userInfo = response.data; this.loading = false; } catch(error){ console.error("Failed to load user info", error); } } } }; </script> ``` 3. **集成 Vuex 状态管理模式（可选）** 如果希望在整个应用范围内共享状态，则可以通过引入Vuex来进行全局的状态管理和分发。 ---