# vue-springboot

**Repository Path**: zhao-zhiwei521/vue-springboot

## Basic Information

- **Project Name**: vue-springboot
- **Description**: vue3+springboot2项目
- **Primary Language**: Java
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-23
- **Last Updated**: 2025-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目页面
![img.png](furn-ssm-vue/src/assets/image/img.png)
![img_1.png](furn-ssm-vue/src/assets/image/img_1.png)
![img_4.png](furn-ssm-vue/src/assets/image/img_4.png)
![img_2.png](furn-ssm-vue/src/assets/image/img_2.png)
![img_3.png](furn-ssm-vue/src/assets/image/img_3.png)
# 前端部署
1.打包Vue项目
npm install --registry=https://registry.npmmirror.com
```agsl
# 在Vue项目根目录下执行
npm run build
```
2.上传Vue打包文件
```agsl
mkdir -p /var/www/vue-app
scp -r dist/* root@1.15.25.171:/var/www/vue-app/dist # 在本地执行
```
3.安装Nginx源码
```agsl
# 安装Nginx源码
https://github.com/nginx/nginx
scp nginx-1.27.5.tar.gz root@1.15.25.171:/opt/nginx
# 解压
tar -zxvf nginx-1.27.5.tar.gz
```
4.配置Nginx
```agsl
# 编辑Nginx配置文件
touch /usr/local/nginx/conf/nginx.conf
vim /usr/local/nginx/conf/nginx.conf

server {
    listen 80;
    # 替换为你的域名或IP
    server_name 1.15.25.171;

    # 前端静态文件目录
    root /var/www/vue-app/dist;
    index index.html;

    # 处理前端路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 后端API代理
    location /api/ {
        proxy_pass http://localhost:9090/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
```
5.编译Nginx
```agsl
# 安装编译依赖
yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel

# 配置编译选项
# 编译后的Nginx将被安装到/usr/local/nginx目录下，包含配置文件、日志、可执行文件等
./configure --prefix=/usr/local/nginx \
            --with-http_ssl_module \
            --with-http_v2_module \
            --with-http_realip_module \
            --with-http_stub_status_module \
            --with-threads \
            --with-file-aio

# 编译和安装
make
make install
```
6.临时启动Nginx测试
```agsl
/usr/local/nginx/sbin/nginx
# 查看Nginx版本
/usr/local/nginx/sbin/nginx -v
# 停止Nginx
/usr/local/nginx/sbin/nginx -s stop
```
7.创建Nginx服务文件
```agsl
# 为编译安装的Nginx创建systemd服务文件
vim /etc/systemd/system/nginx.service

[Unit]
Description=nginx - high performance web server
Documentation=http://nginx.org/en/docs/
After=network-online.target remote-fs.target nss-lookup.target
Wants=network-online.target

[Service]
Type=forking
ExecStartPre=/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf
ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/bin/kill -s QUIT $MAINPID
TimeoutStopSec=5
KillMode=process
PrivateTmp=true

[Install]
WantedBy=multi-user.target
```
8.启用并启动Nginx服务
```agsl
# 重新加载systemd配置
systemctl daemon-reload
# 设置开机自启
systemctl enable nginx
# 启动服务
systemctl start nginx
# 检查服务状态
systemctl status nginx
# 关闭服务
systemctl stop nginx
# 更改配置,重启. 进入到/usr/local/nginx/sbin
./nginx -s reload
```
9.验证Nginx安装
```agsl
验证安装
# 检查Nginx是否运行
ps -ef | grep nginx
# 检查Nginx版本
/usr/local/nginx/sbin/nginx -v
# 测试配置文件语法
/usr/local/nginx/sbin/nginx -t
```
# 后端部署
1.pom.xml打包插件配置
```agsl
在SpringBoot项目的pom.xml中，需要确保有正确的打包插件配置：
<build>
    <finalName>springboot-furn</finalName>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <configuration>
                <mainClass>com.zzw.springboot.Application</mainClass>
                <executable>true</executable>
            </configuration>
            <executions>
                <execution>
                    <goals>
                        <goal>repackage</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>
```
2.打包SpringBoot项目
```agsl
mvn clean 
mvn package -DskipTests
```
3.上传SpringBoot jar包
```agsl
mkdir -p /opt/app
scp target/springboot-furn.jar root@1.15.25.171:/opt/app/springboot-furn.jar
chmod +x /opt/app/springboot-furn.jar
```
4.创建配置文件(在生产环境中，最佳做法是将配置文件放在JAR包外部, 可以在不重新打包应用的情况下修改配置)
```agsl
mkdir -p /opt/app/config
vim /opt/app/config/application-prod.yml

配置内容
server:
  port: 9090
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/springboot-furn?useUnicode=true&characterEncoding=utf-8&useSSL=false
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: zhaozhiwei521
    druid:
      # 其他配置保持不变或按需调整
```
_5.创建mysql数据库_
```agsl
# 登录MySQL
mysql -u root -p
# 导入数据  
SOURCE /目标路径/backup.sql; 
```
6.创建启动脚本(比直接运行java -jar命令好，因为提供了基本的进程管理功能，但比创建systemd服务简单，适合临时部署或测试环境)
```agsl
vim /opt/app/springboot-start.sh
# 脚本内容
#!/bin/bash
nohup java -jar /opt/app/springboot-furn.jar --spring.profiles.active=prod > /opt/app/app.log 2>&1 &
echo $! > /opt/app/app.pid
```
7.运行应用
```agsl
# 设置执行权限
chmod +x /opt/app/springboot-start.sh
# 启动应用
/opt/app/springboot-start.sh

# 查找Java进程
ps -ef | grep springboot-furn.jar
# 关闭对应进程
kill <进程ID>
# 如果需要强制关闭
kill -9 <进程ID>
```
8.创建systemd服务文件
```agsl
vim /etc/systemd/system/springboot-app.service

# 查找Java可执行文件的路径
which java

脚本内容
[Unit]
Description=Spring Boot Application
After=syslog.target network.target

[Service]
User=root
ExecStart=/usr/local/java/jdk1.8.0_261/bin/java -jar /opt/app/springboot-furn.jar
SuccessExitStatus=143
Restart=always
RestartSec=5

[Install]
WantedBy=multi-user.target
```
9.启动服务
```agsl
# 启用服务
systemctl daemon-reload
systemctl enable springboot-app
systemctl start springboot-app
检查后端服务是否正常运行
systemctl status springboot-app
关闭服务
systemctl stop springboot-app
```
10.防火墙配置
```agsl
# 查看防火墙状态
firewall-cmd --state
# 防火墙开放80和9090端口：
firewall-cmd --zone=public --add-port=80/tcp --permanent
firewall-cmd --zone=public --add-port=9090/tcp --permanent
firewall-cmd --reload
```
# WinSCP
1.安装: https://winscp.net/eng/download.php
2.在项目的.git/hooks目录下创建post-commit文件（Windows下为post-commit.bat），用于在每次提交后自动执行脚本。
```agsl

```
# 引入swagger
```agsl
<!-- Swagger3依赖 -->
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-boot-starter</artifactId>
    <version>3.0.0</version>
</dependency>
```
```agsl
@Configuration
public class SwaggerConfig {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.OAS_30)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.zzw.springboot.controller"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("后台管理系统接口文档")
                .description("springboot+vue项目接口文档")
                .contact(new Contact("zzw", "", ""))
                .version("1.0")
                .build();
    }
} 
```
```agsl
  mvc:
    pathmatch:
      matching-strategy: ant_path_matcher
```