vue+axios修改功能

要实现修改功能，需要进行以下步骤：

1. 在前端页面添加修改的按钮，点击按钮后触发修改事件。

2. 在修改事件中，通过axios向后端发送请求，传递需要修改的数据。

3. 后端接收到请求后进行数据修改操作，将修改后的数据存入数据库。

4. 后端返回响应消息，告知前端修改是否成功。

5. 前端根据后端返回的响应消息做出相应处理，比如提示用户修改成功或者失败。

以下是一个简单的示例代码：

前端代码：

<template>
  <div>
    <button @click="editData">修改</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      id: '',
      name: '',
      age: '',
      gender: '',
    };
  },

  methods: {
    editData() {
      let data = {
        id: this.id,
        name: this.name,
        age: this.age,
        gender: this.gender,
      };

      axios
        .put(`/api/data/${this.id}`, data)
        .then((response) => {
          console.log(response);
          alert("修改成功！");
        })
        .catch((error) => {
          console.log(error);
          alert("修改失败！");
        });
    },
  },
};
</script>

后端代码：

const express = require('express');
const app = express();

app.use(express.json());

let data = [
  { id: 1, name: '张三', age: 18, gender: '男' },
  { id: 2, name: '李四', age: 20, gender: '女' },
  { id: 3, name: '王五', age: 22, gender: '男' }
];

app.put('/api/data/:id', (req, res) => {
  let id = req.params.id;

  let newData = req.body;

  for (let i = 0; i < data.length; i++) {
    if (data[i].id == id) {
      data[i] = newData;
      break;
    }
  }

  res.send({ message: "修改成功" });
});

app.listen(3000, () => {
  console.log('服务已经启动，监听3000端口');
});

以上代码仅为示例，具体实现需要根据具体需求进行相应的调整。