用vue实现会员系统

使用Vue实现会员系统

项目初始化与依赖安装

创建一个新的Vue项目，安装必要的依赖：

vue create member-system
cd member-system
npm install vue-router axios vuex

路由配置

在src/router/index.js中配置基本路由：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Dashboard from '../views/Dashboard.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
})

状态管理

创建src/store/index.js管理会员状态：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    },
    SET_TOKEN(state, token) {
      state.token = token
    }
  },
  actions: {
    login({ commit }, { email, password }) {
      return axios.post('/api/login', { email, password })
        .then(response => {
          commit('SET_USER', response.data.user)
          commit('SET_TOKEN', response.data.token)
        })
    }
  }
})

登录组件

创建src/views/Login.vue：

<template>
  <div class="login">
    <form @submit.prevent="login">
      <input v-model="email" type="email" placeholder="Email">
      <input v-model="password" type="password" placeholder="Password">
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    login() {
      this.$store.dispatch('login', {
        email: this.email,
        password: this.password
      }).then(() => {
        this.$router.push('/dashboard')
      })
    }
  }
}
</script>

仪表盘组件

创建src/views/Dashboard.vue：

<template>
  <div class="dashboard">
    <h1>Welcome, {{ user.name }}</h1>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.state.user
    }
  },
  methods: {
    logout() {
      this.$store.commit('SET_USER', null)
      this.$store.commit('SET_TOKEN', null)
      this.$router.push('/')
    }
  }
}
</script>

路由守卫

在src/main.js中添加全局路由守卫：

import router from './router'

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.token) {
      next({ name: 'login' })
    } else {
      next()
    }
  } else {
    next()
  }
})

API服务

创建src/services/api.js处理API请求：

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://your-api-url.com',
  headers: {
    'Content-Type': 'application/json'
  }
})

api.interceptors.request.use(config => {
  const token = store.state.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

export default api

会员等级功能扩展

在store中添加会员等级状态：

state: {
  membershipLevel: 'basic'
},
mutations: {
  SET_MEMBERSHIP_LEVEL(state, level) {
    state.membershipLevel = level
  }
}

创建会员升级组件：

<template>
  <div class="upgrade">
    <button @click="upgrade('premium')">Upgrade to Premium</button>
    <button @click="upgrade('vip')">Upgrade to VIP</button>
  </div>
</template>

<script>
export default {
  methods: {
    upgrade(level) {
      this.$store.commit('SET_MEMBERSHIP_LEVEL', level)
    }
  }
}
</script>

样式与布局

添加基础样式到src/App.vue：

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>