vue实现个人信息查看和密码修改功能

实现个人信息查看和密码修改功能的主要步骤如下：

1. 配置路由

首先需要在应用中配置路由，以便在 URL 中访问个人信息页和修改个人密码页。在 src/router/index.js 文件中添加以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Account from '@/views/Account'
import Password from '@/views/Password'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/account'
    },
    {
      path: '/account',
      name: 'Account',
      component: Account
    },
    {
      path: '/password',
      name: 'Password',
      component: Password
    }
  ]
})

这样就可以通过 /account 和 /password 来访问个人信息和修改密码的页面。

2. 创建组件

接下来，需要创建用于展示个人信息和修改密码的组件。在 src/views 目录下分别创建 Account.vue 和 Password.vue 两个组件，代码如下：

Account.vue

<template>
  <div>
    <h2>个人信息</h2>
    <p>姓名：{{ userInfo.name }}</p>
    <p>手机号：{{ userInfo.mobile }}</p>
    <p>邮箱：{{ userInfo.email }}</p>
  </div>
</template>

<script>
export default {
  name: 'Account',
  data() {
    return {
      userInfo: {
        name: '张三',
        mobile: '13800000000',
        email: '[e-mail]'
      }
    }
  }
}
</script>

在 Account.vue 组件中，展示了用户的姓名、手机号码和邮箱地址。

Password.vue

<template>
  <div>
    <h2>修改密码</h2>
    <form>
      <div>
        <label for="oldPassword">旧密码</label>
        <input type="password" id="oldPassword" v-model="oldPassword">
      </div>
      <div>
        <label for="newPassword">新密码</label>
        <input type="password" id="newPassword" v-model="newPassword">
      </div>
      <div>
        <label for="confirmPassword">确认密码</label>
        <input type="password" id="confirmPassword" v-model="confirmPassword">
      </div>
      <button type="button" @click="submitPassword">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'Password',
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
  },
  methods: {
    submitPassword() {
      // TODO: 提交密码修改请求
      console.log('提交密码修改请求')
    }
  }
}
</script>

在 Password.vue 组件中，用户可以输入旧密码、新密码和确认密码，然后提交修改密码的请求。

3. 完成功能逻辑

最后，需要在 Password.vue 组件中完成密码修改的功能逻辑，这里简单演示一下：

submitPassword() {
  if (this.newPassword !== this.confirmPassword) {
    alert('新密码和确认密码不一致')
    return
  }

  // 发送修改密码请求
  axios.post('/api/change_password', {
    old_password: this.oldPassword,
    new_password: this.newPassword
  }).then(response => {
    alert('密码修改成功')
    // 重定向到个人信息页
    this.$router.push('/account')
  }).catch(error => {
    console.error(error)
    alert('密码修改失败')
  })
}

这里使用了 axios 库发送修改密码的请求，如果请求成功，就弹出提示框并跳转到个人信息页；如果请求失败，就弹出错误提示框。

以上就是实现个人信息查看和密码修改功能的完整攻略，希望对你有所帮助。