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