个人网站开发——全栈项目开发日记

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

打包

前端

webstrom打包

后端

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

打包

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

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

java -jar "jar包名"
1

nginx代理配置

访问路径端口

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

后端端口

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

后端注意

服务器运行

传到服务器

winSCP链接服务器

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

在服务器后台运行

安装screen

yum install screen
1

开启新的窗口

screen -S taotao
1

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

java -jar 项目名
1

功能实现记录

axios请求使后端响应数据

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

npm install axios --save-D
1

import axios from 'axios'
1

成功

对访问者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组件挂载了')
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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) + " 次");
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

效果

对访问者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("关闭流异常");
            }
        }

    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

连接mysql数据库

更改yml文件

spring:
  datasource:
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://43142.56.133:3306/mybatis?serverTimezone=UTC
      username: root
      password: xxxxxxxx
1
2
3
4
5
6
7

添加依赖

        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <scope>runtimescope>
        dependency>
1
2
3
4
5

用户登录功能开发

连上了，准备先自己写个用户登录业务，不过使用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()
  }
1
2
3
4

后端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%'
1

改为99999

set global max_connect_errors=99999
1

外网无法访问服务器

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

解决方案

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

linux进程操作

查询关于java的进程

ps -ef|grep java
1

关闭进程

kill -9 进程id
1