前后台共用的页面，要如何开发，共享

前后台共用页面是现代Web开发中非常常见的需求核心在于分层架构设计和组件化思维。以下是系统化的开发方案一、架构设计原则plain复制┌─────────────────────────────────────┐ │ 表现层 (Presentation) │ │ ┌─────────────┐ ┌─────────────┐ │ │ │ 前台界面 │ │ 后台界面 │ │ │ │ (用户视图) │ │ (管理视图) │ │ │ └──────┬──────┘ └──────┬──────┘ │ │ └────────┬────────┘ │ │ 共用组件层 │ │ (UI组件/业务逻辑/数据层) │ └─────────────────────────────────────────┘二、具体实现方案1.组件化架构推荐将页面拆分为容器组件和展示组件TypeScript复制// 共用基础展示组件 (components/ProductCard.tsx) interface ProductCardProps { product: Product; mode: front | admin; // 模式区分 onEdit?: (id: string) void; // 后台特有 onBuy?: (id: string) void; // 前台特有 } export const ProductCard ({ product, mode, onEdit, onBuy }: ProductCardProps) { return ( div classNameproduct-card img src{product.image} / h3{product.name}/h3 {/* 根据模式渲染不同操作 */} {mode front ? ( button onClick{() onBuy?.(product.id)}立即购买/button ) : ( button onClick{() onEdit?.(product.id)}编辑商品/button )} /div ); };2.布局系统分离TypeScript复制// layouts/FrontLayout.tsx - 前台布局营销导向 const FrontLayout ({ children }) ( div classNamefront-layout MarketingHeader / main{children}/main Footer / /div ); // layouts/AdminLayout.tsx - 后台布局功能导向 const AdminLayout ({ children }) ( div classNameadmin-layout Sidebar / main classNameadmin-content{children}/main /div ); // 页面路由配置 const routes [ { path: /product/:id, component: ProductDetailPage, layouts: { front: FrontLayout, admin: AdminLayout } } ];3.数据层抽象TypeScript复制// hooks/useProduct.ts - 共用数据逻辑 export const useProduct (id: string) { // 数据获取逻辑完全相同 const { data, loading } useQuery(GET_PRODUCT, { variables: { id } }); // 权限控制通过上下文注入而非硬编码 const { permissions } useAuth(); return { product: data?.product, loading, canEdit: permissions.includes(product:edit), canDelete: permissions.includes(product:delete) }; };三、权限与功能控制策略表格维度前台后台实现方式可见字段价格、库存、评价成本、供应商、操作日志字段级权限控制操作按钮购买、收藏编辑、下架、删除条件渲染数据范围上架商品全部商品含草稿API参数过滤路由权限公开需登录角色验证路由守卫TypeScript复制// 字段级权限组件 const PermissionField ({ permission, children, fallback null }: PermissionFieldProps) { const { hasPermission } useAuth(); return hasPermission(permission) ? children : fallback; }; // 使用示例 ProductCard product{product} actions{ PermissionField permissionproduct:buy BuyButton / /PermissionField PermissionField permissionproduct:edit EditButton / /PermissionField / } /四、技术栈实践建议现代前端方案TypeScript复制// Next.js App Router 示例 // app/(front)/product/[id]/page.tsx 前台路由 // app/(admin)/product/[id]/page.tsx 后台路由 // 共用页面组件 // components/product/ProductDetail/index.tsx // 不同布局 // app/(front)/layout.tsx vs app/(admin)/layout.tsx关键配置JavaScript复制// next.config.js 或路由配置 module.exports { // 共享组件路径别名 resolve: { alias: { shared: ./src/shared, front: ./src/front, admin: ./src/admin } } };五、开发工作流建议先抽象共用部分识别真正共用的业务逻辑通常是数据展示和基础交互再差异化包装为前后台分别创建薄层的容器组件处理布局差异权限驱动渲染用权限系统控制功能显隐而非写死判断API分层设计GET /api/product/:id→ 基础数据共用GET /api/admin/product/:id→ 完整数据含敏感字段这种架构的优势在于修改业务逻辑只需改一处UI差异各自维护权限控制灵活可配。