# 聊天

**Repository Path**: zijid/chat

## Basic Information

- **Project Name**: 聊天
- **Description**: vue+java实现的实时个人聊天
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-09-24
- **Last Updated**: 2024-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# npm
npm i @types/node -D  
npm i vue-router  
npm i axios  
npm i pinia  
npm i ant-design-vue --save  
npm i  pinia-plugin-persistedstate  
npm i --save @ant-design/icons-vue  
 # 描述
一个简单的聊天
使用了websocket实现实时接收新消息
后端使用的是spring boot 使用了两个数据库进行存储，刚学都试试看……
如果要用得下两个数据库mongodb和mysql,因为没开发设置消息所以没有头像显示，就一个圆代替，信息状态开始有想法，后面也没开发。

	mysql结构
		chat(数据库)
		users(表)
	mongodb结构
		chat(数据库)
		chat(集合)

mysql创建代码

创建mysql数据库chat然后运行
```sql
CREATE TABLE `users` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `username` char(64) DEFAULT NULL,
  `password` char(64) DEFAULT NULL,
  `time` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8mb3;
```

然后下载MongoDB不要密码

## 前端实现
开始准备使用typescript+vue3实现的，后面都改成了纯js了，ts还不会使用起来太麻烦

使用pinia保存状态，axios发送请求，vue-router进行页面切换，ant-design-vue组件库

页面路径  
/  
/login  
/reg  
## 项目实现
1. 登录 注册
2. 查找用户 发起聊天 聊天记录显示
3. 发送信息 接收信息 实时接收信息

项目要运行起来还比较麻烦，没有使用mock得先运行后端程序才行
后端文件夹在/java