精华内容
下载资源
问答
  • java后端接收map参数vue前端传递

    千次阅读 2020-05-11 16:40:21
    1、vue前端 export default { name: 'downcardlist', data() { return { person_righttable: [], //已选择的人员 device_righttable: [], //已分配设备 weektimesList:[], } }, methods:{ downcardlist:...

    1、vue前端

    export default {
        name: 'downcardlist',
        data() {
            return {
                person_righttable: [], //已选择的人员
                device_righttable: [], //已分配设备
                weektimesList:[],
            }
        },
        methods:{
        downcardlist:function(downCardListVOList){
            let downCardListVOList={
                                "baseCustomerList":this.person_righttable,
                                "deviceList":this.device_righttable,
                                "weektimesList":this.weektimesList
                            }
                downCardList(JSON.stringify(downCardListVOList)).then(res=>{
                    console.log(res)
                })
            },
        }
    
    
    
    js:代码
    
    export function downCardList(downCardListVOList) {
      return request({
        url: '/door/cardlist/downCardList',
        headers: {
          'Content-Type': 'application/json'
      },
        method: 'post',
        data: downCardListVOList
      })
    }
    
    

    2、后端接收

    	@PostMapping("/downCardList")
    	public  R  downCardList(@RequestBody Map<String,List<Object>> downCardListVOList){
    		System.out.println(downCardListVOList.size());
    		downCardListVOList.forEach((k,v)->{
    			log.info("key:{}",k);
    			log.info("value:{}",v);
    		});
    		return  R.ok();
    	}
    
    展开全文
  • 分析问题 postman接口测试正常,说明服务端正常启动,能够将数据传入后端...所以大致确定是后端接收数据端问题。 接收数据出错,就可以定位在controller中出错。 这个POST接收方法是用bean接收,在接收形参前面没有加

    分析问题

    1. postman接口测试正常,说明服务端正常启动,能够将数据传入后端进行处理后返回token。
    2. 在前端的post表单提交的话,虽然能够返回值,但是是以未传入数据的情况返回的。

    解决过程

    1. 我分析是前端表单提交出错,因为postman能够正常提交数据。但是在网页发送请求后的请求体上面核对,数据的名称和value值都是正确的,所以数据正常发送后端。
    2. 所以大致确定是后端接收数据端问题。
    3. 接收数据出错,就可以定位在controller中出错。
      croller中的post处理方法
      这个POST接收方法是用bean接收,在接收形参前面没有加@RequestBody注解,那么就无法接收到前端发来的json表单数据。
      而postman能成功的原因是postman能够发送所有格式的数据来测试。

    说明

    在controller层中有多个需要注意的注解。

    1. 在处理方法上方的注解@PostMappin()或者GetMapping()等,这样能够让后端接收到前端的请求
    2. 在形参上面需要添加@ReuestBody或者有时候用@RequestParam来确定不同的内容格式数据(格式根据前端的数据来确定)。
    展开全文
  • 但是想让后端直接推送内容到前端很难,而socket就能帮助我们解决这个问题,使得后端可以主动向前端推送数据 1.python后端发送数据 socketio = SocketIO(app,async_mode ='eventlet',cors_allowed_origins='*') ...

            常见的前后端交互协议都是前端发送请求,后端响应请求。但是想让后端直接推送内容到前端很难,而socket就能帮助我们解决这个问题,使得后端可以主动向前端推送数据

    1.python后端发送数据

    socketio = SocketIO(app,async_mode ='eventlet',cors_allowed_origins='*')
    socketModel.init_socket(socketio)
    
    
    
    class SocketModel:
    
        def __init__(self):
            self.socketIO = None
        def init_socket(self,socketio):
            self.socketIO = socketio
    
        def send(self, data, json=False, namespace=None, room=None,
                 callback=None, include_self=True, skip_sid=None, **kwargs):
            if self.socketIO:
                self.socketIO.send(data, json=json, namespace=namespace, room=room,
                     callback=callback, include_self=include_self, skip_sid=skip_sid, **kwargs)
    
        def task(self,event, *args, **kwargs):
            self.socketIO.emit(event, *args, **kwargs)
        def emit(self, event, *args, **kwargs):
            if self.socketIO:
                self.socketIO.emit(event, *args, **kwargs)
    
    
    socketModel = SocketModel()
    
    
    socketModel.emit('webPhoneUpdate', body)
    socketModel.emit('webPhoneUpdateData', resultPhone)

     

    2.vue前端接收数据并存入vuex中

    main.js

    Vue.use(new VueSocketIO({
    
      debug: false,
    
      connection: 'http://localhost:5000',
    
      // cors_allowed_origins:'*',
      vuex: {       // 不需要用到vuex这个可以不加
    
        store,
    
        actionPrefix: 'SOCKET_',
    
        mutationPrefix: 'SOCKET_'
    
      }
    
    }))

    state.js

    const state = {
      phone_info : [],
      evidence_info : [],
      phone_imsi_info : [],
    }
    const mutations = {
      SOCKET_webPhoneUpdate: (state, data) => {
        state.phone_info.push(data);
        // state.phone_info.sort(state.phone_info.timestr)
        console.log('vuex get phone_info')
      },
      SOCKET_webEvidenceUpdate(state, data) {
        console.log('vuex get webEvidenceUpdate')
        state.evidence_info.push(data);
      },
      SOCKET_webPhoneUpdateData(state, data) {
        console.log('vuex get webPhoneUpdate')
        state.phone_imsi_info = data;
        console.log(state.phone_imsi_info)
      },
    }

     

    展开全文
  • 不给用 controller: @ApiOperation是swagg用的,与导出excel功能无关,可以忽略 前端: criteria是后端传过来的数据,具体是什么可以看文章开头PostMan的测试结果 exportExcel方法: 效果图: 想看headers有没有就在...

    唉,采坑记一路心酸...废话不多说直接上图上代码

    用的是阿里的com.alibaba.excel包,pom的依赖如下

    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>easyexcel</artifactId>
        <version>2.1.6</version>
    </dependency>

    涉及到前后端跨域问题看的是这篇大佬的博文 

    https://blog.csdn.net/a295277302/article/details/72943665?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase 

     

    先上在postMan中,原本的查询效果以及导出功能的查询效果

     

    前端的界面:

     在mapper层,导出的sql语句与原本的查询语句一致,只不过去掉了limit的分页条件sql语句,xml我就不截图了,可以看到导出的dao方法跟想导出的原查询功能除了方法名跟少了分页参数,其余一致。实体类一致

    service层做简单的调用dao接口,这里为了未来的可拓展和安全考虑,用的是对外的request实体类做的接收,平时自己做着玩的不需要多此一举,直接return dao层的接口就行了 

     

    接下来是具体处理业务逻辑层,我这里是个人习惯建了多一层命名为biz层

     登录用的是cookie,这一段是做cookie的一些操作,可以略过不看,与导出excel无关

    因为原本的查询结果里,有LocalDateTime的时间类型,直接BeanCopy到为导出excel创建的bean会报错无法解析这个类型,于是做了转化为String的操作。这里的xxxReportBean是专门为了导出excel而创建的bean,里面的属性名跟类型与原查询条件的实体类属性名一致,只是时间类型的字段换成了String类型。ExcelUtils这个方法类下面会放图

     

     

    ExcelUtils.createxxxxx....

    这里可以看到会给httpServletResponse增加headers,可以在前端浏览器的控制台里的网络那里,看到response会有我指的'filename'这一值,不过需要在处理跨域的工具配置类上加多一条,下面会放图,跨域处理的在开头的大佬博文连接有指导

    对应的为了导出excel的实体类Bean,加上@ExcelProperty,index从0开始,value是在excel表中显示的值

     

    跨域headers:

    如果不加的话可能前端到时拿不到headers,尽管在response那里能看见有filename,但是console.log是没有的...不给用

    controller:

    @ApiOperation是swagg用的,与导出excel功能无关,可以忽略

    前端:

    criteria是后端传过来的数据,具体是什么可以看文章开头PostMan的测试结果

     exportExcel方法:

     

     效果图:

    想看headers有没有就在前端代码console.log一下就知道了

    excel效果:

    展开全文
  • vue 前端传图片文件,后端接收

    千次阅读 2019-05-06 16:31:02
    vue端 1、在 main.js 文件中添加 const upload = axios.create({ //这里配置你自己的url baseURL: 'http://localhost:8096/reconciliation/', timeout: 50000, }); Vue.prototype.$upload = upload; 2、在...
  • 由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,后端数据就为null,所以在发送之前,需要使用qs模块对其进行处理。 他们的格式: Request Payload:...
  • 后端controller接收前端参数的方法 1. 使用对象接收的情况 Brand类 /** * 品牌 */ @Data @TableName("tb_brand") public class Brand { @TableId(type = IdType.AUTO) private Long id; private String name;...
  • 1.首先确定前端发送的是json对象还是json字符串 如果是json字符串的话 用@requsetbody方法接收 如果是json对象的话 用@RequestParam接收 解决方法: @RequestMapping( value = {"/load7"}, method = {Request...
  • vue前端与Django后端数据交互

    千次阅读 2021-02-22 16:56:49
    本文简单记录了vue前端与Django后端数据交互
  • 后端@RequestParam接收参数值的时候总是报错,required=false,放数据进来时发现果然是null。 认为理所应当的地方,代码没有问题,应该就是传值的时候出问题,传的也是json数据。最后查阅资料得知 @RequestParam...
  • 然后出现了一个难解的bug:前端emit的数据,后台on函数怎么也接收不到,无法触发on函数里的回调函数。 找bug找了三天,给我整抑郁了,一直觉得是自己的代码有问题,浏览器的F12调试找不出原因, 终端也没提示报错...
  • 后端接收前端List

    千次阅读 2019-11-16 19:02:55
    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。...前端, var user = {id:"1",name:"张三"}; var arr = new Array(); arr.push(user); var data = J...
  • 前端代码 <template> <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> </template> <script> export default { methods: { ...
  • 前端代码 async editResource(){ this.$refs.editFormRef.validate(async valid => { const _this = this if (!valid) return if(this.editForm.parentId === '') this.editForm.parentId = 0 //为什么这里打印的与...
  • Axios Post 请求后端接收不到数据

    万次阅读 2018-06-10 00:19:44
    最近做一个小项目,前端使用 axios 请求数据后端使用 node 写接口。调试时发现后端取不到请求的参数,解决时浪费了很多时间,这里贴出来解决方法。 前端请求,有两个地方需要注意。 首先是需要使用 ...
  • 前端传的对象及对象数组: 通过post请求传值给后端后端拿到数据通过JSON字符串转对象拿到要给到的对象和对象列表 这样就可以拿到前端传过来的多个对象和对象数组。
  • 一个Java后端Vue自学笔记

    万次阅读 2018-06-02 02:25:01
    Angular、React、Vue等js库的出现,彻底颠覆了后端开发对前端的认识。本人最近自学了一些Vue的皮毛,写下这篇博客不是为了哗众取宠,权当是为自己做一个Vue学习笔记。这篇博客主要记录了我学习Vue基础知识,完成一个...
  • 后端接受微信小程序前端请求中的数据数组,数据格式为aa,bb,有什么办法让接受的数据不是字符串而是一个数组(直接转换,不用split)?</p>
  • 首先需要在api中配置与后端一样的接口如我遍历的列表接口如下 //赛事列表接口 export const getVideoList = (token)=>...params是我设置的请求头,token是放入请求头的数据,如果后端不需要可以不加 2.在我们的页.
  • 今天在写项目的时候,Vue data里面定义了一个对象A,对象A里面包含其他属性及一个对象B[] ,但是在往后端传数据的时候始终报412的错误,故此记录一个。 解决 既然是请求,以目前来说,肯定离不开HTTP协议 1、HTTP是...
  • 前端要向后端传递一个对象集合和一个ID 前端:可以把id拼接到地址后面。 1.传递的参数 reqIssueVersionList:存放...后端接收参数: 使用@PathVariable接收路径上的ID 使用@RequestBody接收reqIssueVer...
  • vue前端传参和DRF后端接受参数vue前端传参和DRF后端接受参数vue前端传参和DRF后端接受参数
  • 基于element和vue的一个简单的后台管理页面基础模型(这里我用了php从数据库获取数据然后在JS区域接收了获取的数据。PS:不会用axios)直接附上所有代码:数据库:mywu 用户名:root 密码:root 数据表:testheader(...
  • 通过修改content-type,解决vue axios post...
  • int值包在对象里传到后端为null axios默认请求头是 Cont-Type:aapplication/json;charset=utf-8。当请求头为Content-Type: application/x-www-form-urlencoded 的时候,参数传对象并且对象里面有int值时就会出现传到...
  • 前端JSON数据传值到后端接收方式

    万次阅读 2019-06-18 09:32:00
    前端发送的数据前端JS请求: 1 //demo为JSON格式数据 2 let para ={ 3 dataJ: JSON.stringfiy(demo); 4 } 5 //这一段是Vue封装的方法,本质就是一条url 6 this.$http.post('${webRoot}/demo?list', ...
  • 这是后端的代码: 前端代码: 前端发送请求 后端收不到数据,打印null
  • java+vue element 小程序码后端生成和前端展示 介绍下应用场景接口介绍:java 后端注意前端 介绍下应用场景 技术框架:前端vue+element 后端为spring cloud,使用腾讯制码接口类型B,使用restTemplate作为请求框架...
  • 前端代码 <form id="te" class="form-horizontal" action="" method="post" enctype="multipart/form-data"> <div class="form-group"> <label class="control-label col-sm-3" for=""&g...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,074
精华内容 5,229
关键字:

后端接收vue前端数据

vue 订阅