vue+axios使用(form/json)传参,后端SpringBoot接受

今天用到了前后端数据传输所以记录一下
前端向后端传输数据形式总共分为两种,Form表单形式和JSON格式
下面举例说明

一、前端axios传参
//传递的数据
data() {
    return {
        loginForm: {
            username: '',
            password: '',
        },
    }
},
1、form表单形式
import Qs from 'qs'
//(如果只是get请求就不需要引qs)

this.$axios({
  		 headers: {
	         'Content-Type': 'application/x-www-form-urlencoded'
	     },
	     method: 'post',
	     url: '/login',
	     data: Qs.stringify(this.loginForm)
 	 })
	 .then(
	     successResponse => {
	     if (successResponse.data.code === 200) {
	         this.$router.replace({path: '/index'})
	     }else{
	         console.log("账号或密码错误");
	         this.loginForm.message="账号或密码错误";
	     }
	 })
	 .catch(failResponse => {
	 })
2.1、JSON形式(1)
this.$axios({
         headers: {
              'Content-Type': 'application/json;'
          },
          method: 'post',
          url: '/login',
          transformRequest: [function (data) {
          // 对 data 进行任意转换处理
          return JSON.stringify(data);
          }],
          data: this.loginForm
      })
      .then(
          successResponse => {
          if (successResponse.data.code === 200) {
              this.$router.replace({path: '/index'})
          }else{
              console.log("账号或密码错误");
              this.loginForm.message="账号或密码错误";
          }
      })
      .catch(failResponse => {
      })
2.2JSON形式(2)
//简化形式
this.$axios
    .post('/login', {
         username: this.loginForm.username,
         password: this.loginForm.password,
     })
     .then(
         successResponse => {
         if (successResponse.data.code === 200) {
             this.$router.replace({path: '/index'})
         }else{
             console.log("账号或密码错误");
             this.loginForm.message="账号或密码错误";
         }
     })
     .catch(failResponse => {
     })
二、后端接受数据
1、接受form表单数据
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestParam Map<String,Object> reqMap, Model model) {
        String username=reqMap.get("username").toString();
        String password=reqMap.get("password").toString();
        System.out.println(username+":"+password);
        if (!Objects.equals("admin", username) || !Objects.equals("123", password)) {
            System.out.println("账号密码错误");
            return new Result(400);
        } else {
            System.out.println("登录成功");
            return new Result(200);
        }
    }
2、接受JSON数据
 	@PostMapping(value = "api/login")
    @ResponseBody
    //user是一个bean类
    public Result login(@RequestBody User requestUser) {
        System.out.println(requestUser);
        // 对 html 标签进行转义,防止 XSS 攻击
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);
        if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) {
            System.out.println("账号密码错误");
            return new Result(400);
        } else {
            System.out.println("登录成功");
            return new Result(200);
        }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南方-D

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值