从vue基础开始创建一个简单的增删改查的实例代码(推荐)

下面我将详细讲解如何从Vue基础开始创建一个简单的增删改查的实例代码：

1. 创建基于Vue的前端项目

在创建Vue的前端项目时，需要先安装Vue的脚手架工具Vue CLI。具体安装方法可以参考官方文档：Vue CLI 安装文档。

安装完成后，打开命令行工具，进入到项目存放的目录下，使用以下命令创建一个新的Vue项目：

vue create my-project

其中my-project为项目名称，可以根据自己的需要来自定义。然后根据命令行提示选择好需要安装的插件和工具，等待创建完成即可。

2. 添加Vue Router路由

Vue Router是Vue.js官方的路由管理器。在Vue.js单页面应用中，页面的跳转并不是通过浏览器的URL进行，而是通过Vue Router进行的。要使用Vue Router，需要在Vue项目中进行安装。具体安装方法参考官方文档：Vue Router 安装文档。

在Vue项目中添加Vue Router之后，就可以进行页面的跳转和管理了。

import Vue from 'vue';
import VueRouter from 'vue-router';

// 导入页面组件
import List from './components/List.vue';
import Add from './components/Add.vue';
import Edit from './components/Edit.vue';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/',
      component: List
    },
    {
      path: '/add',
      component: Add
    },
    {
      path: '/edit/:id',
      component: Edit
    }
  ]
});

以上代码意思是在/src目录下分别创建components、router目录，并在其中创建对应的路由配置文件。

在路由配置中，定义了3个路由，分别是：

• /：展示列表页；
• /add：添加数据；
• /edit/:id：编辑数据。

3. 编写增删改查组件

在Vue项目中，组件是开发中的基本单位。因此在这里，我们需要创建相应的组件来实现增删改查的功能。

列表页组件

列表页组件用于展示数据列表。在其中，可以通过调用后端API获取数据列表，并将其展示在页面上。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.description }}</td>
          <td>
            <button @click="toEdit(item.id)" class="btn btn-info">编辑</button>
            <button @click="deleteItem(index)" class="btn btn-danger">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button class="btn btn-primary" @click="toAdd">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    fetchData() {
      // 调用后端API获取数据列表
      // 并将列表数据赋值给this.list
    },
    toAdd() {
      // 跳转到添加页面
      this.$router.push('/add');
    },
    toEdit(id) {
      // 跳转到编辑页面
      this.$router.push(`/edit/${id}`);
    },
    deleteItem(index) {
      // 删除某一条数据
      // 并更新this.list
    }
  }
}
</script>

添加页组件

添加页组件用于添加数据。在其中，可以通过表单来获取用户输入的数据，并调用后端API完成数据的添加操作。

<template>
  <div>
    <div class="form-group">
      <label for="name">名称</label>
      <input type="text" class="form-control" id="name" v-model="formData.name">
    </div>
    <div class="form-group">
      <label for="description">描述</label>
      <textarea class="form-control" id="description" v-model="formData.description"></textarea>
    </div>
    <button class="btn btn-primary" @click="saveData">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {}
    }
  },
  methods: {
    saveData() {
      // 调用后端API保存数据
      // 成功后跳回列表页
    }
  }
}
</script>

编辑页组件

修改页组件用于修改数据。在其中，同样需要通过表单来获取用户输入的数据，并调用后端API完成数据的修改操作。

<template>
  <div>
    <div class="form-group">
      <label for="name">名称</label>
      <input type="text" class="form-control" id="name" v-model="formData.name">
    </div>
    <div class="form-group">
      <label for="description">描述</label>
      <textarea class="form-control" id="description" v-model="formData.description"></textarea>
    </div>
    <button class="btn btn-primary" @click="updateData">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {}
    }
  },
  created() {
    // 在组件创建时，获取当前数据的ID
    // 调用后端API获取数据详情
    // 并将详情数据赋值给this.formData
  },
  methods: {
    updateData() {
      // 调用后端API更新数据
      // 成功后跳回列表页
    }
  }
}
</script>

至此，我们实现了一个简单的增删改查的实例代码。以上示例为非完整示例，仅包含了核心功能和代码逻辑，仍需根据实际需求进行调整和完善。