第一种部署方式（前端打包到后端）

打包

前端

webstrom打包

后端

把dist直接丢到static文件夹里面

打包

第二种部署方式（Nginx代理-推荐）

linux使用nginx代理服务器
实现步骤，前端打包，传到nginx默认路径
后端打包jar，随便在某个位置运行即可

java -jar "jar包名"

nginx代理配置

访问路径端口

比如这里，我们要访问81端口，才能访问到资源

后端端口

只影响api请求地址
比如前端注意

后端注意

服务器运行

传到服务器

winSCP链接服务器

后端target文件复制到这里即可

在服务器后台运行

安装screen

yum install screen

开启新的窗口

screen -S taotao

安装jdk后使用下面命令运行项目

java -jar 项目名

功能实现记录

axios请求使后端响应数据

需要安装axios并在组件中引入

npm install axios --save-D

import axios from 'axios'

成功

对访问者ip获取

import axios from 'axios'
//引入组件
export default {name: 'Home',mounted() {//向服务端发送请求axios({method: 'post',url: 'http://43.142.56.133:80/Test/demo',url: 'http://www.guiguimaster.xyz:80/Test/demo',})console.log('home组件挂载了')},
}

package com.taotao;import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;/*** create by 刘鸿涛* 2022/12/2 17:01*/
@SuppressWarnings({"all"})
@RestController
@RequestMapping("/Test")
public class Test {int count = 0;@PostMapping("/demo")public void getIP(HttpServletRequest request) {if (request.getHeader("x-forwarded-for") == null) {System.out.println(request.getRemoteAddr());} else {System.out.println(request.getHeader("x-forwarded-for"));}System.out.println("执行成功，您的服务器被访问了 " + (++count) + " 次");}
}

效果

对访问者ip记录

package com.taotao;import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;/*** create by 刘鸿涛* 2022/12/2 17:01*/
@SuppressWarnings({"all"})
@RestController
@RequestMapping("/Test")
public class Test {//全局静态变量，统计访问次数public static int VisitCount = 0;@PostMapping("/demo")public void getIP(HttpServletRequest request) {String visitorIP = "";if (request.getHeader("x-forwarded-for") == null) {visitorIP =  request.getRemoteAddr();} else {visitorIP = request.getHeader("x-forwarded-for");}System.out.println("执行成功，您的服务器被访问了 " + (++VisitCount) + " 次");//调用文件流方法WriteServerLogs(visitorIP);}public static void WriteServerLogs(String write) {//文件流String serverLogs = "/MyWeb/server.logs";File file = new File(serverLogs);//如果不存在if (!file.exists()) {try {file.createNewFile();} catch (IOException e) {System.out.println("创建server.logs文件失败");}} else {System.out.println("文件已存在，准备写入文件");}//创建bw准备写入数据BufferedWriter bw = null;try {//append参数代表追加，不覆盖文件bw = new BufferedWriter(new FileWriter(file,true));} catch (IOException e) {System.out.println("BufferedWriter对象创建失败");}//写入内容try {//这里传入参数,注意换行时使用转义字符，\r\n，实现换行bw.write(write + "\r\n");} catch (IOException e) {System.out.println("写入错误");}//关闭流if (bw != null) {try {bw.close();} catch (IOException e) {System.out.println("关闭流异常");}}}
}

连接mysql数据库

更改yml文件

spring:datasource:druid:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://43142.56.133:3306/mybatis?serverTimezone=UTCusername: rootpassword: xxxxxxxx

添加依赖

        <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency>

用户登录功能开发

连上了，准备先自己写个用户登录业务，不过使用boot框架的话确实学不到什么东西，都已经忘了连接数据库的jdbc代码了，boot全是封装好的注解

前端向后端提交表单数据有点蒙

就这么一个表单，我还是准备用axios请求

使用vue双向绑定，提交时候走这个axios请求就行了

跨域问题，实际开发中跨域问题要经常处理

但是我不明白为何requestbody没有正常得到前端数据

后端功能正常，前端接收后端回返数据正常，登录成功，还需要设计下前端login按钮位置，以及如何展示后端这些数据的问题

这样的话就有点感觉了
然后前端根据后端的json数据，可以判断用户登录状态，并且做出相应的反应
这是密码错误状态

这边是用户名不存在情况

业务中直接获取了表单中username的值，调试后发现这个表单数据还是存在与vue实例中的

开发、测试环境注意修改内容

测试运行

有两种方法

第一种方法

后端项目与前端项目分别启动即可，前端依然可以测试数据库

第二种方法

单独从后端启动
前端项目打包后的dist文件夹内容复制到后端的static文件夹下下运行后端，然后在idea中启动

前端vue

login组件

后端Spring boot

yml数据库

本地数据库

前端vue注意事项

全局事件总线

前提有3个组件互相传递数据，其中两个组件都开启过监听事件，在你用完第三个组件准备在销毁组件时释放全局事件总线，那么，之前两个组件中的监听事件也会关闭，需要重新开启

  beforeDestroy() {//释放全局事件总线bus,已经有开启的组件并还需要使用时，不能随便释放，否则会导致其他组件监听重置，需要重新开启监听// this.$bus.$off()}

后端java注意事项

webstorm运行项目

运行上线时可能会遇到的各种bug

请求外网api异常时，不要强制请求

这是我初始化ai性格的地方，但是需要外网，但是我的域名使用外网进不去，所以就很冲突，导致这个api请求失败，导致项目中其他api请求失败

mysql连接池爆掉

errorCode 1129, state HY000, Host ‘xxx‘ is blocked because of many connection errors
查看连接池容量，默认100

show global variables like '%max_connect_errors%'

改为99999

set global max_connect_errors=99999

外网无法访问服务器

原因是因为screen运行的jar包，因为服务器站点在国内，所以这样运行导致外网不能访问

解决方案

使用nginx代理服务器来进行服务器上传

linux进程操作

查询关于java的进程

ps -ef|grep java

关闭进程

kill -9 进程id