# wx_vue3

**Repository Path**: XU_JIANG_TAOXJT/wx_vue3

## Basic Information

- **Project Name**: wx_vue3
- **Description**: 在线微信前端工程（VUE）
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://xjtool.top
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-04-26
- **Last Updated**: 2024-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: IM, WebSocket, Vue

## README


### 简介
模仿在线微信开发的**im实时聊天**在线微信网站（该项目为前端）

### 演示地址
[http://xjtool.top](http://xjtool.top)

### 后端仓库
[https://gitee.com/XU_JIANG_TAOXJT/wx_admin](https://gitee.com/XU_JIANG_TAOXJT/wx_admin)
### 预览
![输入图片说明](readme/img.png)

**支持功能**
- 模拟微信扫码登录
- 用户名密码登录
- 在线状态聊天消息推送并播放提示音效
- 申请添加好友
- 同意或者拒绝好友
- 发送表情，表情处理
- 实时聊天
- 退出登录


### 在线微信后端

架构：
1. springBoot
2. 使用netty搭建socket服务器
3. 使用security做鉴权服务
4. 数据库使用mysql 以及redis
5. jdk
### 在线微信前端

**架构**：
1. vue3+vite+pinia+webSocket

### 快速开始
## 后端使用
sql初始化脚本 /sql/init.sql


修改数据库和redis配置


启动springBoot

## 前端启动
依次执行命令




```
npm install
```

```
npm run dev
```



### 效果图

![img.png](readme/img2.png)
![img.png](readme/img3.png)
![img.png](readme/img4.png)
![img.png](readme/img5.jpg)
![img.png](readme/img_2.png)
![img.png](readme/img_3.png)
![img.png](readme/img_4.png)
![img.png](readme/img_5.png)