vue用户功能实现

Vue用户功能实现方法

用户登录功能

使用Vue Router和axios实现用户登录功能。创建登录表单组件，包含用户名和密码输入框。

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" placeholder="用户名"/>
    <input v-model="password" type="password" placeholder="密码"/>
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error('登录失败', error)
      }
    }
  }
}
</script>

用户注册功能

实现用户注册流程，包括表单验证和API调用。

<template>
  <form @submit.prevent="handleRegister">
    <input v-model="form.username" placeholder="用户名"/>
    <input v-model="form.email" type="email" placeholder="邮箱"/>
    <input v-model="form.password" type="password" placeholder="密码"/>
    <input v-model="form.confirmPassword" type="password" placeholder="确认密码"/>
    <button type="submit">注册</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    validateForm() {
      return this.form.password === this.form.confirmPassword
    },
    async handleRegister() {
      if (!this.validateForm()) {
        alert('两次密码输入不一致')
        return
      }
      try {
        await axios.post('/api/register', this.form)
        this.$router.push('/login')
      } catch (error) {
        console.error('注册失败', error)
      }
    }
  }
}
</script>

用户权限管理

使用Vuex实现全局用户状态管理和权限控制。

// store/user.js
export default {
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
      state.isAuthenticated = !!user
    }
  },
  actions: {
    async fetchUser({ commit }) {
      try {
        const response = await axios.get('/api/user')
        commit('SET_USER', response.data)
      } catch (error) {
        commit('SET_USER', null)
      }
    }
  }
}

用户信息展示

创建用户个人中心页面，展示用户信息和操作选项。

<template>
  <div v-if="user">
    <h3>{{ user.username }}</h3>
    <p>邮箱: {{ user.email }}</p>
    <p>注册时间: {{ formatDate(user.createdAt) }}</p>
    <button @click="logout">退出登录</button>
  </div>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.state.user.user
    }
  },
  methods: {
    formatDate(date) {
      return new Date(date).toLocaleString()
    },
    logout() {
      localStorage.removeItem('token')
      this.$store.commit('SET_USER', null)
      this.$router.push('/login')
    }
  },
  created() {
    this.$store.dispatch('fetchUser')
  }
}
</script>

用户列表管理

实现管理员查看用户列表功能，包含分页和搜索。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索用户"/>
    <table>
      <tr v-for="user in filteredUsers" :key="user.id">
        <td>{{ user.username }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.role }}</td>
      </tr>
    </table>
    <div class="pagination">
      <button @click="prevPage">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      searchQuery: '',
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user => 
        user.username.includes(this.searchQuery) || 
        user.email.includes(this.searchQuery)
      ).slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
    }
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('/api/users')
        this.users = response.data
      } catch (error) {
        console.error('获取用户列表失败', error)
      }
    },
    nextPage() {
      this.currentPage++
    },
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    }
  },
  created() {
    this.fetchUsers()
  }
}
</script>