vue+axios使用（form/json）传参，后端SpringBoot接受

最新推荐文章于 2024-04-20 10:35:20 发布

原创最新推荐文章于 2024-04-20 10:35:20 发布 · 1.2w 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#json

SpringBoot+Vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用Vue和Axios以form表单和JSON格式向前端发送数据，以及SpringBoot如何接收这两种格式的数据。通过具体示例，展示了从前端构造请求到后端处理请求的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
        }
    }