1.代码结构图:
![](https://i-blog.csdnimg.cn/direct/df94f3b719ff4390a1af566b322f0434.png)
![](https://i-blog.csdnimg.cn/direct/938f46422bb2493cbcc5e62aa978f62f.png)
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文件
![](https://i-blog.csdnimg.cn/direct/4af7a39a65ed4724bc6061322beee413.png)
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) &