Django用户中心之用户基本信息(用户基本信息逻辑分析、查询并渲染用户基本信息)

用户基本信息逻辑分析

以下是要实现的后端逻辑

• 用户模型补充email_active字段
• 查询并渲染用户基本信息
• 添加邮箱
• 发送邮箱验证邮件
• 验证邮箱

查询并渲染用户基本信息

用户模型补充email_active字段

• 由于在渲染用户基本信息时，需要渲染用户邮箱验证的状态，所以需要给用户模型补充email_active字段
• 补充完字段后，需要进行迁移。

python manage.py makemigrations
python manage.py migrate

查询用户基本信息

class UserInfoView(LoginRequiredMixin, View):
    """用户中心"""

    def get(self, request):
        """提供个人信息界面"""
        context = {
            'username': request.user.username,
            'mobile': request.user.mobile,
            'email': request.user.email,
            'email_active': request.user.email_active
        }
        return render(request, 'user_center_info.html', context=context)

渲染用户基本信息

将后端模板数据传递到Vue.js

• 为了方便实现用户添加邮箱时的界面局部刷新
  我们将后端提供的用户数据传入到user_center_info.js中

<script type="text/javascript">
    let username = "{{ username }}";
    let mobile = "{{ mobile }}";
    let email = "{{ email }}";
    let email_active = "{{ email_active }}";
</script>
<script type="text/javascript" src="{{ static('js/common.js') }}"></script>
<script type="text/javascript" src="{{ static('js/user_center_info.js') }}"></script>

Vue渲染用户基本信息：user_center_info.html

<li><span>用户名：</span>[[ username ]]</li>
<li><span>联系方式：</span>[[ mobile ]]</li>