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

news2024/11/24 5:06:24

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"
  }
]

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2082404.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

hadoop生态圈（四）- MapReduce

hadoop生态圈（四）- MapReduce

目录 MapReduce的基本原理 MapReduce流程图 Map阶段执行流程 Reduce阶段执行流程 Shuffle机制 MapReduce解决的是海量数据计算 MapReduce的思想核心是“分而治之”。就是把一个复杂的问题按一定的“分解”方法分为规模较小的若干部分，然后逐个解决，…
阅读更多...
作业0828

作业0828

使用C手动封装一个顺序表&#xff0c;包含成员数组一个&#xff0c;成员变量N个 #include <iostream> #include <string>using namespace std;using datatype int;struct Seqlist { private:datatype *data NULL;int size 0;int len 0;public://初始化函数voi…
阅读更多...
从零成本到高效能：免费报表工具在金融行业的实践与应用

从零成本到高效能：免费报表工具在金融行业的实践与应用

在当今金融行业中&#xff0c;多样化的报表体系是支撑机构高效运营、精准决策的重要基石。这些报表不仅反映了金融机构的财务状况&#xff0c;还涵盖了风险管理、业绩评估、流动性管理及合规监管等多个维度。今天我将带领大家深入探讨金融行业中这些报表的多样性和重要性&#…
阅读更多...
数据的存储3（第三十二天）

数据的存储3（第三十二天）

1.整形在内存中的存储&#xff08;补充&#xff09; 原码&#xff0c;反码&#xff0c;补码的概念 &#xff08;1&#xff09;正数的原码&#xff0c;反码&#xff0c;补码相同 &#xff08;2&#xff09;对于整数来说&#xff1a;数据存放内存中其实存放的就是补码 2.浮点…
阅读更多...
最长的一帧学习 part3

最长的一帧学习 part3

文章目录 八、osgUtil:: SceneView::cull ()part1 初始化必要的SceneView类成员变量part2 立体显示的处理part3 执行SceneView::cullStage函数&#xff0c;它也是场景视图筛选工作的核心函数part3.1 首先统计场景中的遮挡节点&#xff08;OccluderNode&#xff09;&#xff0c;…
阅读更多...
【python】关于判断空值None、判断len()=0，和 if not 的区别

【python】关于判断空值None、判断len()=0，和 if not 的区别

如果我们问一个问题&#xff1a;如果一个东西是不存在的&#xff0c;那么它的长度是多少&#xff1f; 我一开始会不假思索地回答&#xff1a;都不存在了&#xff0c;长度肯定是0啦。 但是细想一下&#xff0c;它都不存在了&#xff0c;还怎么会有长度呢&#xff1f; 这就有点像…
阅读更多...
【Java】数据类型与变量（二）

【Java】数据类型与变量（二）

目录 3.变量 3.1什么是变量&#xff08;变量的概念&#xff09; 3.2语法格式 ​编辑​编辑3.3整型变量 3.3.1整型变量如何定义 ​编辑 3.3.2长整型变量 3.3.3短整型变量 3.3.4字节型变量 3.4浮点型变量 3.4.1双精度浮点型 3.4.2单精度浮点型 3.4.3单精度浮点型与双…
阅读更多...
【大模型开源教程】Git开源教程「动手学大模型应用开发」，学微调也太简单了

【大模型开源教程】Git开源教程「动手学大模型应用开发」，学微调也太简单了

LLM 正逐步成为信息世界的新革命力量&#xff0c;其通过强大的自然语言理解、自然语言生成能力&#xff0c;为开发者提供了新的、更强大的应用开发选择。随着国内外井喷式的 LLM API 服务开放&#xff0c;如何基于 LLM API 快速、便捷地开发具备更强能力、集成 LLM 的应用&…
阅读更多...
AI搜索“懒人神器”，如何向谷歌和百度发起挑战？

AI搜索“懒人神器”，如何向谷歌和百度发起挑战？

“属于传统搜索的时代&#xff0c;已经彻底落幕了。” 2024年2月&#xff0c;全球IT分析与评估机构Gartner在一份报告中如此判断。同时该机构预测&#xff0c;到2026年&#xff0c;传统搜索引擎的搜索量将减少25&#xff05;。 与此同时&#xff0c;从最近公布的财报来看&…
阅读更多...
源代码加密是什么？给源代码加密如何做？

源代码加密是什么？给源代码加密如何做？

一、源代码加密是什么&#xff1f; 源代码加密是一种通过特定的加密算法和工具对软件源代码文件进行保护的技术&#xff0c;使得只有授权用户才能解密和访问代码。加密技术可以防止未经授权的访问、阅读、修改或复制源代码。源代码加密&#xff0c;则是对源代码文件进行加密处…
阅读更多...
Kubernetes高级调度2

Kubernetes高级调度2

一.Taint和Toleration 1.为什么使用taint &#xff08;1&#xff09;不让pod被部署到被设置为污点的节点上。 &#xff08;2&#xff09;不让master节点部署业务&#xff0c;只部署系统组件 &#xff08;3&#xff09;除了指点pod外&#xff0c;不想让节点部署其他pod 2.为…
阅读更多...
解决ESP32 VScode环境报错：Something went wrong while trying to build the project。

解决ESP32 VScode环境报错：Something went wrong while trying to build the project。

当我在vscode开发esp32时&#xff0c;点击构建项目 报了个错。 说明&#xff1a;项目目录包含了中文字符&#xff0c;我给换成全英文路径&#xff0c;再次尝试 成功 改完发现还有问题&#xff0c;来到这个目录&#xff0c;里面的中文也要改成英文。&#xff08;不止&#xff0…
阅读更多...
Qt是不是经常写个QWidget输入参数？

Qt是不是经常写个QWidget输入参数？

发现Qt自带的一个输入控件QInputDialog类 QInputDialog类提供了一个简单方便的对话框&#xff0c;用于从用户获取单个值。 输入值可以是字符串、数字或列表中的项。必须设置一个标签来告诉用户他们应该输入什么。 提供了五个静态方便函数:getText()、getMultiLineText()、getI…
阅读更多...
干货：2024年四大免费PDF编辑器精选指南！

干货：2024年四大免费PDF编辑器精选指南！

在日常生活工作中&#xff0c;我们几乎每天都会接触到PDF文档。当我们需要对这些文档进行编辑时&#xff0c;一些出色的免费PDF编辑器十分重要。接下来&#xff0c;我将分享自己使用过的几款优秀的免费PDF编辑器&#xff01; 福昕PDF编辑器&#xff1a;简洁高效的编辑体验 链…
阅读更多...
【Python基础】学习Python常见的几种运行报错，看完之后，你就不会再犯错了！！！（附带解析）

【Python基础】学习Python常见的几种运行报错，看完之后，你就不会再犯错了！！！（附带解析）

学习Python时&#xff0c;遇到运行时错误是很常见的&#xff0c;这些错误通常是因为代码中存在语法错误、逻辑错误或是对Python的某些特性理解不够深入所导致的。 如果你也是刚入门的小伙伴呢&#xff0c;小编为你们准备了入门Python学习籽料和Python入门实践&#xff0c;点击…
阅读更多...
期权末日轮的前提——高杠杆特性是怎样的？

期权末日轮的前提——高杠杆特性是怎样的？

今天带你了解期权末日轮的前提——高杠杆特性是怎样的&#xff1f;期权末日轮是临近期权到期行权&#xff0c;期权合约往往出现大的波动涨跌幅。 如何在实际交易过程中艺术的运用期权产品的高杠杆&#xff0c;始终是一个永无止境的话题&#xff0c;结合一些实战上的经验就是&a…
阅读更多...
miniQMT怎么获取历史/最新行情？miniQMT原生python环境如何获取历史/最新行情？

miniQMT怎么获取历史/最新行情？miniQMT原生python环境如何获取历史/最新行情？

原生Python 调用方法 python from xtquant import xtdata xtdata.get_market_data_ex(field_list[],# 字段stock_list[],# 合约代码列表period1d,# 数据周期——1m、5m、1d、tickstart_time,# 数据起始时间%Y%m%d或%Y%m%d%H%M%Send_time,# 数据结束时间%Y%m%d或%Y%m%d%H%M%Sc…
阅读更多...
QT中UI实现小功能的步骤

QT中UI实现小功能的步骤

1、新建一个目录 要勾选Generate form&#xff0c;生成一个.ui文件 把Shadow build的勾选取消&#xff0c;避免产生两个文件夹&#xff01; 2、具体步骤 1.在UI界面中拖拽需要的组件对象 2.修改组件对象的名称 3.保存并运行&#xff0c;根据运行结果适当调整界面布局 4.业…
阅读更多...
真正懂耳机的人选了什么？开放式耳机推荐

真正懂耳机的人选了什么？开放式耳机推荐

真正懂耳机的人&#xff0c;在选择耳机时&#xff0c;往往会更注重音质的自然还原、佩戴的舒适度、以及耳机的设计是否符合个人审美和生活习惯。开放式耳机以其独特的开放式设计&#xff0c;能够带来更为自然、宽广的声场体验&#xff0c;同时减少对耳朵的压迫感&#xff0c;成…
阅读更多...
宝藏!《联盟作文班配套讲义》(九尾篇)

宝藏!《联盟作文班配套讲义》(九尾篇)

本文内容&#xff0c;全部选自自动化考研联盟企业店的&#xff1a;独家制作&#xff0c;《联盟作文班配套讲义》(九尾篇)。 Part1&#xff1a;资料封面&目录 Part2&#xff1a;各章节内容展示 第一章 考研英语作文开篇总述 第二章、 小作文(英语一英语二) 第三章、 英语&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023