ChatGPT搭建博客Django的web网页添加用户系统（二）_如何查看自己登录的chatgpt用户的名称-优快云博客

下一篇:搭建基于Django的博客系统增加广告轮播图（三）
上一篇:ChatGPT创作一个基于Django的简单博客页面（一）

为博客页面创建用户系统

用户系统需求文档

1. 用户注册和登录

用户可以通过注册页面创建新账户，并通过登录页面登录。
注册页面包含字段：用户名、密码、确认密码。
登录页面包含字段：用户名、密码。

2. 用户个人资料

用户可以在注册时填写个人资料，包括年龄、性别、喜好等信息。
注册后用户可以在个人资料页面查看和编辑个人资料。
个人资料页面包含字段：用户名、年龄、性别、喜好。

3. 头像上传和修改

用户可以上传自己的头像，并在个人资料页面查看和修改。
头像上传应支持常见的图片格式，并限制文件大小。
在个人资料页面，用户可以点击头像来修改。

4. 用户标签

用户可以为自己添加标签，用于描述自己的特点或兴趣。
标签可以是自定义的文本内容。
用户可以在个人资料页面查看和编辑标签。

5. 用户信息展示页面

系统提供一个用户信息展示页面，展示所有用户的个人资料和头像。
用户可以通过该页面浏览其他用户的个人资料和头像。

6. 用户权限控制

普通用户只能编辑和查看自己的个人资料和头像。
管理员用户具有编辑和查看所有用户资料的权限。

7. 安全性

用户密码应以安全的方式进行存储，例如使用哈希算法加密。
用户上传的头像应进行验证和过滤，以防止恶意文件上传。

8. 用户界面

页面布局应简洁明了，提供良好的用户体验。
用户应能够轻松地导航到各个功能页面。
用户上传头像时应有明确的指示和反馈。

9. 数据存储和备份

用户数据应安全存储，并定期进行备份，以防止数据丢失或损坏。

10. 扩展性和可维护性

系统应具有良好的扩展性，以便将来添加更多功能。
代码应具有良好的可维护性，易于理解和修改。

以上是对用户系统的详细需求说明，包括用户注册、登录、个人资料管理、头像上传、用户标签、用户信息展示页面等功能。实现这些功能将为博客页面提供更丰富的用户体验和社交功能。

用户注册和登录

见上期，效果如下

首页登录入口

在这里插入图片描述

登录页面

在这里插入图片描述

用户个人资料

1. 更新用户模型

首先，我们需要更新用户模型以包含年龄、性别和喜好等信息：

# blog/models.py

from django.contrib.auth.models import AbstractUser
from django.db import models

class CustomUser(AbstractUser):
    age = models.IntegerField(blank=True, null=True)
    gender = models.CharField(max_length=10, blank=True)
    interests = models.TextField(blank=True)

    def __str__(self):
        return self.username

2. 创建用户注册表单

接下来，创建一个表单用于用户注册时填写个人资料：

# blog/forms.py

from django import forms
from django.contrib.auth.forms import UserCreationForm
from .models import CustomUser

class SignUpForm(UserCreationForm):
    age = forms.IntegerField(required=False)
    gender = forms.CharField(max_length=10, required=False)
    interests = forms.CharField(widget=forms.Textarea, required=False)

    class Meta:
        model = CustomUser
        fields = ('username', 'password1', 'password2', 'age', 'gender', 'interests')

好的，让我们逐步实现这部分功能：

3. 更新注册视图

然后，更新注册视图以使用新的注册表单：

# blog/views.py

from django.shortcuts import render, redirect
from .forms import SignUpForm

def signup(request):
    if request.method == 'POST':
        form = SignUpForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('login')  # 注册成功后重定向到登录页面
    else:
        form = SignUpForm()
    return render(request, 'registration/signup.html', {
   
   'form': form})

4. 创建个人资料页面

接下来，创建个人资料页面以展示和编辑用户的个人资料：

<!-- templates/registration/profile.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Profile</title>
</head>
<body>
    <h1>Profile</h1>
    <form method="post">
        {% csrf_token %}
        {
  
  { form.as_p }}
        <button type="submit">Save</button>
    </form>
</body>
</html>

5. 更新URL配置

最后，确保更新URL配置以匹配新的视图：

# blog/urls.py

from django.urls import path
from .views import signup

urlpatterns = [
    path('signup/', signup, name='signup'),
]

报错：auth.User.groups: (fields.E304) Reverse accessor 'Group.user_set' for 'auth.User.groups' clashes with reverse accessor for 'blog.CustomUser.groups'.

在这里插入图片描述

通过以上步骤，你就可以实现用户在注册时填写个人资料，并在注册后查看和编辑个人资料的功能。

这个错误是由于Django默认的User模型和我们自定义的CustomUser模型之间存在冲突引起的。解决方法是通过related_name参数来给其中一个模型的关联字段重命名。

在这种情况下，我们需要给CustomUser模型中的groups和user_permissions字段添加related_name参数来避免冲突。以下是如何修改模型的方法：

# blog/models.py

from django.contrib.auth.models import AbstractUser
from django.db import models

class CustomUser(AbstractUser):
    age = models.IntegerField(blank=True, null=True)
    gender = models.CharField(max_length=10, blank=True)
    interests = models.TextField(blank=True)

    # 添加 related_name 参数来避免冲突
    groups = models.ManyToManyField('auth.Group', related_name='custom_user_set', blank=True)
    user_permissions = models.ManyToManyField('auth.Permission', related_name='custom_user_set', blank=True)

    def __str__(self):
        return self.username

通过为groups和user_permissions字段添加related_name参数，我们为这两个字段定义了新的反向关联名称，避免了与默认User模型的冲突。

问题解决

在这里插入图片描述

点击sign up报错，报错``django.template.loaders.app_directories.Loader: D:\PycharmProjects\myblog\blog\templates\registration\signup.html (Source does not exist)

在这里插入图片描述

更改signup的文件目的到registration/下，问题解决，Sign Up页面效果如下:

在这里插入图片描述

Bootstrap优化signup页面

为了优化注册页面的样式效果，我们可以使用Bootstrap或其他CSS框架来美化表单的外观。以下是一个简单的示例，演示如何使用Bootstrap来美化注册页面：

1. 添加Bootstrap库

首先，确保在你的项目中包含了Bootstrap库。你可以通过 CDN 或下载 Bootstrap 文件来添加到你的项目中。

<!-- 在模板的<head>部分添加Bootstrap样式链接 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

**2. 更新注册模板*

然后，在注册页面模板中使用Bootstrap的样式类来美化表单：

<!-- templates/registration/signup.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
    <!-- 引入Bootstrap样式 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
    <div