vue无后端增删改查项目

Vue 是一个前端框架，通常需要与后端进行交互才能实现增删改查功能。但是，我们可以使用一些模拟数据或者第三方 API 来模拟后端接口，以实现无后端的增删改查项目。

以下是一个简单的示例：

1. 创建一个 Vue 项目：

vue create my-project

2. 安装 axios，用于发送 HTTP 请求：

npm install axios

3. 在 src 目录下创建一个 mock 文件夹，用于存放模拟数据。

4. 创建一个 mock 数据文件，例如 users.js，用于模拟用户数据：

const users = [
  { id: 1, name: 'John Doe', email: 'john.doe@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com' },
  { id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com' },
];

export default users;

5. 在 src 目录下创建一个 api 文件夹，用于存放 API 接口。

6. 创建一个 users.js 文件，用于定义用户相关的 API 接口：

import axios from 'axios';

const BASE_URL = 'http://localhost:3000'; // 模拟后端接口的基础 URL

export function getUsers() {
  return axios.get(`${BASE_URL}/users`);
}

export function getUser(id) {
  return axios.get(`${BASE_URL}/users/${id}`);
}

export function createUser(data) {
  return axios.post(`${BASE_URL}/users`, data);
}

export function updateUser(id, data) {
  return axios.put(`${BASE_URL}/users/${id}`, data);
}

export function deleteUser(id) {
  return axios.delete(`${BASE_URL}/users/${id}`);
}

7. 在 src 目录下创建一个 views 文件夹，用于存放组件。

8. 创建一个 Users.vue 组件，用于展示用户列表和实现增删改查功能：

<template>
  <div>
    <h1>Users</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="editUser(user)">Edit</button>
            <button @click="deleteUser(user)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>

    <h2>{{ formTitle }}</h2>
    <form @submit.prevent="submitForm">
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="form.name" required>

      <label for="email">Email:</label>
      <input type="email" id="email" v-model="form.email" required>

      <button type="submit">{{ formAction }}</button>
    </form>
  </div>
</template>

<script>
import { getUsers, createUser, updateUser, deleteUser } from '@/api/users';

export default {
  name: 'Users',

  data() {
    return {
      users: [],
      formTitle: 'Add User',
      formAction: 'Add',
      form: {
        name: '',
        email: '',
      },
    };
  },

  created() {
    this.loadUsers();
  },

  methods: {
    loadUsers() {
      getUsers()
        .then(res => {
          this.users = res.data;
        })
        .catch(err => {
          console.error(err);
        });
    },

    editUser(user) {
      this.formTitle = 'Edit User';
      this.formAction = 'Save';
      this.form = { ...user };
    },

    deleteUser(user) {
      const confirmDelete = confirm(`Are you sure you want to delete ${user.name}?`);

      if (confirmDelete) {
        deleteUser(user.id)
          .then(() => {
            this.loadUsers();
          })
          .catch(err => {
            console.error(err);
          });
      }
    },

    submitForm() {
      if (this.formAction === 'Add') {
        createUser(this.form)
          .then(() => {
            this.loadUsers();
            this.clearForm();
          })
          .catch(err => {
            console.error(err);
          });
      } else {
        updateUser(this.form.id, this.form)
          .then(() => {
            this.loadUsers();
            this.clearForm();
          })
          .catch(err => {
            console.error(err);
          });
      }
    },

    clearForm() {
      this.formTitle = 'Add User';
      this.formAction = 'Add';
      this.form = {
        name: '',
        email: '',
      };
    },
  },
};
</script>

<style>
table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 0.5rem;
}
</style>

9. 在 App.vue 中引入 Users 组件：

<template>
  <div id="app">
    <Users />
  </div>
</template>

<script>
import Users from '@/views/Users';

export default {
  name: 'App',

  components: {
    Users,
  },
};
</script>

现在运行项目，即可看到一个简单的无后端增删改查项目。注意，在实际开发中，我们通常会使用更完整的后端框架（如 Node.js + Express 或 Spring Boot）来实现 API 接口。