09 用Vue完成一个用户管理应用

学前端的坤坤bond

已于 2024-07-24 09:03:08 修改

阅读量203

点赞数 9

文章标签： vue.js 前端 javascript vue css ecmascript 前端框架

于 2024-07-24 08:59:41 首次发布

本文链接：https://blog.csdn.net/m0_64904350/article/details/140652828

版权

让我们通过另一个案例来进一步展示 Vue.js 的能力：创建一个简单的用户管理应用。这个应用将允许用户查看用户列表、添加新用户、编辑现有用户信息以及删除用户。

项目结构

user-management-app/
|-- public/
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- UserForm.vue
|   |   |-- UserList.vue
|   |-- services/
|   |   |-- userService.js
|   |-- App.vue
|   |-- main.js
|-- package.json

1. `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Management App</title>
</head>
<body>
  <div id="app"></div>
  <script src="/src/main.js"></script>
</body>
</html>

2. `main.js`

import Vue from 'vue';
import App from './App.vue';
import userService from './services/userService';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render: h => h(App),
  data: {
    users: [],
    currentUser: null
  },
  created() {
    this.loadUsers();
  },
  methods: {
    loadUsers() {
      userService.getAll().then(users => {
        this.users = users;
      });
    },
    addOrUpdateUser(user) {
      this.currentUser = user;
    },
    saveUser() {
      userService.save(this.currentUser).then(() => {
        this.loadUsers();
        this.currentUser = null;
      });
    },
    removeUser(id) {
      userService.remove(id).then(() => {
        this.loadUsers();
      });
    }
  }
});

3. `App.vue`

<template>
  <div>
    <h1>User Management</h1>
    <UserList :users="users" @remove="removeUser" />
    <UserForm :user="currentUser" @save="saveUser" />
  </div>
</template>

<script>
import UserList from './components/UserList.vue';
import UserForm from './components/UserForm.vue';

export default {
  components: {
    UserList,
    UserForm
  },
  data() {
    return {
      users: [],
      currentUser: null
    };
  },
  methods: {
    loadUsers() {
      // Load users from service
    },
    addOrUpdateUser(user) {
      // Open form with user data
    },
    saveUser() {
      // Save user data
    },
    removeUser(id) {
      // Remove user
    }
  }
};
</script>

4. `UserList.vue`

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }} - {{ user.email }}
      <button @click="$emit('remove', user.id)">Delete</button>
      <button @click="$emit('edit', user)">Edit</button>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['users'],
  methods: {
    // Methods can be added here if needed
  }
};
</script>

5. `UserForm.vue`

<template>
  <form @submit.prevent="saveUser">
    <input type="text" v-model="user.name" placeholder="Name" required>
    <input type="email" v-model="user.email" placeholder="Email" required>
    <button type="submit">Save</button>
  </form>
</template>

<script>
export default {
  props: ['user'],
  methods: {
    saveUser() {
      this.$emit('save', this.user);
    }
  }
};
</script>

6. `userService.js`

// A mock service for user management
export default {
  getAll() {
    return Promise.resolve([
      { id: 1, name: 'John Doe', email: 'john@example.com' },
      // ... other users
    ]);
  },
  save(user) {
    // Logic to save user
    return Promise.resolve();
  },
  remove(id) {
    // Logic to remove user
    return Promise.resolve();
  }
};