Django+Vue时间追踪应用：用户资料编辑提交无变化求助

我正在开发一款时间追踪应用，用来学习Django和Vue.js，参考了Code with Stein的教程。现在卡在资料编辑环节：点击保存修改后没有任何反应，也没有报错信息，但用户名和邮箱的修改没有同步到数据库和Admin面板，完全找不到头绪。

我之前尝试在signup.html里加用户名输入框，同步修改Vue.js和views.py代码，但报错太多没法创建用户名，已经回滚到初始代码。现在希望实现无需登录Admin面板，就能从「我的账户」仪表盘修改用户名和邮箱的功能。

edit_profile.html 代码 #

{% extends 'core/base.html' %}

{% block title %}Edit Profile | {% endblock %}

{% block content %}
    <nav class="breadcrumb" aria-label="breadcrumbs">
        <ul>
            <li><a href="#">Dashboard</a></li>
            <li><a href="{% url 'myaccount' %}">My Account</a></li>
            <li class="is-active"><a href="{% url 'edit_profile' %}" aria-current="page"></a>Edit Profile</li>
        </ul>
    </nav>

    <div class="columns">
        <div class="column is-4">
            <h1 class="title">Edit Profile</h1>

            <form method="post" action="." enctype="multipart/form-data">
                {% csrf_token %}

                <div class="field">
                    <label>Username</label>
                    
                    <div class="control">
                        <input type="text" name="username" id="username" class="input"{% if request.user.username %} value="{{ request.user.username }}" {% endif %}>
                    </div>
                </div>

                <div class="field">
                    <label>Email</label>
                    
                    <div class="control">
                        <input type="text" name="email" id="email" class="input"{% if request.user.email %} value="{{ request.user.email }}" {% endif %}>
                    </div>
                </div>

                <div class="field">
                    <label>Password(You can change it if you want it.)</label>
                        <div class="control">
                            <input type="password" name="password" id="password" class="input"{% if request.user.password %} value="{{ request.user.password }}" {% endif %}>
                        </div>
                </div>

                <div class="field">
                    <div class="control">
                        <button class="button is-success">Save Changes</button>
                    </div>
                </div>
            </form>
            
        </div>
    </div>
{% endblock %}

views.py 代码 #

from django.contrib import messages
from django.contrib.auth import login
from django.contrib.auth.decorators import login_required
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from django.shortcuts import render, redirect

from .models import Userprofile

@login_required
def myaccount(request):
    return render(request, 'userprofile/myaccount.html')

@login_required
def edit_profile(request):
    if request.method == 'POST':
        request.user.username = request.POST.get('username', '')
        request.user.email = request.POST.get('email', '')
        request.user.password = request.POST.get('password', )
        request.user.save()

        messages.info(request, 'The changes were saved!')

        return redirect('myaccount')
    
    return render(request, 'userprofile/edit_profile.html')


def signup(request):
    if request.method == 'POST':
        form = UserCreationForm(request.POST)

        if form.is_valid():
            user = form.save()
            user.email = user.email
            user.save()

            userprofile = Userprofile.objects.create(user=user)

            login(request, user)

            return redirect('frontpage')
    
    else:
        form = UserCreationForm()

    return render(request, 'userprofile/signup.html', {'form': form})

问题原因及修复方案 #

核心问题分析 #

1. 密码处理错误：Django的User模型不能直接给password字段赋值明文，必须用set_password()方法加密存储。原代码直接赋值会把哈希值当成明文保存，导致用户登录失败，同时可能干扰整个保存流程。
2. 无数据验证：直接从POST取数据没有做基础校验（比如用户名重复、邮箱格式错误），也没处理空值逻辑，可能导致无效数据写入或保存失败。
3. 模板细节错误：面包屑的活跃项链接文本位置错误，密码输入框显示哈希值无意义且存在安全风险。

修改后的views.py代码 #

@login_required
def edit_profile(request):
    if request.method == 'POST':
        # 提取并清理表单数据
        username = request.POST.get('username', '').strip()
        email = request.POST.get('email', '').strip()
        password = request.POST.get('password', '').strip()

        # 用户名唯一性校验（排除当前用户）
        if username and User.objects.exclude(id=request.user.id).filter(username=username).exists():
            messages.error(request, '该用户名已被使用')
            return redirect('edit_profile')
        
        # 邮箱格式简单校验
        if email and '@' not in email:
            messages.error(request, '请输入有效的邮箱地址')
            return redirect('edit_profile')
        
        # 更新用户信息
        if username:
            request.user.username = username
        if email:
            request.user.email = email
        # 仅当密码不为空时修改，避免覆盖原密码
        if password:
            request.user.set_password(password)
        
        request.user.save()

        messages.success(request, '修改已保存！')
        return redirect('myaccount')
    
    return render(request, 'userprofile/edit_profile.html')

模板优化（可选） #

1. 修复面包屑链接文本：

<li class="is-active"><a href="{% url 'edit_profile' %}" aria-current="page">Edit Profile</a></li>

2. 修正密码输入框，去掉无效的value属性：

<div class="field">
    <label>Password(留空则不修改)</label>
    <div class="control">
        <input type="password" name="password" id="password" class="input">
    </div>
</div>

修改完成后，即可正常保存用户名和邮箱的修改，同时密码处理符合Django安全规范，新增的验证逻辑也能避免无效数据存入数据库。

内容的提问来源于stack exchange，提问作者LorinDesigns