跳到主要内容

change-password

在前面的课程中，我们已经完成了登录、退出登录以及用户身份展示。 接下来，我们来实现一个几乎所有系统都必须具备的功能：

修改密码

这一节，我们不仅要实现功能，还要做到三点：

  • 使用 Django 官方方案
  • 前后端 校验清晰
  • 修改后 不退出登录

1.整体实现思路​

先不看代码，我们先理一下流程：

  1. 用户点击「修改密码」
  2. 打开修改密码页面
  3. 前端先做基础校验（不能为空、两次一致）
  4. 使用 AJAX 提交数据
  5. 后端使用 Django 内置 PasswordChangeForm
  6. 修改成功后，保持登录状态
  7. 返回 JSON，由前端统一提示结果

这个流程，安全、标准、可维护。

2.修改密码页面模板​

我们先来看模板代码。

1️⃣ 页面结构说明​

模板继承自 base.html，整体结构分为三块：

  • 背景区域
  • 修改密码表单
  • JS 交互逻辑
<div class="password-change">
    <div class="password-change-form">
        <h2>修改密码</h2>
        <form id="changePasswordForm" method="post">

页面非常直观： 一个表单，三个输入框，一个按钮。

2️⃣ 表单字段设计（关键点）​

<input type="password" name="old_password">
<input type="password" name="new_password1">
<input type="password" name="new_password2">

⚠️ 这里非常重要的一点：

这三个 name 值，必须严格对应 Django 的 PasswordChangeForm

字段Django 内置要求
当前密码old_password
新密码new_password1
确认密码new_password2

image-20260128134552855

名字一旦改错，表单直接失效。

修改密码页面效果如图所示。

image-20260109141444736

3️⃣ CSRF Token 的处理方式​

{% csrf_token %}

在 JS 中，我们直接从表单中读取：

formData.get('csrfmiddlewaretoken')

这是 Django 官方推荐的安全做法之一。

3.前端校验：先挡住明显错误​

在提交请求之前，我们先用 JS 做一层校验。

🔒 试读结束

继续阅读完整内容

以上为免费预览。前往「Django + Vue 全栈课程」，查看后续完整讲解、案例演示和配套资料。

查看课程详情