创建本地Mock 进行一个TodoList

 // 安装依赖包：
 yarn add mockjs --save
 yarn add axios //在此我们只使用它来进行一个接口的请求并不做封装

创建 mock文件夹

api.js 文件

import Mock from 'mockjs';
import api from './index';

Mock.mock('/list', api.getList); //获取列表的接口
Mock.mock(/\/delete.*/, api.deleteData); // 删除的接口需要有入参
Mock.mock('/add', api.addData); // 新增的一个接口
Mock.mock('/update', api.updateData); // 编辑的接口

index.js 文件

// 导入Mock库
import Mock from 'mockjs';
// 这是手写的一个公共方法 -- 下面会注释出来
import { parseQueryString } from '../src/utils/utils';

// 模拟数据数组
const arr = []; // 维护一个数组列表
for (let i = 0; i < 10; i++) {
  arr.push({
    id: Mock.mock('@id'),
    date: Mock.mock('@date'),
    name: Mock.mock('@cname'),
    address: Mock.mock('@county(true)'),
  });
}

// 导出模拟接口数据
export default {
  getList: () => {
    return {
      code: 200,
      data: arr,
    };
  },
  deleteData: params => {
    const { id } = parseQueryString(params?.url);
    const index = arr.findIndex(item => item.id === id);
    if (index !== -1) {
      arr.splice(index, 1);
      return {
        code: 200,
        message: '删除成功',
      };
    } else {
      return {
        code: 404,
        message: '没有查询到改条数据',
      };
    }
  },
  
  // 以下两个接口并未调试
  addData: newData => {
    arr.push(newData);
    return {
      code: 200,
      message: '添加成功',
    };
  },
  updateData: (id, updatedData) => {
    const index = arr.findIndex(item => item.id === id);
    if (index !== -1) {
      arr[index] = updatedData;
      return {
        code: 200,
        message: '修改成功',
      };
    } else {
      return {
        code: 404,
        message: '没有查询到改条数据',
      };
    }
  },
};

具体代码实现如上

当然需要在入口文件 main.js引入一下 创建的api.js文件

以上我们就创建好了这个本地的mock接口可以直接使用了

调用接口--实现一个todolist

也就是所谓的增删改查

<template>
  <el-table :data="list">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址" width="280"> </el-table-column>
    <el-table-column fixed="right" label="操作" width="200">
      <template #default="{ row }">
        <el-button @click="handleClick(row)" text size="small">查看</el-button>
        <el-button type="info" size="small" @click="editClick(row)">编辑</el-button>
        <el-button type="danger" size="small" @click="delClick(row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

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

const list = ref([]);
// 创建请求列表的接口 并把拿到的数据赋值给响应式数据 list
const getList = async () => {
  const {
    data: { data },
  } = await axios.get('/list');
  list.value = data;
};

// 挂载完成后进行一个接口的请求
onMounted(() => getList());

//删除的方法 -- 传递接口的id 
const delClick = async e => {
  await axios.get(`/delete?id=${e.id}`);
  getList();
};

// 查看详情
const handleClick = async e => {};

// 编辑
const editClick = async e => {};
</script>
// 以上方法可以直接使用，但是功能没有完全实现，简单介绍一下在对vue3学习的时候如何在本地去创建mock数据
// 这个应该是一个相对简单的方法

utils 公共的方法 parseQueryString

// 入参是接受一个url，返回后面拼接的参数
// 类似于传递 /delect?id=123456789
export function parseQueryString(queryString) {
  const params = {};
  const queryStringParts = (queryString || '').split('?')[1]?.split('&') || [];
  for (const part of queryStringParts) {
    if (!part) continue; // 跳过空部分
    const [key, value] = part.split('=');
    params[key] = value || '';
  }
  // 返回一个对象 {id:'123456789'}
  return params;
}