数据模拟（mockjs）

1、安装/引入

下载mockjs

yarn add mockjs

在src下创建mockjs文件

//src/mock/index.js

在main.js引入mockjs

//src/main.js

//引入mockjs
import './mock/index.js'

//引入ElementUI
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

2、编写模拟数据的代码

//src/mock/index.js

//导入mockjs
import Mock from 'mockjs';
// 内存模拟数据
const mock = () => {
  const arr = []
  for (let i = 0; i < 5; i++) {
      //循环添加5条数据到arr里
    arr.push({
      id: Mock.mock('@guid'),
      name: Mock.mock('@cname'),
      place: Mock.mock('@county(true)'),
    })
  }
  return arr
}
//数据初始化
let arr = mock()

//获取初始数据
Mock.mock('/list', 'get', (options) => {
  return {
    status: 200,
    message: '获取成功',
    list: arr
  }
})
//根据id删除数据
Mock.mock('/del', 'post', (options) => {
  const body = JSON.parse(options.body)
  //主要要将过滤后的数组重新赋值给arr
  arr = arr.filter(item => item.id !== body.id)
  return {
    status: 200,
    message: '删除成功',
    list: arr
  }
})

3、发送请求获取数据

<script setup>
import axios from "axios";
import { ref } from "vue";
const list = ref([])
//获取数据
const geList = async () => {
  const res = await axios.get('/list')
  list.value = res.data.list
}
geList()//页面初始化
//删除数据
const delList = async (id) => {
  const res = await axios.post('/del', {id})
  list.value = res.data.list
}

</script>