在vue项目中加入增删改查的功能

在Vue项目中添加增删改查功能需要以下步骤：

1. 安装axios

npm install axios

2. 创建API文件

在src目录下创建一个名为api.js的文件，用于封装API请求。

import axios from 'axios'

const base_url = 'http://localhost:3000'

export const api = {
    fetchList() {
        return axios.get(`${base_url}/api/list`)
    },
    add(data) {
        return axios.post(`${base_url}/api/add`, data)
    },
    delete(id) {
        return axios.delete(`${base_url}/api/delete/${id}`)
    },
    update(data) {
        return axios.put(`${base_url}/api/update`, data)
    }
}

3. 创建组件

在src/components目录下创建一个名为List.vue的组件，用于展示列表数据，并添加增删改查功能。

<template>
  <div>
    <h2>Todo List</h2>
    <div>
      <label>任务名称:</label>
      <input v-model="taskName" />
      <button @click="addTask">添加</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>任务名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="task in tasks" :key="task.id">
          <td>{{ task.id }}</td>
          <td>{{ task.name }}</td>
          <td>
            <button @click="editTask(task)">编辑</button>
            <button @click="deleteTask(task.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="editing">
      <label>任务名称:</label>
      <input v-model="editTaskName" />
      <button @click="updateTask">更新</button>
    </div>
  </div>
</template>

<script>
import { api } from '../api'

export default {
  data() {
    return {
      tasks: [],
      taskName: '',
      editing: false,
      editTaskId: null,
      editTaskName: ''
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      api.fetchList()
        .then(res => {
          this.tasks = res.data
        })
        .catch(err => {
          console.error(err)
        })
    },
    addTask() {
      const data = {
        name: this.taskName
      }
      api.add(data)
        .then(() => {
          this.fetchList()
        })
        .catch(err => {
          console.error(err)
        })
    },
    deleteTask(id) {
      api.delete(id)
        .then(() => {
          this.fetchList()
        })
        .catch(err => {
          console.error(err)
        })
    },
    editTask(task) {
      this.editing = true
      this.editTaskId = task.id
      this.editTaskName = task.name
    },
    updateTask() {
      const data = {
        id: this.editTaskId,
        name: this.editTaskName
      }
      api.update(data)
        .then(() => {
          this.fetchList()
          this.editing = false
          this.editTaskId = null
          this.editTaskName = ''
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}
</script>

4. 添加路由

在src/router/index.js中添加路由配置。

import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../components/List.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'List',
    component: List
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

至此，一个简单的增删改查功能就完成了。