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

SpringBoot

打包脚手架项目

vs打包

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

在服务器后台运行

开启新的窗口

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.Driver
      url: jdbc:mysql://43142.56.133:3306/mybatis?serverTimezone=UTC
      username: root
      password: xxxxxxxx

添加依赖

        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <scope>runtimescope>
        dependency>

用户登录功能开发

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

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

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

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

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

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

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

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

这边是用户名不存在情况

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