# EuiAdmin

**Repository Path**: zishuimuyu/euiAdmin

## Basic Information

- **Project Name**: EuiAdmin
- **Description**: EuiAdmin基于Vue+Element的免费开源后台模板。通过使用EuiAdmin你可以很简单的搭建一个成型的后台。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 96
- **Forks**: 32
- **Created**: 2020-09-30
- **Last Updated**: 2026-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# euiAdmin

基于 Vue 2 + Element UI 的后台管理系统模板。

<div align="center">

**[简体中文](./README.md)** | **[English](./README.en.md)**

</div>

## 📋 项目介绍

euiAdmin 是一个免费开源的后台管理系统模板，基于 Vue 2 和 Element UI 构建。提供了完整的后台管理功能框架，包括用户认证、权限管理、数据可视化、表单处理、文件上传等常用模块。

**技术栈**: Vue 2.6 + Element UI 2.4 + ECharts 4.9 + Vue Router 3 + TinyMCE 5

## 📖 开发文档

- [开发手册](./开发手册.md) - 详细的开发指南和使用教程

## 🏗️ 项目架构

```
euiAdmin/
├── public/                      # 静态公共资源
├── src/
│   ├── assets/                 # 资源文件
│   │   ├── langs/              # 国际化语言包
│   │   │   └── zh_CN.js        # TinyMCE 中文配置
│   │   └── china.js            # 中国地图 GeoJSON 数据
│   ├── components/             # 可复用组件
│   │   ├── echarts/            # ECharts 图表组件
│   │   │   ├── ChinaMapSpace.vue    # 中国地图可视化
│   │   │   ├── EchartsBarSpace.vue  # 柱状图组件
│   │   │   └── EchartsLineSpace.vue # 折线图组件
│   │   ├── home/               # 首页组件
│   │   ├── module/             # 功能模块组件
│   │   │   ├── SuperFormSpace.vue   # 超级表单
│   │   │   ├── EditorSpace.vue      # 富文本编辑器
│   │   │   ├── TableSpace.vue       # 表格组件
│   │   │   ├── excel/               # Excel 导入导出
│   │   │   ├── fileUpload/          # 文件上传 (4种模式)
│   │   │   └── imageUpload/         # 图片上传 (4种模式)
│   │   ├── page/               # 页面组件
│   │   ├── setting/            # 设置组件
│   │   └── system/              # 系统级组件
│   │       ├── AsideSpace.vue   # 侧边栏导航
│   │       └── HeadSpace.vue    # 顶部导航栏
│   ├── plugins/                # 插件配置
│   │   ├── Component.js        # 全局组件注册
│   │   └── Pass.js              # 事件总线
│   ├── router/                 # 路由配置
│   │   └── index.js            # 路由定义
│   ├── views/                  # 页面视图
│   │   ├── echarts/            # ECharts 图表页面
│   │   ├── home/               # 首页
│   │   ├── login/              # 登录/注册/找回密码
│   │   ├── module/             # 功能模块页面
│   │   ├── page/               # 通用页面
│   │   └── setting/            # 设置页面
│   ├── App.vue                # 根组件
│   └── main.js                # 入口文件
├── package.json               # 项目配置
├── vue.config.js             # Vue CLI 配置
└── babel.config.js          # Babel 配置
```

## 📦 功能模块

### 用户认证
| 页面 | 路由 | 说明 |
|------|------|------|
| 登录 | `/` | 用户登录 |
| 注册 | `/register` | 用户注册 |
| 找回密码 | `/forget/password` | 密码重置 |

### 功能组件
| 模块 | 路由 | 说明 |
|------|------|------|
| 富文本编辑器 | `/module/editor` | TinyMCE 富文本编辑 |
| 超级表单 | `/module/superform` | 17种表单控件展示 |
| 图片上传 | `/module/upload/image` | 4种上传模式 |
| 文件上传 | `/module/upload/file` | 多种文件类型 |
| 动画效果 | `/module/animate` | CSS 动画展示 |
| 数据表格 | `/module/table` | 增删改查操作 |
| Excel表格 | `/module/table/excel` | Excel 导入导出 |

### 数据可视化
| 图表 | 路由 | 说明 |
|------|------|------|
| 柱状图 | `/echarts/bar` | 柱状图展示 |
| 折线图 | `/echarts/line` | 折线趋势图 |
| 中国地图 | `/echarts/map` | 地图热力图 |

### 系统设置
| 设置项 | 路由 | 功能 |
|--------|------|------|
| 网站设置 | `/setting/web` | 网站基本配置 |
| 用户设置 | `/setting/user` | 个人信息管理 |
| 密码设置 | `/setting/password` | 修改密码 |
| 邮箱设置 | `/setting/email` | 邮箱配置 |

## 🛠️ 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| Vue | 2.6.11 | 核心框架 |
| Element UI | 2.4.5 | UI 组件库 |
| ECharts | 4.9.0 | 数据可视化 |
| Vue Router | 3.2.0 | 路由管理 |
| Vue Cookies | 1.7.3 | Cookie 管理 |
| TinyMCE | 5.4.2 | 富文本编辑器 |
| xlsx | 0.16.7 | Excel 文件处理 |

## 🚀 快速开始

### 环境要求
- Node.js >= 12.0
- npm >= 6.0

### 安装依赖
```bash
npm install
```

### 开发模式
```bash
npm run serve
```
访问地址: http://localhost:8080

### 生产构建
```bash
npm run build
```

### 代码检查
```bash
npm run lint
```

## ⚙️ 项目配置

### API 代理配置
修改 `vue.config.js` 中的 devServer.proxy 配置：
```javascript
proxy: {
  '/api': {
    target: 'http://localhost', // 后端接口地址
    ws: true,
    changOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}
```

### 主题配置
系统支持通过 Cookie 自定义主题样式，包括：
- 侧边栏颜色、宽度
- 顶部导航颜色、高度
- 主内容区域背景色

## 🔧 继续开发指南

### 1. API 请求封装

建议创建统一的 API 请求模块：

```javascript
// src/utils/request.js
import axios from 'axios'
import { Message } from 'element-ui'

const service = axios.create({
  baseURL: '/api',
  timeout: 15000
})

service.interceptors.request.use(config => {
  const token = sessionStorage.getItem('token')
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
})

service.interceptors.response.use(
  response => response.data,
  error => {
    Message.error(error.message || '请求失败')
    return Promise.reject(error)
  }
)

export default service
```

### 2. 登录功能对接

修改 `src/views/login/Login.vue` 中的登录逻辑，对接后端 API：

```javascript
async login() {
  try {
    const res = await loginAPI({
      username: this.login_form.user_name,
      password: this.login_form.user_password
    })
    sessionStorage.setItem('token', res.data.token)
    sessionStorage.setItem('user', JSON.stringify(res.data.user))
    this.$router.push('/home')
  } catch (error) {
    this.$message.error(error.message || '登录失败')
  }
}
```

### 3. 路由权限守卫

完善 `src/router/index.js` 添加权限验证：

```javascript
router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'euiAdmin'
  
  if (to.meta.login_state) {
    const token = sessionStorage.getItem('token')
    if (!token) {
      next('/')
    }
  }
  next()
})
```

### 4. 状态管理

安装 Vuex：
```bash
npm install vuex@3 --save
```

创建 `src/store/index.js`：
```javascript
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: sessionStorage.getItem('token') || '',
    user: null
  },
  mutations: {
    SET_TOKEN(state, token) {
      state.token = token
    },
    SET_USER(state, user) {
      state.user = user
    }
  }
})
```

### 5. API 目录结构

```
src/api/
├── login.js    # 登录相关接口
├── user.js    # 用户管理接口
└── upload.js  # 文件上传接口
```

## ⚠️ 注意事项

### 安全问题
- ⚠️ 当前登录逻辑为前端模拟，需对接后端真实 API
- ⚠️ 需要实现 Token 认证机制
- ⚠️ 建议添加表单验证规则
- ⚠️ 生产环境需启用 HTTPS

### 性能优化
- 建议将路由改为懒加载方式
- 考虑按需引入 Element UI 组件
- 大数据量表格建议使用虚拟滚动

### 代码规范
- 组件命名统一使用 `Space.vue` 后缀
- API 接口统一放在 `src/api/` 目录
- 工具函数统一放在 `src/utils/` 目录

### Vue 2 迁移建议
当前项目基于 Vue 2，如需升级到 Vue 3：
- Element UI → Element Plus
- Vuex → Pinia
- vue-router 3 → vue-router 4
- 需评估现有组件兼容性

## 📝 项目结构说明

### 组件命名规范
- **容器组件**: `views/` 目录下的页面组件
- **功能组件**: `components/` 目录下的 `*Space.vue`
- **布局组件**: AsideSpace (侧边栏)、HeadSpace (头部)

### 全局组件注册
通过 `src/plugins/Component.js` 自动注册全局组件，组件名首字母大写后加 `v` 前缀：
```vue
<vAsideSpace />    <!-- AsideSpace.vue -->
<vHeadSpace />     <!-- HeadSpace.vue -->
<vEditorSpace />   <!-- EditorSpace.vue -->
```

### 事件总线
使用 `src/plugins/Pass.js` 进行组件间通信：
```javascript
// 发送
Pass.$emit('event_name', data)

// 接收
Pass.$on('event_name', (data) => { ... })
```

## 🤝 贡献指南

1. Fork 本仓库
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交代码 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📄 许可证

本项目基于 MIT 许可证开源。

## 📞 联系方式

- 项目主页: https://github.com/your-repo/euiadmin
- 问题反馈: https://github.com/your-repo/euiadmin/issues

## 🙏 致谢

- [Vue.js](https://vuejs.org/)
- [Element UI](https://element.eleme.cn/)
- [ECharts](https://echarts.apache.org/)
- [TinyMCE](https://www.tiny.cloud/)