点击更新后端无法进行操作，前端也不报错

小海海不怕困难

已于 2022-05-31 16:05:13 修改

阅读量1.2w

点赞数

分类专栏：前端文章标签： java

于 2022-05-08 12:23:13 首次发布

本文链接：https://blog.csdn.net/weixin_55229531/article/details/124646315

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

第一步排查后端：

发现后端没有有打印任何信息，可以推测前端点击发送按钮以后，数据并没有进行发送，可以推测错误的原因大概率在前端。重点排查前端。

第二步排查前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
    <script src="/user_sys/js/axios.min.js"></script>
    <script src="/user_sys/js/vue.min.js"></script>
</head>
<body>


    <input type="text" v-model="user.username" placeholder="请输入用户名"><br>
    <input type="text" v-model="user.password" placeholder="请输入密码"><br>
    <button @click="addUser()">新增</button>



    <script>
        let app=new Vue({
            el:"#app",
            data:{
                user:{
                    username:"",
                    password:"",
                }
            },
            methods: {
                addUser() {
                    axios({
                        url: "http://localhost:8080/user_sys/user/",
                        method: "POST",
                        data: app.user
                    }).then(function (resp) {
                        console.log(resp.data);
                        location.href = "user.html";

                    })
                }

            }

        })

    </script>
</body>
</html>

发现错误来源：

我没有定义id为app的组件，因此无法发送

修改后的前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
    <script src="/user_sys/js/axios.min.js"></script>
    <script src="/user_sys/js/vue.min.js"></script>
</head>
<body>


<div id="app">
    <input type="text" v-model="user.username" placeholder="请输入用户名"><br>
    <input type="text" v-model="user.password" placeholder="请输入密码"><br>
    <button @click="addUser()">新增</button>
</div>



    <script>
        let app=new Vue({
            el:"#app",
            data:{
                user:{
                    username:"",
                    password:"",
                }
            },
            methods: {
                addUser() {
                    axios({
                        url: "http://localhost:8080/user_sys/user/",
                        method: "POST",
                        data: app.user
                    }).then(function (resp) {
                        console.log(resp.data);
                        location.href = "user.html";

                    })
                }

            }

        })

    </script>
</body>
</html>