SpringBoot页面表单请求失败,错误400的解决办法

SpringBoot页面表单请求失败,错误400的解决办法

错误页面:

后台控制台提示:Request method 'POST' not supported

原因分析:

400错误一般指的是请求无效,请求有语法问题或者不能满足请求。

网上分析原因可能有以下:

1. 一般最常见的就是后台的实体类bean与前台穿过的类型不匹配
2. log4j的配置文件里错误将部分log打为Info级别所致
3. 要返回json的却忘了加@ResponseBody
4. 传了非实体bean属性的参数过来。
5. controller指定的参数名称与前台不一致,如:使用了@RequestParam(value="userName")而前台必须指定该名称

查看代码,发现我的POJO对象中有日期属性,问题果然是这里。

原先birth属性的set方法,是自动生成的,如下:

  public void setBirth(Date birth)  {      
            this.birth =birth;
    }

页面传来的参数都是String类型,我传入的参数格式是2018-03-12,在日期转换时发生了错误,页面请求失败。

如果未做任何处理时,springboot默认的日期格式是:2018/03/02

如果输入其他格式或者不输入就会请求失败,如:2018-02-01,2018.01.01

解决办法有两种:

1.直接修改set方法。设置日期格式。

  public void setBirth(String birth) throws ParseException {
      //自定义日期格式
        SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
      //如果没有传入日期,直接返回空值。
        if (StringUtils.isEmpty(birth)) {
            this.birth=null;
            return;
        }else{
            //将传入的日期,按照自定义格式转化后赋值。
            this.birth =sdf.parse(birth) ;
        }
    }

2.在application.properties中配置spring.mvc.date-format属性。

这样就可以顺利将参数注入POJO对象中了。

### 创建基于 Spring Boot 和 Vue 的登录页面 #### 后端开发 (Spring Boot) 为了构建安全可靠的登录机制,后端需完成如下工作: 1. **导入必要的依赖** Maven项目中应在`pom.xml`里加入JWT(JSON Web Token)支持和其他所需库。这有助于简化Token管理流程[^1]。 2. **编写Token工具类** 构建用于生成和解析Token的方法。此类通常包含加密密钥、过期时间设置等功能,确保用户身份认证的安全性和有效性。 3. **定义拦截器** 利用Spring框架提供的Interceptor特性,在每次HTTP请求到达控制器之前检查是否存在有效的Token。如果验证通过,则允许继续执行;反之则返回未授权错误响应给客户端。 4. **配置CORS并处理请求** 配置跨源资源共享(Cross-Origin Resource Sharing),使前后端分离的应用能够正常通信。同时调整服务器对于不同类型的HTTP请求作出适当反应,比如GET/POST等操作。 5. **实现登录接口** 设计RESTful API来接收来自前端提交的用户名密码组合,并对其进行校验。成功后签发新的Token作为回应的一部分发送回去供后续调用其他受保护资源时使用。 ```java @PostMapping("/login") public ResponseEntity<?> authenticateUser(@RequestBody LoginRequest loginRequest) { Authentication authentication = authenticationManager.authenticate( new UsernamePasswordAuthenticationToken(loginRequest.getUsernameOrEmail(), loginRequest.getPassword())); SecurityContextHolder.getContext().setAuthentication(authentication); String jwt = tokenProvider.generateToken(authentication); return ResponseEntity.ok(new JwtAuthenticationResponse(jwt)); } ``` #### 前端开发 (Vue.js) 针对前端部分,主要集中在以下几个方面的工作上: 1. **main.js 中引入Axios实例化对象** Axios是一个流行的JavaScript HTTP客户端库,可以方便地发起异步请求并与API交互。在这里初始化它以便全局范围内都能轻松调用。 2. **利用Vuex存储状态数据** Vuex是Vue官方的状态管理模式加插件,适用于复杂应用中的集中式状态管理和共享逻辑。这里用来保存用户的登录信息如Token等内容。 3. **设计登录表单组件及其事件处理器** 编写HTML模板配合CSS样式创建美观易用的输入框让用户填写账号密码字段。当点击按钮触发submit动作时收集这些值并通过axios.post()向后台传送以获取鉴权令牌。 4. **提供登出功能** 当用户选择注销账户时清除本地缓存里的Token记录并向服务端通知结束会话过程。这样做的目的是防止他人恶意重放攻击造成安全隐患。 ```javascript methods: { handleLogin () { this.$refs.loginForm.validate(valid => { if (!valid) {return false;} const loadingInstance = Loading.service({ fullscreen: true }); axios({ url: '/api/auth/signin', method: 'post', data: { username: this.ruleForm.username, password: this.ruleForm.password } }) .then(response => { localStorage.setItem('token', response.data.accessToken); Message.success('登陆成功'); setTimeout(() => { loadingInstance.close(); router.push('/'); }, 800); }) }).catch(error => { console.log(error.response); Message.error(`登陆失败`); setTimeout(() => { loadingInstance.close(); this.resetLoginForm(); }, 800); }); } }, resetLoginForm(){ this.$refs.loginForm.resetFields(); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值