vue组件中无法正确接收并处理axios请求

Question

这个问题已经困扰我好久了，再不解决就要延毕了

在电脑面前坐了两天只能确定前端应该是正确的发送了请求，但发送请求后无法正确接受后端返回的数据。

问题：vue组件无法接受后端数据
前端部分：
axios请求

import axios from "axios";
export default{
    name:'simple_query',
    data(){
        return{
            simple_query_input:"2",
            che_name:"无",
            chename:null
        }
    },
    methods:{
        simple_query_submit(){
            console.log("开始方法");
            var self=this;
            axios.post("/simple_query",{
            },this.simple_query_input).then(res=>{
                console.log("res");
                console.log(res);
                console.log("res.data");
                console.log(res.data);
                self.chename =res.data;
                console.log(res);
            }).catch(err=>{
                console.log(err);
            })
            // console.log("vue output=" + self.chename.Name);
            // console.log(self.chename.Name);
            // console.log(this.chename.Name);
            console.log("this.chename");
            console.log(this.chename);
        }
    },
    mounted(){
        this.simple_query_submit();
    }
}

template部分

<div id="query_input">
        <div id="simple_query_box" class="input_box">
            <p id="title_text">简单查询</p>
            <label for="simple_query_input">
                <input v-model="simple_query_input" type="text" id="simple_query_input" placeholder="中英文名/CAS号/化学式">
            </label>
            <!--                <input type="submit" id="simple_query_submit" placeholder="提交">-->
            <button  id="simple_query_submit" type="submit" name="simple_query_submit" value="提交">
                <img id="meu1" src="../assets/images/搜索灰.png" alt="搜索">
                <img id="meu2" src="../assets/images/搜索蓝.png" alt="搜索">
            </button>
<!--            <button v-on:click="conslimits()" class="btn btn-primary">${che_name}</button>-->
            <p id="query_tip_text" class="query_tip">{{ chename.Name }}</p>
        </div>
    </div>

后端部分

controller文件

    @RequestMapping(value = "/simple_query",method = RequestMethod.POST)
    public cheName handleSimpleQuery(@RequestParam("simple_query_input") String simpleQueryInput) throws Exception {
        System.out.println(simpleQueryInput); // 打印从请求中得到的 "simple_query_input"
        Integer id = Integer.valueOf(simpleQueryInput);
        queryTest Test = new queryTest();
        String ch_name = Test.findOriginalTableByIdTest(id);
        cheName chename = new cheName();
        chename.setName(ch_name);
        return chename;
    }

cheName 类

package main.java.query.dao;

public class cheName {
    private String Name;

    public String getName() {
        return Name;
    }

    public void setName(String name) {
        Name = name;
    }
}

这是我怀疑没有get做的测试，把/simple_query改成了错误地址

下面是正确请求地址的运行结果

下面是我使用的软件或环境的大概版本号
ideal 2023
jdk 11
tomcat 8
vue 3
@vue/cli 5.0.8
spring springweb spring mvc 5.2
"axios": "^1.6.8",
"bootstrap": "^5.3.3",
"bootstrap-vue": "^2.23.1",
"core-js": "^3.8.3",
"http-proxy-middleware": "^3.0.0",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-input-range": "^1.0.8",
"vue-router": "^4.0.13"

Answer 1

这个status200不代表服务器真的200，这个只能说明服务器是正确接受了此次请求，一般来说要以后端接口返回的状态为准，res.data.data才是服务器真实返回的内容，你看一下是不是服务器是不是没能正确返回，可以用postman测试一下接口.我可以用向日葵远程连接看一下