为什么要引入qs框架以及怎样引入qs框架

遇事不决先敲代码

于 2024-08-08 08:59:39 发布

阅读量321

点赞数 5

文章标签： java

本文链接：https://blog.csdn.net/qq_70175303/article/details/141016799

版权

1.为什么要引入qs框架？

前端给后端发请求时，会携带一个JS对象user,后端为了拿到JS对象中的数据，必须在方法形参前添加@RequestBody注解
这会导致Controller中有的方法有这个注解(因为前端请求里是JS对象),有的方法没有这个注解，很混乱
如果我们想统一不添加@RequestBody注解，就需要保证前端请求中的实参不是JS对象的格式
这时就需要使用 qs 框架把 JS 对象转为查询字符串格式了

2.qs框架有什么作用？怎样引入qs框架？

2.1.作用：将JS对象转为查询字符串格式

2.2怎么引入qs框架？

标黄的部分就是查询字符串格式 http://localhost:8080/login?username=tom&password=123456
写法：qs.stringify(user.value);
结果：username=tom&password=123456

安装步骤：停止现在运行的前端项目，执行命令： npm install qs 即可，安装完毕重新启动前端项目

3.代码示例：

前端

<!--用户管理页-->
<template>
</template>
<script setup>
import {ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

//定义对象用来保存表单中的员工数据
const saveUserForm = ref({
  username:'',
  phone:'',
  email:'',
  age:'',
  level:'',
  parentId:'',
  gender:'',
  status:''
});

//定义保存用户的方法
const saveUser = () => {
  //console.log(saveUserForm.value);
  let data = qs.stringify(saveUserForm.value);
  console.log(data);
  //username=vv&phone=18877776666&email=vv%40193.com&age=50&level=20&parentId=102&gender=1&status=1
  axios.post(BASE_URL+'/v1/user/save',data)
      .then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success('保存成功!');
          //用户确认关闭后,关闭弹窗
          dialogVisible.value = false;
          //清空已输入的表单数据
          saveUserForm.value = {};
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

</script>

<style scoped>

</style>

后端



@Slf4j
@RestController
@RequestMapping("/v1/user")
public class UserController {
    @Autowired
    UserService userService;

    @PostMapping("save")
    //前端传过来的数据已经由qs(QueryString)转为了查询字符串格式
    //所以不需要使用@RequstBody注解进行映射了
    //public JsonResult saveUser(@RequestBody UserSaveParam userSaveParam){
    public JsonResult saveUser(UserSaveParam userSaveParam){
        log.debug("保存用户,userSaveParam={}",userSaveParam);
        userService.saveUser(userSaveParam);
        return JsonResult.ok();
    }
}