使用mock模拟数据接口

vue.config.js

const apis = require('./mock')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    setupMiddlewares (middlewares, devServer) {
      Object.keys(apis).forEach(key => {
        const [ method, path ] = key.split(' ')
        devServer.app[method.toLowerCase()](path, apis[key])
      })
      return middlewares;
    }
  }
})

package.json

  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.26.1",
    "core-js": "^3.8.3",
    "element-plus": "^2.0.5",
    "mockjs": "^1.1.0",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },

mock.js

// 内存模拟数据
const arr = []
for (let i = 0; i < 10; i++) {
  arr.push({
    id: Mock.mock('@guid'),
    name: Mock.mock('@cname'),
    place: Mock.mock('@county(true)'),
  })
}
module.exports = {
  'GET /list': (req, res) => {
    res.json(arr)
  },
  'DELETE /del': (req, res) => {
    console.log(req)
    const index = arr.findIndex((item) => item.id === req.query.id)
    arr.splice(index, 1)
    res.json({ success: true })
  },
}

main.js

import App from './App.vue'
import ElementUI from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementUI).mount('#app')

app.vue

  <div class="app">
    <el-table :data="list">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name" width="150"></el-table-column>
      <el-table-column label="籍贯" prop="place"></el-table-column>
      <el-table-column label="操作" width="100">
        <template v-slot="{ row }">
          <el-button type="text" @click="delRow(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';

const list = ref([])
const getList = async () => {
  await axios.get('/list').then((res) => {
  list.value = res.data
  console.log(list.value);
  })
}

const delRow =  (id) => {
 axios.delete(`/del?id=${id}`).then(() => {
  getList()
})
console.log(id);
}

onMounted(() => {
getList()
})
</script>

<style>
.app {
  width: 980px;
  margin: 100px auto 0;
}
</style>