vue3+ts+mock实现增删改查json文件

战族狼魂

已于 2024-08-26 10:51:36 修改

阅读量551

点赞数 10

分类专栏：前端文章标签： vue.js 前端 javascript

于 2024-08-26 10:47:46 首次发布

本文链接：https://blog.youkuaiyun.com/nndsb/article/details/141557968

版权

前端专栏收录该内容

28 篇文章

订阅专栏

1.代码结构图：

2.路由

import { createRouter, createWebHashHistory } from "vue-router";

import Home from "@/pages/home/index.vue";
import AppDetail from "@/pages/app-detail/index.vue";
import PageDetail from "@/pages/page-detail/index.vue";

const routes = [
  {
    path: `/`,
    component: Home,
  },
  {
    path: `/app/:id`,
    name: 'app',
    component: AppDetail,
  },

  {
    path: `/page/:id`,
    name: 'page',
    component: PageDetail,
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes,
});

export default router;

3.在api文件夹中创建index.ts文件

import { request } from "@/utils"

export const queryApp = () => request("/web_bp_api/app/list");
export const addApp = (newData: any) => request('/web_bp_api/app/add', newData);
export const updateApp = (id: number | string, updatedData: any) => request(`/web_bp_api/app/update`, { id, updatedData });
export const deleteApp = (id: number | string) => request(`/web_bp_api/app/delete`, { id });
export const queryPage = () => request("/web_bp_api/page/list");
export const addPage = (newPageData: any) => request('/web_bp_api/page/add', newPageData);
export const updatePage = (pageId: string | number, updatedPageData: any) => request(`/web_bp_api/page/update`, { pageId, updatedPageData });
export const deletePage = (pageId: string | number) => request(`/web_bp_api/page/delete`, { pageId });
export const queryModule = () => request("/web_bp_api/module/list");
export const addModule = (newModuleData: any) => request('/web_bp_api/module/add', newModuleData);
export const updateModule = (moduleId: string | number, updatedModuleData: any) => request(`/web_bp_api/module/update`, { moduleId, updatedModuleData });
export const deleteModule = (moduleId: string | number) => request(`/web_bp_api/module/delete`, { moduleId });

4.mock

import { responseSuccessFormat, responseErrorFormat } from "./utils";
import * as fs from 'fs';
import * as path from 'path';
// 加载初始数据
const appData = JSON.parse(fs.readFileSync(path.resolve('./mock/data/app.json'), 'utf8'));
const pageData = JSON.parse(fs.readFileSync(path.resolve('./mock/data/page.json'), 'utf8'));
const moduleData = JSON.parse(fs.readFileSync(path.resolve('./mock/data/module.json'), 'utf8'));

// 在内存中模拟数据库
const mockDatabase = {
  app: appData,
  page: pageData,
  module: moduleData
};
// 模拟的API路由处理函数
export default {
  // 列出应用（使用GET）
  "POST /web_bp_api/app/list": responseSuccessFormat(mockDatabase.app),
  // 新增应用（使用POST）
  "POST /web_bp_api/app/add": (req: any) => {
    console.log(req.body)
    const model = mockDatabase.app.reduce((prev: { id: number; }, curr: { id: number; }) => {
      return prev.id > curr.id ? prev : curr
    })
    console.log(model.id)
    const newData = req.body; // 假设请求体中包含新数据
    newData.id = parseInt(model.id) + 1;
    newData.createTime = new Date().toLocaleString();
    newData.updateTime = "";
    mockDatabase.app.push(newData); // 模拟添加到数组中
    fs.writeFileSync(path.resolve('./mock/data/app.json'), JSON.stringify(mockDatabase.app, null, 2), 'utf8');
    return responseSuccessFormat(newData); // 返回新添加的数据作为示例
  },
  // 删除应用（使用DELETE，需要ID）
  "POST /web_bp_api/app/delete": (req: any) => {
    console.log(req.body)
    const id = req.body.id;
    // 假设ID是索引（在真实应用中，您可能需要更复杂的逻辑来找到对象）
    const index = mockDatabase.app.findIndex((item: { id: number; }) => item.id === parseInt(id));
    if (index !== -1) {
      mockDatabase.app.splice(index, 1); // 从数组中删除
      fs.writeFileSync(path.resolve('./mock/data/app.json'), JSON.stringify(mockDatabase.app, null, 2), 'utf8');
      return responseSuccessFormat({ deletedId: id });
    } else {
      return { status: 404, message: '未找到指定ID的应用' };
    }
  },

  // 更新应用（使用PUT，需要ID）
  "POST /web_bp_api/app/update": (req: any) => {
    console.log(req.body)
    const id = req.body.id;
    const newData = req.body.updatedData;
    newData.updateTime = new Date().toLocaleString();
    const index = mockDatabase.app.findIndex((item: { id: number; }) => item.id === parseInt(id));
    if (index !== -1) {
      mockDatabase.app[index] = { ...mockDatabase.app[index], ...newData };
      // 现在，您可能需要将更新后的数据写回文件
      fs.writeFileSync(path.resolve('./mock/data/app.json'), JSON.stringify(mockDatabase.app, null, 2), 'utf8');
      return responseSuccessFormat(mockDatabase.app[index]);
    } else {
      return { status: 404, message: '未找到指定ID的应用' };
    }
  },
  "POST /web_bp_api/page/list": responseSuccessFormat(mockDatabase.page),
  "POST /web_bp_api/page/add": (req: any) => {
    const newData = req.body; // 假设请求体中包含新数据
    mockDatabase.page.push(newData); // 模拟添加到数组中
    // 现在，您可能需要将更新后的数据写回文件
    fs.writeFileSync(path.resolve('./mock/data/page.json'), JSON.stringify(mockDatabase.page, null, 2), 'utf8');
    return responseSuccessFormat(newData); // 返回新添加的数据作为示例
  },
  "POST /web_bp_api/page/delete": (req: any) => {
    const { id } = req.params;
    // 假设ID是索引（在真实应用中，您可能需要更复杂的逻辑来找到对象）
    const index = mockDatabase.page.findIndex((item: { id: number; }) => item.id === parseInt(id));
    if (index !== -1) {
      mockDatabase.page.splice(index, 1); // 从数组中删除
      return responseSuccessFormat({ deletedId: id });
    } else {
      return { status: 404, message: '未找到指定ID的应用' };
    }
  },
  "POST /web_bp_api/page/update": (req: any) => {
    const { id } = req.params;
    const newData = req.body;
    const index = mockDatabase.page.findIndex((item: { id: number; }) => item.id === parseInt(id));
    if (index !== -1) {
      mockDatabase.page[index] = { ...mockDatabase.page[index], ...newData };
      return responseSuccessFormat(mockDatabase.page[index]);
    } else {
      return { status: 404, message: '未找到指定ID的应用' };
    }
  },
  "POST /web_bp_api/module/list": responseSuccessFormat(mockDatabase.module),
  "POST /web_bp_api/module/add": (req: any) => {
    const newData = req.body; // 假设请求体中包含新数据
    mockDatabase.module.push(newData); // 模拟添加到数组中
    return responseSuccessFormat(newData); // 返回新添加的数据作为示例
  },
  "POST /web_bp_api/module/delete": (req: any) => {
    const { id } = req.params;
    const index = mockDatabase.module.findIndex((item: { id: number; }) => item.id === parseInt(id));
    if (index !== -1) {
      mockDatabase.module.splice(index, 1);
      return responseSuccessFormat({ deletedId: id });
    } else {
      return { status: 404, message: '未找到指定ID的应用' };
    }
  },
  "POST /web_bp_api/module/update": (req: any) => {
    const { id } = req.params;
    const newData = req.body;
    const index = mockDatabase.module.findIndex((item: { id: number; }) => item.id === parseInt(id));
    if (index !== -1) {
      mockDatabase.module[index] = { ...mockDatabase.module[index], ...newData };
      return responseSuccessFormat(mockDatabase.module[index]);
    } else {
      return { status: 404, message: '未找到指定ID的模块' };
    }
  },
};

app.json文件

[
  {
    "id": 2,
    "name": "租车平台56",
    "description": "租车业务管理后台",
    "spmid": "a456",
    "createTime": "2023-05-09",
    "updateTime": "2024/8/25 00:32:43"
  },
  {
    "id": 3,
    "name": "埋点管理",
    "description": "埋点申请、埋点数据报表查看",
    "spmid": "a789",
    "createTime": "2023-05-09",
    "updateTime": "2023-05-09"
  }
]