vue3+ts+mock實現增刪改查json文件的示例代碼

更新時間：2025年07月23日 11:21:54 作者：戰(zhàn)族狼魂

本文主要介紹了vue3+ts+mock實現增刪改查json文件的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

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文件夾中創(chuàng)建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": "租車業(yè)務管理后臺",
    "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"
  }
]

到此這篇關于vue3+ts+mock實現增刪改查json文件的示例代碼的文章就介紹到這了,更多相關vue3 mock增刪改查json內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: