Springboot和vue数据交互问题

最新推荐文章于 2024-03-26 00:00:00 发布

千魂！~

最新推荐文章于 2024-03-26 00:00:00 发布

阅读量1.7k

点赞数 3

分类专栏： java 文章标签： spring spring boot vue.js

本文链接：https://blog.csdn.net/RememberQian/article/details/103871164

版权

java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一般使用前后台交互模式：使用json数据进行交互

前台代码：

<html>
	<head>
    	<title></title>
        
        <script src="vue.js"></script>
        <script src="vue-resource.js"></script>
        
    </head>
<body>
  
    <div id="app">  
     
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
               order:{
                   oid:'',
                   oname:''
               },
               orderService:{
                   osid:'',
                   osname:''
               }
                
            },
            methods:{
                query(){
                    var _this = this;
                    var json = {  //将对个对象封装成一个对象
                        this.order, 
                        this.orderService
                    }
                    //将对象数据转换为JSON串
                    var data = JSON.stringify(json);
                    
                    this.$http.post(
                    	"地址",
                        //发送JSON串数据
                        {"data":data}, 
                         //所以设置  emulateJSON:true 为表单格式
                        {emulateJSON:true}
                    ).then(result=>{
                        //返回值操作
                    });
                }
            }            
        });	
    </script>            
    </body>
</html>

后台代码：

需要依赖：用来解析JSON串转换为对象

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.7.4</version>
</dependency>

测试代码如下：

@RequestMapping("update")
public String update(@RequestParam("data") String data) throws IOException {
    //创建转换对象
    ObjectMapper objectMapper = new ObjectMapper();
    //data表示JSON串，emp.class 表示转换为的类  如果有多个对象要使用VO封装
    //VO.class
    Emp emp = objectMapper.readValue(data, Emp.class);
    empService.update(emp);
    return "1";
}

千魂！~

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Springboot和vue数据交互问题

一般使用前后台交互模式：使用json数据进行交互前台代码：<html> <head> <title></title> <script src="vue.js"></script> <script src="vue-resource.js"></...
复制链接

扫一扫