# MyChat_Front

**Repository Path**: xianfash/my-chat

## Basic Information

- **Project Name**: MyChat_Front
- **Description**: 这是Mychat项目前端部分，此项目只为打造三端互通的聊天软件，第一次尝试，有瑕疵！！
技术栈：VUE3  electron  JavaScript 
网络请求：ajax(axios)  websocket
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-05-01
- **Last Updated**: 2026-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Electron, JavaScript

## README



# My Chat (我的聊天)

> 基于 Electron + Vue.js 的现代化桌面即时通讯应用

## 📝 项目简介

本项目是一个功能完善的桌面聊天应用程序，使用现代 Web 技术（Vue.js）结合 Electron 框架构建，旨在提供流畅、稳定且美观的跨平台即时通讯体验。项目集成了 WebSocket 实时通信、用户认证系统、好友管理以及丰富的 UI 动态特效。

## ✨ 主要功能

- **即时通讯**：支持实时消息发送与接收，基于 WebSocket 协议确保低延迟通信。
- **用户认证**：包含登录（LogIn）、注册（SignUp）及密码重置（reSetPasswd）功能。
- **好友系统**：支持查找、添加和管理好友（MyFriend），并提供添加好友的交互对话框。
- **个性化设置**：提供设置页面（MySetting），支持用户自定义偏好。
- **视觉特效**：
  - **动态背景**：内置多款独特的动态背景模块（如星空背景 `public/Star` 和键盘背景 `public/bgc2`），提升视觉体验。
  - **流畅 UI**：基于 Vue 组件化的消息盒子（MessageBox）与交互动画。

## 🛠 技术栈

- **核心框架**：Electron (桌面端运行环境), Vue.js 3 (前端框架)
- **状态管理**：Vuex (用于管理应用状态)
- **路由管理**：Vue Router (页面导航)
- **通信协议**：WebSocket (实时消息), HTTP/HTTPS (API 请求)
- **构建工具**：Webpack / Vite (项目构建与热重载)
- **安全**：内置加密模块 (`src/api/encryptor.js`) 保障通信安全

## 🚀 快速开始

### 环境准备

确保您的开发环境中已安装以下工具：
- [Node.js](https://nodejs.org/) (推荐 v14 或更高版本)
- [Git](https://git-scm.com/)

### 安装与运行

1. **克隆项目**
   ```bash
   git clone https://gitee.com/xianfash/my-chat.git
   cd my-chat
   ```

2. **安装依赖**
   在项目根目录下运行以下命令安装所有必要的依赖包：
   ```bash
   npm install
   ```

3. **启动开发环境**
   ```bash
   npm run dev
   ```
   此命令将启动 Electron 应用程序并打开开发窗口。

4. **构建生产版本**
   ```bash
   npm run build
   ```
   此命令将生成可分发的应用程序安装包。

## 📂 项目结构

本项目采用了清晰的目录结构，以便于维护和扩展：

- **`public/`**: 静态资源目录，包含应用图标、背景图片及动态特效资源（CSS/JS）。
  - `background/`: 包含背景动画逻辑（Demo 1, 2, 3）。
  - `Star/`: 星空背景特效资源。
  - `bgc2/`: 键盘风格背景特效资源。
- **`src/`**: 源代码主目录。
  - **`api/`**: 封装了所有与后端的交互逻辑，包括 WebSocket 连接 (`websocket.js`)、登录接口 (`login.js`) 及加密工具 (`encryptor.js`)。
  - **`views/`**: 包含应用的所有页面视图。
    - `login_up/`: 登录与注册页面。
    - `friend/`: 好友列表与管理页面。
    - `MessageBox/`: 聊天窗口相关组件。
    - `bg_keyboard/`: 键盘相关视图组件。
  - **`components/`**: 可复用的 Vue 组件（如 `HelloWorld.vue`）。
  - **`store/`**: Vuex 状态管理配置。
  - **`utils/`**: 常用工具函数，如网络请求封装 (`request.js`)、Token 管理 (`token.js`) 及环境变量 (`env.js`)。
  - **`background.js`**: Electron 主进程入口文件，负责创建和管理应用窗口。
  - **`preload.js`**: 预加载脚本，用于在渲染进程和安全上下文之间建立桥梁。

## 🤝 贡献指南

我们欢迎并鼓励社区开发者为本项目贡献力量。如果您有任何改进建议或发现了 Bug，请随时提交 Issue 或发起 Pull Request。

## 📄 许可证

本项目在 Gitee 上托管。在使用、修改或分发本项目代码之前，请务必查看仓库根目录下的 LICENSE 文件或咨询项目作者，以确保符合相应的许可协议。

---

祝您使用愉快！🎉