Skip to main content

发送重置邮件的功能

本节课程我们将实现一个重置密码的页面功能。首先，我们需要在登录页面添加一个"忘记密码"的链接。当用户点击该链接时，将跳转到一个特定的URL，进而找到重置密码的页面。

添加忘记密码链接​

我们在登录页面的合适位置添加一个"忘记密码"的链接。用户可以点击该链接来跳转到重置密码页面。

可以通过以下步骤来实现：

  1. 在登录页面的适当位置添加一个链接，例如在用户名和密码输入框下面。
frontend/src/views/Login.vue
<form>
  ... 省略其他代码
  <div class="text-center text-sm my-2">
    <span class="text-left text-green-500">
      <router-link to="/reset_password">忘记密码?</router-link>
    </span>
    没有账号
    <a class="text-blue-500" href="/register">去注册</a>
  </div>
</form>
代码解析

这段Vue代码定义了一个路由链接组件<router-link>,用于在页面上创建一个链接,点击后导航到指定的路由路径。

主要内容包括:

  • to="/reset_password":这个属性指定点击后要导航的路由路径是/reset_password。

  • 忘记密码?:这是<router-link>之间的内容,会作为链接的文本显示。

所以这段代码会渲染成一个文本为"忘记密码?"的链接,点击后会导航到/reset_password路径,实现跳转到忘记密码页面的功能。

<router-link>是Vue Router中的组件,用于生成路由链接,非常方便的实现路由跳转而无须手动监听点击事件。这个组件会自动给元素添加正确的href属性和点击事件。

运行效果如下图所示。

图42-添加链接

设置重置密码的URL​

在登录页面的URL中添加一个特定的路径，"/reset-password",在index.js中添加如下配置：

frontend/src/router/index.js

  import ResetPassword from '../views/ResetPassword.vue'
  
  {
    path: '/reset_password',
    name: 'ResetPassword',
    component: ResetPassword
  },

在后台服务器代码中，将该路径与一个函数或视图绑定，用于处理重置密码的请求。

创建重置密码页面​

在前端代码中，我们需要新建一个页面来展示重置密码的内容。可以通过以下步骤来创建：

  1. 在前端views文件夹下创建一个新的Vue组件，命名为"ResetPassword"。
  2. 在"ResetPassword"组件的模板中，添加必要的HTML和CSS代码，用于展示重置密码的页面布局。
  3. 在"ResetPassword"组件中，添加必要的数据和方法，用于处理用户的输入和发送密码重置请求。

ResetPassword.vue代码如下：

frontend/src/views/ResetPassword.vue

<template>
  <div id="container" class="text-white text-sm bg-primary-300 min-h-screen pb-4">
    <Header />
    <div class="text-center text-2xl p-8">重置密码</div>
    <div class="flex items-center justify-center">
      <div class="w-1/4 p-4 bg-gray-100 rounded-lg shadow-lg">
        <div class="text-black text-center p-4">
          <p class="font-bold py-4">请输入注册时的邮箱</p>
          <div>
            <input
              v-model="email"
              class="outline-0 h-9 rounded border border-green-600 placeholder-gray-400 w-64 px-2 py-1 max-w-[280px]"
              type="text"
            />
          </div>
        </div>
        <div class="flex justify-center">
          <button
            v-on:click="resetPassword"
            class="bg-green-500 text-white px-4 py-2 rounded"
          >
            发送邮件
          </button>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import axios from "axios";
import showMessage from "@/utils/message.js";

export default {
  name: "ResetPassword",
  components: { Header, Footer },

};
</script>

代码解析

这段实现了一个输入邮箱的输入框和一个发送邮件的按钮,具体功能如下:

  1. <input>标签定义了一个文本输入框,用于输入邮箱。

  2. 使用v-model="email"双向绑定了email变量,这样输入框的内容会实时同步到email变量上。

  3. 绑定了各种class样式,设置了边框、圆角等外观。

  4. type="text"指定了输入类型是文本。

  5. <button>标签定义了一个按钮。

  6. 使用v-on:click="resetPassword"绑定了click点击事件,会调用resetPassword方法。

所以这段代码整体实现的是一个输入邮箱的输入框,点击"发送邮件"按钮时,会调用resetPassword方法,可以猜测这里可能会发送一个重置密码的邮件。

运行效果如下图所示。 图42-重置密码

发送重置密码邮件​

在重置密码页面中，用户需要输入他们的邮箱地址，并点击发送按钮来发送重置密码的邮件。可以通过以下步骤来实现：

  1. 在"ResetPassword"组件中，定义一个数据属性"email"，用于存储用户输入的邮箱地址。
  2. 在模板中使用v-model指令将输入框与"email"数据属性进行绑定，以便获取用户输入的邮箱地址。
  3. 在"ResetPassword"组件中，定义一个方法"sendResetEmail"，用于发送重置密码的邮件。
  4. 使用axios库中的post方法发送一个POST请求到后台服务器，将用户输入的邮箱地址作为参数传递。
  5. 在请求成功的回调函数中，调用"Show Message"方法，显示发送成功的消息，并跳转到登录页面。
  6. 在请求失败的回调函数中，捕获异常，并处理错误情况。
frontend/src/views/ResetPassword.vue
<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import axios from "axios";
import showMessage from "@/utils/message.js";

export default {
  name: "ResetPassword",
  data: function () {
    return {
      email: "",
    };
  },
  components: { Header, Footer },
  methods: {
    resetPassword() {
      const email = this.email.trim();
      axios
        .post("/api/users/reset_password/", { email: email })
        .then((response) => {
          showMessage("邮箱已发送，请确认", "info", () => {
            this.$router.push({
              name: "Login",
            });
          });
        })
        .catch((error) => {
          const errorData = error.response.data;
          const errorMessage = Object.values(errorData).flat();
          for (let i = 0; i < errorMessage.length; i++) {
            showMessage(errorMessage[i]);
          }
        });
    },
  },
};
</script>

代码解析

在resetPassword方法中:

  • 调用trim()处理输入的邮箱,删除两端空格。

  • 使用axios向/api/users/reset_password/发送post请求,包含email数据。

  • 请求成功,使用showMessage显示提示,并通过this.$router.push跳转到登录页。

  • 请求失败,显示错误信息。

在data中定义了email变量,通过v-model双向绑定到输入框。

所以这段代码整体实现了一个重置密码的页面和功能:

  • 输入邮箱,点击按钮,发起重置密码请求
  • 请求成功,跳转登录页;失败,显示错误

通过组合组件和调用接口,完成了一个常见的重置密码页的开发。

如果用户输入已经注册的邮箱，则会通过djoser发送邮件，否则提示如下错误： 图42-验证邮箱是否存在

通过上述步骤，我们可以实现一个发送重置密码邮件的功能。用户可以在登录页面点击"忘记密码"链接，然后输入邮箱地址并发送邮件。后台服务器将发送一封包含重置链接的邮件到用户的邮箱。用户可以通过该链接重置他们的密码。

本节课程到这里结束，我们下次再见！