修改密码页面实现

本文将介绍如何在页面中实现修改密码功能。用户登录后，点击右上角，会显示个人中心，如下图所示。

图45-侧边栏个人中心

创建路由

首先，我们需要在应用程序的路由中添加一个新的路由来处理个人中心页面和修改密码页面的访问。

frontend/src/router/index.js
import Personal from '../views/Personal.vue'
import ChangePassword from '../views/ChangePassword.vue'

  {
    path: "/personal",
    name: "Personal",
    component: Personal,
  },
  
  {
    path: "/change_password",
    name: "ChangePassword",
    component: ChangePassword,
  },

创建个人中心页面

在views文件夹中创建一个Personal.vue模板文件，用于显示个人中心页面的内容。

<template>
<div id="container" class="text-white text-sm bg-primary-300 min-h-screen pb-4"> 
    <Header/>
    <div id="main" class="bg-primary-300 p-6 text-black">
        <div class="rounded bg-white mx-4 my-4 py-6 ">
            <div class="px-6">
                <h1 class="text-lg font-semibold">个人中心</h1>
            </div>
        </div>
        <div class="rounded bg-white mx-4 mt-4 py-6 "> 
            <PersonalNav/>
            <div class="mt-4 mb-3 ">
            <div class="not-prose relative ">
                <div class="ml-4 text-lg">
                <div class="py-2">
                    用户名： andy
                </div>
                <div class="py-2">
                    手机号：12312312312
                </div>
                <div class="py-2">
                    会员状态：

                    会员\
                    非会员
                </div>
                <div class="py-2">
                    到期时间：*****
                </div>
                </div>
            </div>
            </div>
        </div>
    </div>
    
    <Footer/>
</div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import PersonalNav from '@/components/PersonalNav.vue'

export default {
    name: 'Personal',
    components: {Header, Footer, PersonalNav}
}
</script>

上面代码中引入了PersonalNav组件，所以，在components下创建PersonalNav.vue文件，代码如下：

frontend/src/components/PersonalNav.vue
<template>
    <div id="tabs" class="flex justify-start items-center py-4 bg-gray-100">
        <div class="px-4 text-md ">
                <a href="/personal" class="underline-gray">账号信息</a>
        </div>
        <div class="px-4 text-md">
            <a href="/change_password" >修改密码</a>
        </div>
    </div>
</template>

页面效果如下图所示。图45-个人中心页面

创建修改密码页面

当点击“修改密码”选项时，进入到修改密码页面。接下里在views下创建ChangePassword.vue, 代码如下所示：

frontend/src/views/ChangePassword.vue
<template>
<div id="container" class="text-white text-sm bg-primary-300 min-h-screen pb-4"> 
    <Header/>
    <div id="main" class="bg-primary-300 p-6 text-black">
        <div class="rounded bg-white mx-4 my-4 py-6 ">
            <div class="px-6">
                <h1 class="text-lg font-semibold">个人中心</h1>
            </div>
        </div>
        <div class="rounded bg-white mx-4 mt-4 py-6 "> 
            <PersonalNav/>
            <div class="mt-4 mb-3 ">
                <div class="not-prose relative">
                    <div class="ml-4 text-lg">
                    <div class="py-2 text-md">
                        <form  action="" method="post"  class="w-[300px]">
                        <div  class="flex items-center justify-between py-2">
                            <label for="old_password">原始密码:</label>
                            <input v-model="current_password" id="old_password" type="password" name="old_password" class="mx-2 outline-0 rounded border border-solid border-gray-500">
                        </div>
                        <div class="flex items-center justify-between py-2">
                            <label for="new_password">新密码:</label>
                            <input v-model="new_password" id="new_password" type="password" name="new_password" class="mx-2 outline-0 rounded border border-solid border-gray-500">
                        </div>
                        <div class="flex items-center justify-between py-2">
                            <label for="confirm">确认密码:</label>
                            <input v-model="re_new_password" id="confirm_password" type="password" name="confirm_password"  class="mx-2 outline-0 rounded border border-solid border-gray-500">
                        </div>
                        <button v-on:click.prevent="setPassword" type="button" id="change_password" class="mb-2 rounded border bg-blue-500 text-white text-sm h-8 w-16">提交</button>
                        </form>
                    </div>
                </div>
                </div>
            </div>          
        </div>
        </div>
    
    <Footer/>
</div>
</template>

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

export default {
    name: 'ChangePassword',
    components: {Header, Footer, PersonalNav},
}

</script>

运行效果如下图所示。

图45-修改密码页面

实现修改密码逻辑

在修改密码的视图函数中，我们首先获取表单中的原始密码、新密码和确认密码。然后，我们对密码进行一些检查，例如检查密码是否为空、新密码和确认密码是否一致等。最后，我们调用修改密码的API来更新密码。代码如下：

frontend/src/views/ChangePassword.vue
<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import PersonalNav from '@/components/PersonalNav.vue'
import axios from 'axios'
import showMessage from '@/utils/message.js'

export default {
    name: 'ChangePassword',
    data: function(){
        return {
            current_password: '',
            new_password: '',
            re_new_password: '',
        }
    },
    components: {Header, Footer, PersonalNav},
    methods: {
        setPassword() {
            const current_password = this.current_password.trim()
            const new_password = this.new_password.trim()
            const re_new_password = this.re_new_password.trim()
            if (current_password === '') {
                showMessage('原始密码不能为空')
                return 
            }
            if (new_password === '') {
                showMessage('新密码不能为空')
                return 
            }
            if (new_password !== re_new_password) {
                showMessage('2次密码输入不一致！')
                return
            }
            const formData = {
                current_password: current_password,
                new_password: new_password,
                re_new_password: re_new_password,
            }
            const token = localStorage.getItem('token')
            axios
                .post('/api/users/set_password/', formData)
                .then(response => {
                    showMessage('修改成功','info', ()=>{
                        this.$router.push({
                            name: 'Login'
                        })
                    })
                })
                .catch(error => {
                    // 遍历所有错误信息
                    const errorData = error.response.data
                    const errorMessages = Object.values(errorData).flat(); 
                    for (let i = 0; i < errorMessages.length; i++) {
                    showMessage(errorMessages[i])
                    }
                })
        }
    },

}

</script>

代码解析

根据代码,这段实现了一个修改密码组件的主要逻辑:

定义了当前密码、新密码、确认密码三个数据字段。
导入了Header、Footer、PersonalNav组件。
setPassword方法包含修改密码的主要逻辑:

检验当前密码、新密码是否为空
检验两次新密码是否一致
构造表单数据,包含三个密码字段
发起POST请求,提交表单数据
请求成功,显示成功提示,跳转到登录页
请求失败,显示错误信息

模板可以显示修改密码表单,绑定三个密码字段。
提交按钮触发setPassword方法。
从localStorage获取token,应该在请求头中传递。

总结下这段代码实现了一个修改密码组件的完整逻辑:

表单验证
提交修改密码请求
请求结果处理
自动跳转登录页

通过组合组件、调用接口、页面跳转等方式利用Vue实现了修改密码功能。

如果用户原始密码错误，提示如下图所示信息。图45-原始密码错误

如果用户2次输入密码不一致，提示如下图所示信息。图45-2次密码不一致否则修改成功，如下图所示。图45-密码修改成功

注意：具体的密码更新逻辑需要根据实际情况进行实现。

以上就是修改密码页面的实现方式。在个人中心页面点击“修改密码”之后，将会跳转到修改密码页面，并且在提交修改密码的表单后，将会调用相应的视图函数来处理密码更新。

修改密码页面实现

创建路由​

创建个人中心页面​

创建修改密码页面​

实现修改密码逻辑​

创建路由

创建个人中心页面

创建修改密码页面

实现修改密码逻辑