登录表单提交思考

一直在学习的路上__maoer

已于 2024-01-31 21:07:15 修改

阅读量790

点赞数 17

于 2024-01-31 20:46:05 首次发布

本文链接：https://blog.csdn.net/qq_42806414/article/details/135960676

版权

文章讲述了在Vue前端开发中，未配置

摘要由CSDN通过智能技术生成

文章目录

目录

文章目录

一、未配置action，提交表单

1.前端代码

2.前端vue设计，发送axios请求

3.出现的问题

二、配置action为后端controller接口方法绝对路径，提交表单

1.前端代码

2.前端vue设计，发送axios请求

3.出现的问题

三、对于以上两种情况，解决方法（不止这一种方法解决，还有很多其他方式，作者只根据目前自己代码给出了以下解决方法）

1.前端代码

2.前端vue设计，发送axios请求

3.解决问题

一、未配置action，提交表单

1.前端代码

前端登录表单设计：

<body>
     <div id="app">
         <!--登录表单-->
         <!--未配置action=""属性，相当于执行为空-->
         <form method="post">
         用户名：<input type="text" placeholder="请输入用户名：" v-model="loginUserVO.userName"/><br/>
         密码：<input type="password" placeholder="请输入密码：" v-model="loginUserVO.password"/><br/>
         <button @click="submitLogin">登录</button>
         </form>
     </div>
</body>

2.前端vue设计，发送axios请求

前端vue设计：

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    axios.defaults.baseURL = 'http://localhost:8088/';//设置前缀地址
    //解决统一响应数据操作
    axios.interceptors.response.use(function (response) {
        return response.data;
    }, function (error) {
        return Promise.reject(error);
    });

    var mv = new Vue({
        el : "#app",
        data : {
              /** 登录对象 */
            loginUserVO : {
                userName : undefined,
                password : undefined
            }
        },
        methods:{
            submitLogin() {
                axios({
                    method: 'post',
                    url: 'user/login',
                    data: this.loginUserVO
                }).then((resp) => {
                    console.log(resp)
                    if (resp.code === 200) {
                      /** 登录成功后续逻辑 */
                    }
                });
            }
        },
        created(){},
        mounted(){}
    })
</script>

3.出现的问题

浏览器测试是否发送请求：

浏览器测试发送请求

很显然浏览器测试后发现并未发送请求。其中原因是<form>标签中就算没有显示配置action=""属性，表单提交数据也会通过cation执行属性指定路径，但我们又没有配置属性值，所以action默认为空值，这样就相当于没有请求对应controller接口方法，所以并没有发送请求，浏览器检查也就获取不到对应的请求。

二、配置action为后端controller接口方法绝对路径，提交表单

1.前端代码

前端登录表单设计：

<body>
     <div id="app">
         <!--登录表单-->
         <!--配置action=""为后端controller方法接口绝对路径-->
         <form method="post" action="http://localhost:8088/user/login">
         用户名：<input type="text" placeholder="请输入用户名：" v-model="loginUserVO.userName"/><br/>
         密码：<input type="password" placeholder="请输入密码：" v-model="loginUserVO.password"/><br/>
         <button @click="submitLogin">登录</button>
         </form>
     </div>
</body>

2.前端vue设计，发送axios请求

前端vue设计：

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    axios.defaults.baseURL = 'http://localhost:8088/';//设置前缀地址
    //解决统一响应数据操作
    axios.interceptors.response.use(function (response) {
        return response.data;
    }, function (error) {
        return Promise.reject(error);
    });

    var mv = new Vue({
        el : "#app",
        data : {
              /** 登录对象 */
            loginUserVO : {
                userName : undefined,
                password : undefined
            }
        },
        methods:{
            submitLogin() {
                axios({
                    method: 'post',
                    url: 'user/login',
                    data: this.loginUserVO
                }).then((resp) => {
                    console.log(resp)
                    if (resp.code === 200) {
                      /** 登录成功后续逻辑 */
                    }
                });
            }
        },
        created(){},
        mounted(){}
    })
</script>

3.出现的问题

浏览器测试提交表单数据，报错状态码为：415，报错原因为：不支持的媒体类型（Unsupported Media Type）是一种 HTTP 协议的错误状态代码，表示服务器由于不支持其有效载荷的格式，从而拒绝接受客户端的请求。此处是表示前端请求头中Content-type指定格式不支持而导致的报错。

Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

三、对于以上两种情况，解决方法（不止这一种方法解决，还有很多其他方式，作者只根据目前自己代码给出了以下解决方法）

1.前端代码

前端登录表单设计：

<body>
     <div id="app">
         <!--登录表单-->
         <!--<form method="post" action="http://localhost:8088/user/login">-->
         用户名：<input type="text" placeholder="请输入用户名：" v-model="loginUserVO.userName"/><br/>
         密码：<input type="password" placeholder="请输入密码：" v-model="loginUserVO.password"/><br/>
         <button @click="submitLogin">登录</button>
         <!--</form>-->
     </div>
</body>

2.前端vue设计，发送axios请求

前端vue设计：

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    axios.defaults.baseURL = 'http://localhost:8088/';//设置前缀地址
    //解决统一响应数据操作
    axios.interceptors.response.use(function (response) {
        return response.data;
    }, function (error) {
        return Promise.reject(error);
    });

    var mv = new Vue({
        el : "#app",
        data : {
              /** 登录对象 */
            loginUserVO : {
                userName : undefined,
                password : undefined
            }
        },
        methods:{
            submitLogin() {
                axios({
                    method: 'post',
                    url: 'user/login',
                    data: this.loginUserVO
                }).then((resp) => {
                    console.log(resp)
                    if (resp.code === 200) {
                      /** 登录成功后续逻辑 */
                    }
                });
            }
        },
        created(){},
        mounted(){}
    })
</script>