# WebChat_Vue

**Repository Path**: diertizu/WebChat_Vue

## Basic Information

- **Project Name**: WebChat_Vue
- **Description**: WebChat_Vue
前后端分离
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-07-24
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebChat_Vue

_前端使用Vue的WebChat_

- 使用@vue/cli实现前后端分离开发

#### _暂记_

- UserResponse类待去掉password属性
- 关于**获取历史消息**
    - chat页面在create()函数通过ajax实现，不再通过websocket
    - websocket专注于聊天
    
## 使用说明

### 1. 安装node.js

[Node.js 安装配置 | 菜鸟教程](https://www.runoob.com/nodejs/nodejs-install-setup.html)

### 2. 安装@vue/cli

[安装 | Vue CLI](https://cli.vuejs.org/zh/guide/installation.html)

- 如果嫌安装慢，可以先安装cnpm
  - 安装 cnpm（淘宝镜像）
    - `npm install -g cnpm`
  - 安装 @vue/cli
    - `cnpm install -g @vue/cli `

#### 详细步骤

1. 安装cnpm

![img](https://gitee.com/teassassin/my-image-bed/raw/master/img/GKVC8Y[1ZTCN16V16JV2IW8.png)

2. vue-cli安装

![image-20200803090245899](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200803090245899.png)

![img](https://gitee.com/teassassin/my-image-bed/raw/master/img/ASOAKE{84]@NJTXA7Q0MSQU.png)

3. 启动 `vue ui` 测试

![vue_ui](https://gitee.com/teassassin/my-image-bed/raw/master/img/vue_ui.png)

4. 安装成功

![img](https://gitee.com/teassassin/my-image-bed/raw/master/img/2G0@Z2NIZP91G]EOH~6V]U1.png)

### 3. 启动tomcat服务器（后端）

1. tomcat配置

![image-20200801201411617](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801201411617.png)

2. Vue配置

- 进入vueapp/src目录，打开 **main.js**

![image-20200801201955826](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801201955826.png)

- 进入vueapp/src/views目录，打开 **Main.vue**

![image-20200801202844758](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801202844758.png)

### 4. 启动Vue项目（前端）

- 先运行两个命令，安装依赖（安装一次以后就不用安装了）
  - `npm install`
  - `npm audit fix`

![image-20200801203748211](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801203748211.png)

![image-20200801203903992](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801203903992.png)

两种方式启动vue项目

**！**最好先启动 **tomcat** 服务器，防止占用8080端口（当然可以改用别的端口号，比如8081，不过耽误事）**！**

1. 使用vue ui

- `vue ui`

![image-20200801210415778](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801210415778.png)

- 找到 **项目管理器**

![image-20200801204643024](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801204643024.png)

- **导入**

![image-20200801210635725](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801210635725.png)

- **启动**

![image-20200801204933167](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801204933167.png)

![image-20200801205228356](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801205228356.png)

2. 命令行

- `npm run serve`

![image-20200801205559697](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801205559697.png)

- 单击随便一个地址即可
- 8081端口是自动分配的，8080已经被tomcat占了

![image-20200801205647498](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801205647498.png)

- 可以添加到IDEA的Run配置，方便启动

![image-20200801205810354](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801205810354.png)

![image-20200801205841675](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801205841675.png)

![image-20200801205932711](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801205932711.png)

![image-20200801210056469](https://gitee.com/teassassin/my-image-bed/raw/master/img/image-20200801210056469.png)