美多商城之用户中心(用户基本信息)

一、用户基本信息 1.1用户基本信息逻辑分析 1. 用户基本信息逻辑分析

以下是要实现的后端逻辑

1. 用户模型补充email_active字段
2. 查询并渲染用户基本信息
3. 添加邮箱
4. 发送邮箱验证邮件
5. 验证邮箱

提示：

• 用户添加邮箱时，界面的局部刷新，我们选择使用Vue.js来实现。

1.2 查询并渲染用户基本信息 1. 用户模型补充email_active字段

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

• 补充完字段后，需要进行迁移。

    $ python manage.py makemigrations
    $ python manage.py migrate
  

class User(AbstractUser):
    """自定义用户模型类"""
    mobile = models.CharField(max_length=11, unique=True, verbose_name='手机号')
    email_active = models.BooleanField(default=False, verbose_name='邮箱验证状态')

    class Meta:
        db_table = 'tb_users'
        verbose_name = '用户'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.username

2. 查询用户基本信息

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)

3. 渲染用户基本信息

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

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

    let username = "{{ username }}";
    let mobile = "{{ mobile }}";
    let email = "{{ email }}";
    let email_active = "{{ email_active }}";