跳到主要内容

修改密码页面实现

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

图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>
🔒 试读结束

继续阅读完整内容

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

查看课程详情