# bank-front

**Repository Path**: yan-bin-code666/bank-front

## Basic Information

- **Project Name**: bank-front
- **Description**: 银行业务系统设计前端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-16
- **Last Updated**: 2025-06-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 银行管理系统前端

基于Vue 3 + Element Plus开发的银行管理系统前端项目，包含用户端和管理员端两套完整的界面。

## 🚀 技术栈

- **Vue 3** - 前端框架
- **Vue Router 4** - 路由管理
- **Vuex 4** - 状态管理
- **Element Plus** - UI组件库
- **Axios** - HTTP请求库
- **Sass** - CSS预处理器
- **js-cookie** - Cookie管理
- **dayjs** - 日期处理

## 📦 项目结构

```
bank-frontend/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API接口
│   │   ├── auth.js        # 认证相关接口
│   │   ├── card.js        # 银行卡相关接口
│   │   ├── customer.js    # 客户管理接口
│   │   ├── deposit.js     # 存款类型接口
│   │   └── trade.js       # 交易记录接口
│   ├── assets/
│   │   └── styles/
│   │       └── global.scss # 全局样式
│   ├── components/        # 公共组件
│   ├── layouts/           # 布局组件
│   │   ├── AdminLayout.vue # 管理员布局
│   │   └── UserLayout.vue  # 用户布局
│   ├── router/            # 路由配置
│   │   └── index.js
│   ├── store/             # Vuex状态管理
│   │   └── index.js
│   ├── utils/             # 工具函数
│   │   └── request.js     # HTTP请求配置
│   ├── views/             # 页面组件
│   │   ├── admin/         # 管理员页面
│   │   │   ├── Dashboard.vue   # 管理员首页
│   │   │   ├── Customer.vue    # 客户管理
│   │   │   ├── Card.vue        # 银行卡管理
│   │   │   ├── Deposit.vue     # 存款类型管理
│   │   │   └── Trade.vue       # 交易管理
│   │   ├── user/          # 用户页面
│   │   │   ├── Dashboard.vue   # 用户首页
│   │   │   ├── Profile.vue     # 个人信息
│   │   │   ├── Cards.vue       # 我的银行卡
│   │   │   ├── Transaction.vue # 银行业务
│   │   │   └── TradeHistory.vue # 交易记录
│   │   ├── Home.vue       # 首页
│   │   ├── Login.vue      # 登录页
│   │   ├── Register.vue   # 注册页
│   │   └── NotFound.vue   # 404页面
│   ├── App.vue
│   └── main.js
├── package.json
└── README.md
```

## 🎯 功能特性

### 用户端功能
- 🔐 **用户认证** - 登录/注册/个人信息管理
- 💳 **银行卡管理** - 查看银行卡、余额查询
- 💰 **银行业务** - 存款、取款、转账
- 🔐 **安全设置** - 修改密码、挂失银行卡
- 📊 **交易记录** - 查看交易历史、导出记录
- 📷 **头像上传** - 支持头像更换

### 管理员端功能
- 👥 **客户管理** - 新增、编辑、删除客户信息
- 💳 **银行卡管理** - 开卡、销卡、状态管理
- 💰 **存款类型管理** - 管理存款产品类型
- 📊 **交易管理** - 查看所有交易记录
- 🖼️ **图片上传** - 支持图片资源管理

## 🛠️ 安装和使用

### 环境要求
- Node.js >= 14.0.0
- npm >= 6.0.0 或 yarn >= 1.22.0

### 1. 克隆项目
```bash
git clone <repository-url>
cd bank-frontend
```

### 2. 安装依赖
```bash
npm install
# 或
yarn install
```

### 3. 启动开发服务器
```bash
npm run serve
# 或
yarn serve
```

项目将在 `http://localhost:8080` 启动

### 4. 构建生产版本
```bash
npm run build
# 或
yarn build
```

## ⚙️ 配置说明

### 环境变量
创建 `.env.local` 文件配置后端API地址：
```env
VUE_APP_BASE_API=http://localhost:8080
```

### 后端接口配置
在 `src/utils/request.js` 中配置：
- 基础URL
- 请求/响应拦截器
- 错误处理

## 📱 页面截图

### 首页
- 现代化的Landing页面设计
- 功能特性展示
- 统计数据展示

### 登录/注册
- 支持用户和管理员登录切换
- 表单验证
- 响应式设计

### 用户端
- 直观的仪表板
- 银行卡管理界面
- 交易操作页面

### 管理员端
- 数据统计概览
- 表格化数据管理
- 完整的CRUD操作

## 🔐 权限控制

### 路由守卫
- 登录状态验证
- 用户角色权限检查
- 自动重定向

### API权限
- JWT Token认证
- 请求头自动添加
- Token过期处理

## 🎨 UI设计

### 设计原则
- 现代化、简洁的界面
- 响应式设计，支持移动端
- 一致的视觉风格
- 良好的用户体验

### 主题色彩
- 主色：#1890ff (蓝色)
- 辅助色：#52c41a (绿色)
- 背景渐变：#667eea 到 #764ba2

## 📊 状态管理

使用Vuex管理全局状态：
- 用户信息
- 登录状态
- 用户类型（普通用户/管理员）
- 界面状态

## 🔧 开发工具

### 推荐的IDE设置
- [VS Code](https://code.visualstudio.com/)
- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) 或 [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

### 代码规范
- ESLint代码检查
- Prettier代码格式化
- Vue官方风格指南

## 🐛 问题解决

### 常见问题

1. **依赖安装失败**
   ```bash
   rm -rf node_modules package-lock.json
   npm install
   ```

2. **代理配置**
   在 `vue.config.js` 中配置开发代理：
   ```js
   module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'http://localhost:8080',
           changeOrigin: true
         }
       }
     }
   }
   ```

3. **跨域问题**
   - 确保后端配置了CORS
   - 检查请求URL是否正确

## 📝 API接口说明

### 基础配置
- 基础URL: `http://localhost:8080`
- 认证方式: Bearer Token
- 数据格式: JSON

### 主要接口模块
- `/User/*` - 用户端接口
- `/Admin/*` - 管理员端接口

详细接口文档请参考后端项目的接口文档。

## 🚀 部署说明

### 开发环境
```bash
npm run serve
```

### 生产环境
1. 构建项目
   ```bash
   npm run build
   ```

2. 部署dist文件夹到服务器

3. 配置Nginx代理
   ```nginx
   server {
       listen 80;
       server_name your-domain.com;
       root /path/to/dist;
       
       location / {
           try_files $uri $uri/ /index.html;
       }
       
       location /api {
           proxy_pass http://backend-server:8080;
       }
   }
   ```

## 📞 支持

如有问题，请通过以下方式联系：
- 提交Issue
- 发送邮件
- 技术支持QQ群

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

---

**注意**: 本项目仅供学习和演示使用，请勿用于实际的银行业务系统。