前后端分离前台、中后台、中台、后台目录结构

西洼工作室

28人浏览 · 2026-06-07 21:12:52

西洼工作室 · 2026-06-07 21:12:52 发布

project-root/
├── frontend/                     # 前端大目录（可独立构建、部署）
│   ├── customer-web/             # 【前台】C端用户界面 (H5/PC/小程序)
│   │   ├── src/
│   │   ├── public/
│   │   ├── package.json
│   │   └── ...
│   └── admin-web/                # 【中后台】内部运营/管理界面
│       ├── src/
│       │   ├── views/            # 页面：运营配置、订单处理、数据看板等
│       │   └── ...
│       └── package.json
│
├── backend/                      # 后端单体应用（Java Spring Boot 示例）
│   ├── src/main/java/com/company/
│   │   ├── MidPlatform/          # 【中台】共享业务能力模块
│   │   │   ├── order/            # 订单中心
│   │   │   ├── product/          # 商品中心
│   │   │   ├── user/             # 用户中心
│   │   │   └── ...               # 其他业务中台服务
│   │   ├── Admin/                # 【后台】系统管理模块
│   │   │   ├── auth/             # 权限、角色、账号
│   │   │   ├── system/           # 系统配置、日志、监控
│   │   │   └── ...
│   │   ├── Common/               # 公共工具、异常、基础实体
│   │   └── ApiGateway/           # 统一对外API路由（Controller层聚合）
│   ├── src/main/resources/
│   ├── pom.xml
│   └── ...
│
├── docs/                         # 文档（接口文档、架构说明等）
├── scripts/                      # 构建、部署脚本
└── README.md





frontend/
├── customer-web/          # Web 前台（H5/PC）
├── admin-web/             # 中后台管理端
└── uniapp/                # 【新增】跨端应用（小程序/App）
    ├── .env
    ├── .eslintrc.js
    ├── babel.config.js
    ├── package.json
    ├── tsconfig.json
    ├── manifest.json      # uni-app 配置（appid、权限等）
    ├── pages.json         # 页面路由、样式配置
    ├── uni.scss           # 全局样式变量
    ├── App.vue
    ├── main.js
    ├── static/            # 静态资源（图片等）
    ├── src/
    │   ├── api/           # 封装的中台接口
    │   │   ├── client.js
    │   │   ├── product.js
    │   │   ├── order.js
    │   │   └── user.js
    │   ├── components/    # 跨端公共组件
    │   │   └── ProductCard.vue
    │   ├── pages/         # 页面（同微信小程序页面组织方式）
    │   │   ├── index/     # 首页
    │   │   ├── product/
    │   │   │   ├── list/
    │   │   │   └── detail/
    │   │   ├── cart/
    │   │   ├── order/
    │   │   │   ├── confirm/
    │   │   │   ├── payResult/
    │   │   │   └── myOrders/
    │   │   └── user/
    │   │       ├── login/
    │   │       ├── register/
    │   │       └── profile/
    │   ├── store/         # 状态管理（pinia 或 vuex）
    │   │   ├── user.js
    │   │   └── cart.js
    │   └── utils/
    │       └── request.js
    └── tests/

#!/bin/bash

# ==============================================
# 生成前后端分离 + UniApp 完整项目目录结构
# 包含：前台 Web、中后台、UniApp、中台、后台
# ==============================================

set -e
PROJECT_DIR="project-root"
echo ">>> 正在创建项目骨架：$PROJECT_DIR"

# ---------- 创建所有目录 ----------
mkdir -p $PROJECT_DIR/frontend/customer-web/{public,src/{router,api,hooks,components/{Header,ProductCard},pages/{Home,ProductList,ProductDetail,Cart,Order/{ConfirmOrder,PayResult,MyOrders},User/{Login,Register,Profile}},store,styles,utils},tests}

mkdir -p $PROJECT_DIR/frontend/admin-web/{public,src/{router,api,hooks,components/{Layout/{Sidebar,Header},DataTable},pages/{Dashboard,Product/{ProductList,ProductForm},Order/{OrderList,OrderDetail},User/UserList,System/{RoleManage,Permission,Account,SystemConfig,OperationLog}},store,styles,utils},tests}

mkdir -p $PROJECT_DIR/frontend/uniapp/{static,src/{api,components,pages/{index,product/{list,detail},cart,order/{confirm,payResult,myOrders},user/{login,register,profile}},store,utils},tests}

mkdir -p $PROJECT_DIR/backend/src/{main/{java/com/example/app/{ApiGateway,MidPlatform/{product/{service,repository,model/{entity,dto,vo},exception},order/{service,repository,model/{entity,dto},event},user/{service,repository,model/{entity,dto},exception}},Admin/{auth,role/{service,repository,model/{entity,dto}},permission/{service,repository,model/entity},system/{service,repository},account/{service,repository,model/entity}},Common/{config,exception,base,dto,utils}},resources/db/migration},test/{java/com/example/app/{MidPlatform/product,Admin/auth},resources}}

mkdir -p $PROJECT_DIR/docs/api $PROJECT_DIR/docs/database $PROJECT_DIR/scripts


# ---------- 创建所有文件 ----------

# ===== 前端 customer-web =====
touch $PROJECT_DIR/frontend/customer-web/{.env,.eslintrc.cjs,.prettierrc,index.html,tsconfig.json,vite.config.ts,public/favicon.ico,public/logo.png,src/main.ts,src/App.tsx}
touch $PROJECT_DIR/frontend/customer-web/src/router/index.tsx
touch $PROJECT_DIR/frontend/customer-web/src/api/{client.ts,product.ts,order.ts,user.ts}
touch $PROJECT_DIR/frontend/customer-web/src/hooks/useAuth.ts
touch $PROJECT_DIR/frontend/customer-web/src/components/Header/{index.tsx,style.module.css}
touch $PROJECT_DIR/frontend/customer-web/src/components/ProductCard/{index.tsx,style.module.css}
touch $PROJECT_DIR/frontend/customer-web/src/pages/Home/{index.tsx,style.module.css}
touch $PROJECT_DIR/frontend/customer-web/src/pages/{ProductList,ProductDetail,Cart}/index.tsx
touch $PROJECT_DIR/frontend/customer-web/src/pages/Order/ConfirmOrder/index.tsx
touch $PROJECT_DIR/frontend/customer-web/src/pages/Order/PayResult/index.tsx
touch $PROJECT_DIR/frontend/customer-web/src/pages/Order/MyOrders/index.tsx
touch $PROJECT_DIR/frontend/customer-web/src/pages/User/Login/index.tsx
touch $PROJECT_DIR/frontend/customer-web/src/pages/User/Register/index.tsx
touch $PROJECT_DIR/frontend/customer-web/src/pages/User/Profile/index.tsx
touch $PROJECT_DIR/frontend/customer-web/src/store/{useUserStore.ts,useCartStore.ts}
touch $PROJECT_DIR/frontend/customer-web/src/styles/global.css
touch $PROJECT_DIR/frontend/customer-web/src/utils/format.ts

# ===== 前端 admin-web =====
touch $PROJECT_DIR/frontend/admin-web/{.env,.eslintrc.js,.prettierrc,index.html,tsconfig.json,vite.config.ts,public/favicon.ico,public/logo.svg,src/main.tsx,src/App.tsx}
touch $PROJECT_DIR/frontend/admin-web/src/router/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/api/{client.ts,productManage.ts,orderManage.ts,userManage.ts,system.ts,dashboard.ts}
touch $PROJECT_DIR/frontend/admin-web/src/hooks/usePermission.ts
touch $PROJECT_DIR/frontend/admin-web/src/components/Layout/{index.tsx}
touch $PROJECT_DIR/frontend/admin-web/src/components/Layout/Sidebar/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/components/Layout/Header/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/components/DataTable/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/pages/Dashboard/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/pages/Product/ProductList/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/pages/Product/ProductForm/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/pages/Order/OrderList/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/pages/Order/OrderDetail/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/pages/User/UserList/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/pages/System/RoleManage/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/pages/System/Permission/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/pages/System/Account/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/pages/System/SystemConfig/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/pages/System/OperationLog/index.tsx
touch $PROJECT_DIR/frontend/admin-web/src/store/useAuthStore.ts
touch $PROJECT_DIR/frontend/admin-web/src/styles/global.css
touch $PROJECT_DIR/frontend/admin-web/src/utils/auth.ts

# ===== 前端 uniapp =====
touch $PROJECT_DIR/frontend/uniapp/{.env,.eslintrc.js,babel.config.js,package.json,tsconfig.json,manifest.json,pages.json,uni.scss,App.vue,main.js}
touch $PROJECT_DIR/frontend/uniapp/src/api/{client.js,product.js,order.js,user.js}
touch $PROJECT_DIR/frontend/uniapp/src/components/ProductCard.vue
touch $PROJECT_DIR/frontend/uniapp/src/pages/index/index.vue
touch $PROJECT_DIR/frontend/uniapp/src/pages/product/list/index.vue
touch $PROJECT_DIR/frontend/uniapp/src/pages/product/detail/index.vue
touch $PROJECT_DIR/frontend/uniapp/src/pages/cart/index.vue
touch $PROJECT_DIR/frontend/uniapp/src/pages/order/confirm/index.vue
touch $PROJECT_DIR/frontend/uniapp/src/pages/order/payResult/index.vue
touch $PROJECT_DIR/frontend/uniapp/src/pages/order/myOrders/index.vue
touch $PROJECT_DIR/frontend/uniapp/src/pages/user/login/index.vue
touch $PROJECT_DIR/frontend/uniapp/src/pages/user/register/index.vue
touch $PROJECT_DIR/frontend/uniapp/src/pages/user/profile/index.vue
touch $PROJECT_DIR/frontend/uniapp/src/store/{user.js,cart.js}
touch $PROJECT_DIR/frontend/uniapp/src/utils/request.js

# ===== 后端 =====
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Application.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/ApiGateway/{CustomerController,AdminController,SystemController,CommonController}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/product/service/{ProductService,CategoryService}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/product/repository/{ProductRepository,CategoryRepository}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/product/model/entity/{Product,Category}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/product/model/dto/{ProductDTO,ProductCreateRequest}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/product/model/vo/ProductVO.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/product/exception/ProductNotFoundException.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/order/service/{OrderService,CartService}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/order/repository/{OrderRepository,OrderItemRepository}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/order/model/entity/{Order,OrderItem}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/order/model/dto/OrderDTO.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/order/event/OrderPaidEvent.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/user/service/UserService.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/user/repository/UserRepository.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/user/model/entity/User.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/user/model/dto/UserDTO.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/MidPlatform/user/exception/UserNotFoundException.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/auth/{SecurityConfig,JwtTokenProvider,LoginService,AdminUserDetailsService}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/role/service/RoleService.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/role/repository/RoleRepository.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/role/model/entity/Role.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/role/model/dto/RoleDTO.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/permission/service/PermissionService.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/permission/repository/PermissionRepository.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/permission/model/entity/Permission.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/system/service/{SystemConfigService,OperationLogService}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/system/repository/{SystemConfigRepository,OperationLogRepository}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/account/service/AccountService.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/account/repository/AccountRepository.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Admin/account/model/entity/AdminAccount.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Common/config/{WebMvcConfig,CorsConfig}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Common/exception/{GlobalExceptionHandler,BusinessException,ErrorCode}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Common/base/{BaseEntity,BaseService}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Common/dto/{ApiResponse,PageResult}.java
touch $PROJECT_DIR/backend/src/main/java/com/example/app/Common/utils/{ValidationUtils,DateUtils}.java
touch $PROJECT_DIR/backend/src/main/resources/{application,application-dev,application-prod}.yml
touch $PROJECT_DIR/backend/src/main/resources/db/migration/V1__init_schema.sql
touch $PROJECT_DIR/backend/src/main/resources/db/migration/V2__seed_data.sql
touch $PROJECT_DIR/backend/src/test/java/com/example/app/MidPlatform/product/ProductServiceTest.java
touch $PROJECT_DIR/backend/src/test/java/com/example/app/Admin/auth/LoginServiceTest.java
touch $PROJECT_DIR/backend/src/test/resources/application-test.yml

# 根文件
touch $PROJECT_DIR/{.gitignore,docker-compose.yml,README.md}
touch $PROJECT_DIR/backend/Dockerfile
touch $PROJECT_DIR/docs/{architecture.md}
touch $PROJECT_DIR/docs/api/{customer-api,admin-api}.md
touch $PROJECT_DIR/docs/database/er-diagram.png
touch $PROJECT_DIR/scripts/{start-dev,build,deploy}.sh


# ========== 写入最小化配置内容 ==========
echo ">>> 写入基础配置文件..."

# customer-web package.json (React + Vite)
cat > $PROJECT_DIR/frontend/customer-web/package.json <<EOF
{
  "name": "customer-web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {},
  "devDependencies": {}
}
EOF

# admin-web package.json
cat > $PROJECT_DIR/frontend/admin-web/package.json <<EOF
{
  "name": "admin-web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {},
  "devDependencies": {}
}
EOF

# uniapp package.json
cat > $PROJECT_DIR/frontend/uniapp/package.json <<EOF
{
  "name": "uniapp",
  "version": "1.0.0",
  "scripts": {
    "dev:mp-weixin": "uni -p mp-weixin",
    "build:mp-weixin": "uni build -p mp-weixin"
  },
  "dependencies": {},
  "devDependencies": {
    "@dcloudio/uni-app": "*",
    "@dcloudio/uni-mp-weixin": "*"
  }
}
EOF

# 三个端的 vite.config / tsconfig 简单示例
cat > $PROJECT_DIR/frontend/customer-web/vite.config.ts <<EOF
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({ plugins: [react()] })
EOF

cat > $PROJECT_DIR/frontend/admin-web/vite.config.ts <<EOF
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({ plugins: [react()] })
EOF

# uni-app 的 tsconfig
cat > $PROJECT_DIR/frontend/uniapp/tsconfig.json <<EOF
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "types": ["@dcloudio/types"]
  }
}
EOF

# uni-app 核心配置 manifest.json
cat > $PROJECT_DIR/frontend/uniapp/manifest.json <<EOF
{
  "name": "my-app",
  "appid": "__UNI__XXXXXXX",
  "versionName": "1.0.0",
  "versionCode": "100",
  "mp-weixin": {
    "appid": "wxappid"
  }
}
EOF

# pages.json
cat > $PROJECT_DIR/frontend/uniapp/pages.json <<EOF
{
  "pages": [
    { "path": "pages/index/index" },
    { "path": "pages/product/list/index" },
    { "path": "pages/product/detail/index" }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app"
  }
}
EOF

# uni.scss
cat > $PROJECT_DIR/frontend/uniapp/uni.scss <<EOF
/* 全局样式 */
EOF

# App.vue
cat > $PROJECT_DIR/frontend/uniapp/App.vue <<EOF
<script>
export default {}
</script>
EOF

# main.js
cat > $PROJECT_DIR/frontend/uniapp/main.js <<EOF
import Vue from 'vue'
import App from './App'
import './uni.scss'

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({ ...App })
app.\$mount()
EOF

# 后端 pom.xml
cat > $PROJECT_DIR/backend/pom.xml <<EOF
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.2.0</version>
    </parent>
    <groupId>com.example</groupId>
    <artifactId>app</artifactId>
    <version>1.0-SNAPSHOT</version>
    <name>backend</name>
    <properties><java.version>17</java.version></properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
    </dependencies>
</project>
EOF

# Application.java
cat > $PROJECT_DIR/backend/src/main/java/com/example/app/Application.java <<EOF
package com.example.app;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}
EOF

# .gitignore
cat > $PROJECT_DIR/.gitignore <<EOF
node_modules/
dist/
build/
.idea/
*.iml
target/
*.log
.env.local
EOF

# README
cat > $PROJECT_DIR/README.md <<EOF
# 项目名称

前后端分离 + UniApp 跨端架构（无微服务）
- 前台 Web 端：customer-web
- 前台移动端/小程序：uniapp
- 中后台管理端：admin-web
- 后端中台业务模块 + 系统管理模块
EOF

echo ">>> ✅ 项目骨架（含 uniapp）生成完毕！"
echo "请进入 $PROJECT_DIR 开始开发。"