跳到主要内容

发送重置邮件的功能

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

🔒 试读结束

继续阅读完整内容

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

查看课程详情