SpringBoot接收前端传来的json数据
当前端传来json数据时,后端有两种方式可以接收:使用POJO
和Map
进行接收。
前端json数据
{ id:121, //数字 name:"lhj", //字符串 scoreList:[ //对象 {Java:95}, {Python:98}, {C++:94} ] }
一、使用POJO
若前端传递过来的数据刚好和我们的bean实体对象属性一致,则可以使用对象的形式接收
。
后端实体类
@Component public class Score { private int id; private String name; private List<ScoreList> scoreList; }
后端Controller
@PostMapping("/student/score") public void getScore(@RequestBody Score score){ System.out.println(score); }
● 前端数据和bean对象属性要一致
● 必须使用@RequestBody注解
二、使用Map接收
若前端传递过来的数据很复杂,没有对应的POJO与其对应,就可以用Map进行接收。
后台Controller
@PostMapping("/lhj/getdata") public void getData(@RequestBody Map<String,Object>map){ System.out.println(map); }
对于Map<String,Object>,值的类型建议设置为Object,这样可以使Map能接收各种类型的数据,如字符串、数字、数组和对象等。
使用POJO和Map接收的比较
1、map的优点:
● 灵活性更强,易扩展,耦合度低;
● 代码简洁;
● MyBatis查询的返回结果本身就是Map,效率可能会比返回JavaBean高。
2、map的缺点
● JavaBean的数据在编译期就会对其进行校验,如果出错会直接提示。而Map的数据则需要到sql层才会进行处理检验。因此如果map的参数名称写错、参数值如果多传乱传只能到sql层才会被发现。
● Map中所拥有的参数个数、类型、每个参数代表的含义对外不透明,团队开发及后期维护难度大
3、JavaBean的优点:
● 面向对象的良好诠释;
● 数据结构清晰,便于团队开发和后期维护;
● 代码足够健壮,可以排除掉编译期错误;
4、javabean的缺点:
● 代码量增多,大量时间去封装用到的表对象。
● 可能会影响开发效率。
三、PO和VO相结合
● 创建PO与数据库字段对应,用于对数据库的操作;
● 创建VO用于封装和前端打交道的数据,使用VO可以避免使用Map
四、vue前端修改json数据
1.json数据
- JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
-
JSON 语法是 JavaScript 对象表示语法的子集。
- 数据在名称/值对中
- 数据由逗号 , 分隔
- 使用斜杆来转义 \ 字符
- 大括号 {} 保存对象
- 中括号 [] 保存数组,数组可以包含多个对象
json是map和数组互相嵌套的结构,可以通过javascript对数组和map的操作实现既定格式的json数据构造
2.修改json数据
<script> let array = []; export default { data() { return { // let array= [], }; }, methods: { open() { for (let i = 0; i < 5; i++) { array[i] = {}; array[i].judgeid = "123"; array[i].byjudgeid = "123"; } console.log(array); }, }, }; </script>
3.给json对象添加删除修改属性
<script type="text/javascript"> //json对象 var json={ "firstName":"Bill" , "lastName":"Gates"}; //给json对象添加新的属性并赋值 json.sex="man"; //也可以如下添加新的属性并赋值 json["sex"]="man"; //删除json对象的firstName属性 delete json.firstName; //也可以如下删除firstName属性的值 delete json["firstName"]; //修改json对象的firstName属性的值 json.firstName="Thomas"; //也可以如下修改firstName属性的值 json["firstName"]="Thomas"; </script>
参考:
https://blog.csdn.net/IT__learning/article/details/115026067