邵阳住建部网站,万词霸屏百度推广seo,网站整体形象策划与包装,网站建设公司推荐理由axios默认是application/json方式提交#xff0c;controller接收的时候必须以RequestBody的方式接收#xff0c;有时候不太方便。如果axios以application/x-www-form-urlencoded方式提交数据#xff0c;controller接收的时候只要保证名字应对类型正确即可。
前端代码#…axios默认是application/json方式提交controller接收的时候必须以RequestBody的方式接收有时候不太方便。如果axios以application/x-www-form-urlencoded方式提交数据controller接收的时候只要保证名字应对类型正确即可。
前端代码 el-dialogv-modeldialogVisible width30%el-form :modelformData label-positiontopel-form-item label用户名el-input v-modelformData.username placeholder用户名...//el-form-itemel-form-item label密码el-input typepassword v-modelformData.password placeholder密码...//el-form-item/el-formtemplate v-slot:headerspan登录窗口/span/templatetemplate #footerspan classdialog-footerel-button typeprimary clickformConfirm登录/el-button/span/template/el-dialog
这是利用Element-Plus模态框提供的三个SLOTfooterheader和default嵌套了一个Element-Plus的表单。点击登录按钮时将双向绑定的formData提交到controller。
点击登录按钮时出发的formConfirm方法
const formConfirmfunction (){this.dialogVisiblefalse;axios.post(url.login,formData,{headers: {Content-Type: application/x-www-form-urlencoded}}).then(resp{const data resp.data;this.formData.username;this.formData.password;console.log(data);}).catch(err{console.log(login error: ,err);});
}
核心就是使用了三参数的post函数 post(url,data,config) config里面设定发起post请求时的额外设置header是设置config的一部分而header中需要显式的设置content-type为application/x-www-form-urlencoded这样对于服务器来说这就是一个表单提交数据的请求。
后端controller PostMapping(/login)public MapString,String login(String username, String password){log.info(username---{},username);log.info(password---{},password);MapString,String resp new HashMap();resp.put(message,wrong name or password);resp.put(token,null);if(abc.equals(username) 123456.equals(password)){String token UUID.randomUUID().toString();stringRedisTemplate.opsForValue().set(token,token,3600, TimeUnit.SECONDS);resp.put(message,success);resp.put(token,token);return resp;}return resp;}
如果是表单提交的数据那么handler接收的方式不用添加任何额外的注解利用名称对应类型正确的方式就可以接收表单数据了。
