# spring boot+Vue

**Repository Path**: shigen/spring-boot--vue

## Basic Information

- **Project Name**: spring boot+Vue
- **Description**: spring boot + vue 前后端分离代码
- **Primary Language**: Java
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2021-11-07
- **Last Updated**: 2024-06-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# spring boot+Vue

在线云盘+自由表单数据收集系统

## 安装配置

- 作者： shigen
- 日期： 2022-4-30 13:39

---
系统前端和后端是两个独立的项目，其中api是后端模块，frontweb是前端模块。
![](./imgs/image1.png)

### 1. 前端

#### 1.1 环境要求

本地的开发需要准备node和npm环境，安装配置略。条件允许，配置cnpm，国内镜像加速。
![](./imgs/image2.png)

#### 1.2 依赖包的安装

进入frontweb目录，执行npm run serve命令，依赖包会自动下载。
![](./imgs/image3.png)

#### 1.3 前端项目的启动

出现如下信息即代表前端项目正常启动。
![](./imgs/image4.png)

浏览器输入local或者Network中的任意一个地址，即可访问前端页面。
![](./imgs/image5.png)
此时提示出错很正常，代表着服务的后端并未启动。

#### 1.4 项目的打包

执行npm run build即可打包项目，用于后期的项目部署。
![](./imgs/image6.png)

### 2.后端

#### 2.1 环境要求

##### 2.1.1 mysql 5.7及以上版本

![](./imgs/image7.png)

##### 2.1.2 jdk 1.8及以上版本

![](./imgs/image8.png)

##### 2.1.3 maven3.6及以上版本

![](./imgs/image9.png)
有条件的可以配置华为云镜像加速。

##### 2.1.4 redis-server 6.2.5及以上

![](./imgs/image10.png)

#### 2.2 修改配置文件

找到resources目录下的application.yml文件，用任何编辑器修改相关配置即可，此处使用vim编辑器。
![](./imgs/image11.png)
主要修改对应的mysql和redis地址、用户名、密码即可（此处已做特殊处理）。
![](./imgs/image12.png)

#### 2.3 依赖的下载和项目的打包

进入目录运行mvn clean package。
![](./imgs/image13.png)

#### 2.4 后端项目的运行

##### 2.4.1 启动redis

此处redis非必需，使用的是云服务器redis。
![](./imgs/image14.png)

##### 2.4.2 服务的启动

![](./imgs/image15.png)

##### 2.4.3 再次刷新页面

刷新页面，前端页面展现。
![](./imgs/image16.png)

### 3.在服务器部署

[项目源代码地址](https://gitee.com/shigen/spring-boot--vue)

## 效果预览

### 登录页

![](./imgs/effect/login_page.png)

### 数据看板

![](./imgs/effect/data_view.png)

### 全部用户

![](./imgs/effect/all_users.png)

### 在线用户

![](./imgs/effect/online_user.png)

### 表单设计

![](./imgs/effect/form_design.png)

### 表单预览

![](./imgs/effect/form_view.png)

### 表单数据

![](./imgs/effect/form_data.png)

### 个人信息

![](./imgs/effect/personal_info.png)

### 登录信息

![](./imgs/effect/login_data.png)

### 更新日志

![](./imgs/effect/updata_log.png)

### 关于我

![](./imgs/effect/about_me.png)

### 文件夹

![](./imgs/effect/file_folder.png)

### 文件在线预览

![](./imgs/effect/file_preview.png)