# monose-admin-web

**Repository Path**: monoseven/monose-admin-web

## Basic Information

- **Project Name**: monose-admin-web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-08-10
- **Last Updated**: 2024-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目介绍

1. 本项目是一个轻量版中后台管理项目模板，具有基本的登录、动态菜单管理、用户管理、角色管理等相关功能

2. 前端主应用部分基于 Vue3 ElementPlus Vite 等相关技术栈，包含了必要的路由、全局状态存储等周边产品。可直接用于业务的开发，也可以作为底座，结合使用无界微前端框架，集成其他项目的页面

3. 权限相关的后端部分使用了 nodejs + express 作为后端服务，使用 mongodb 数据库，为前端项目的登录、菜单管理等提供了基本的支持。此部分功能未进行完善，仅保证功能可用。

4. 本项目提供了基于 ElementPlus 二次封装的组件库，位于 `/packages/component/vue` 文件夹中，可供主应用、前端子应用使用，使用方法可见 pnpm 文档安装本地依赖

5. ElementPlus 二次封装的组件库组件库文档可见 [monose-component-vue](./packages/component/vue/README.md)

## 项目结构

1. 本项目采用了 memorepo 项目结构；
2. main 文件夹下为前端主应用；
3. apps 中为子应用，可添加其他前端项目，同时也包含了登录的后台服务应用；
4. packages 为公共依赖包目录

```bash
├── apps/   # 子应用，可在此文件夹下添加不同的前端项目，并使用无界、iframe等微前端方案继承到主应用中
│   │
│   ├── auth-server/  # 子应用1：主应用的后端部分，负责登录、权限、动态菜单、角色管理等相关后台服务，使用 nodejs + express + mongodb
│   │   ├── src/
│   │   │   ├── index.ts  # 启动文件
│   │   │   ├── init.ts   # 环境初始化脚本（在新环境的数据库中生成必要的表结构和数据）
│   │   ├── package.json
│   │
│   ├── web-server/  # 子应用2：负责模拟生产环境启动前端打包后的静态文件
│       ├── app.js
│       ├── package.json
│
│
├── main/   # 主应用，具有基本的登录、动态菜单、角色管理、账号管理等功能的前端项目，可作为外框架使用微前端结合子应用，也可直接进行业务开发
│   ├── public/
│   ├── src/
│   │   ├── api/
│   │   ├── assets/
│   │   ├── layout/
│   │   │   ├── Layout.vue    # 页面框架布局
│   │   ├── router/
│   │   │   ├── routers/
│   │   │   │   ├── basic.ts  # 基本路由
│   │   │   │   ├── index.ts
│   │   │   │   ├── menu.ts   # 开发环境下本地菜单配置（非动态菜单）
│   │   │   │   ├── root.ts
│   │   │   ├── index.ts
│   │   ├── store/
│   │   ├── styles/
│   │   ├── utils/
│   │   ├── views/  # 业务、菜单管理等相关页面
│   │   │   ├── Home/
│   │   │   │   ├── index.vue
│   │   ├── App.vue
│   │   ├── main.ts
│   │   ├── vite-env.d.ts
│   ├── index.html
│   ├── package.json
│   ├── vite.config.ts
│
│
├── packages/   # 公共依赖包
│   ├── component/  # 公共组件库
│   │   ├── vue/  # vue + ElementPlus 进行封装的组件库依赖包，已发布至 npm
│   │   │   ├── src/
│   │   │   ├── package.json
│   │   │   ├── vite.config.ts
│   │
│   ├── utils/    # 公共工具类依赖包
│       ├── src/
│       ├── package.json
│       ├── rollup.config.js
│       ├── tsconfig.json
│
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml

```

## 快速开始

### 1. 下载代码

```bash
git clone https://gitee.com/monoseven/monose-admin-web.git
```

### 2. 安装所有依赖

```bash
npm install -g pnpm
pnpm install
```

### 3. 配置 mongoDB 数据库地址

修改 `apps/auth-server/src/app.ts` 和 `apps/auth-server/src/init.ts` 文件中的地址为 mongoDB 数据库服务的地址

```ts
mongoose.connect('mongodb://127.0.0.1:27017/monose_server');
```

### 4. 环境初始化（在新环境的数据库中生成必要的表结构和数据）

```bash
pnpm run -F auth-server init
```

### 5. 启动菜单登录后台服务

```bash
pnpm run -F auth-server dev
```

### 6. 编译依赖包（每次修改package包后需要编译生效）

```bash
pnpm run -F monose-component-vue build
pnpm run -F monose-utils build
```

### 6. 启动前端主应用

```bash
pnpm run dev
```

### 7. 登录进入系统

```
账号：admin
密码：monoseadmin
```