浅浅解决一下前后端通讯问题

bg

前几天接到一个单，需要解决javaweb前后端通讯问题，报酬嘛，好商量，也顺手帮忙解决了后端起不起来，8080端口占用问题。

跨域配置

本以为是跨域问题需要解决，其实不是，客户后端项目中已经有了跨域配置

package com.config;

/**
 */

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**  全局跨域配置类
 */
@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        config.addAllowedOrigin("*");
        //是否发送Cookie信息
        config.setAllowCredentials(true);
        //放行哪些原始域(请求方式)
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");     //get
        config.addAllowedMethod("PUT");     //put
        config.addAllowedMethod("POST");    //post
        config.addAllowedMethod("DELETE");  //delete
        config.addAllowedMethod("PATCH");
        config.addAllowedHeader("*");

        //2.添加映射路径
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }

}

前端vue

只需要浅浅的引入axios就可以啦

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8080' 

const fetchPapers = async () => {
  try {

    // 定义分页信息
    const currentPage = 1; // 当前页码
    const pageSize = 10; // 每页显示数量

    // 假设 ThesisPageQuery 中有 query 属性，这里构建查询条件
    const queryCondition = {
      firstAuthor: firstAuthor.value,
      correspondingAuthor: correspondingAuthor.value,
      pubYear: pubYear.value,
      impactFactor: impactFactor.value
    };

    // 构建 ThesisPageQuery 对象结构的数据
    const requestData = {
      page: {
        current: currentPage,
        size: pageSize
      },
      query: queryCondition
    };

    const response = await axios.post('/user/getPageList', requestData); // 替换为实际的后端 API 地址
    papers.value = response.data.records;
    console.log(response.data)
  } catch (error) {
    console.error('Error fetching papers:', error);
  }
};

端口占用

遇到这个问题 首先就是问 -你有别的应用占用8080端口吗 -没有啊 -哦 那就好操作了 直接kill -9（linux）

windows: 打开命令窗口(以管理员身份运行
开始—->运行—->cmd，或者是 WIN+R 组合键，调出命令窗口。

netstat -aon|findstr "8080" # 这里的8080即要查询的端口号
打印：
TCP 0.0.0.0:8080 0.0.0.0:0 LISTENING 1234
记住这个pid就是1234
杀死这个pid
taskkill /F /PID 1234

这样就可以了 完美解决