精华内容
下载资源
问答
  • 后端接收vue前端数据
    千次阅读
    2022-03-21 16:32:58

    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();
    	}
    
    更多相关内容
  • Vue前端+Spring后端:前端传递数据后端后端如何正确接收

    我的问题:我遇到的问题是:Vue前端传递给后端的id的数组,后端没有办法接收,我的前后端代码如下:

    前端代码:

     后端代码:

     原因是:

    前后端的属性名不相互匹配,这样就接收不了

    解决方法是:

    将后端的ids变成和前端属性名相互匹配的属性名,如图所示:

     

    展开全文
  • this.updateForm在前端数据,到后台就没数据了,不清楚为什么传不过去,或者是后端接收不到
  • vue前端上传文件给后端的两种方式

    千次阅读 2022-05-27 14:12:29
    ,.jpg" > <a-button> 上传图片 </a-button> </a-upload> 第一种formDate /** * 发送post请求(特殊) * @param {string} url 地址 * @param {object} data 请求数据 * @param {Function} done 成功回调 * @param {...
        <a-upload
          v-model:file-list="fileList"
          :show-upload-list="false"
          :multiple="true"
          :before-upload="beforeUpload"
          :customRequest="selfUpload"
          accept=".png,.jpg"
        >
          <a-button> 上传图片 </a-button>
        </a-upload>
    

    第一种formDate

    /**
       * 发送post请求(特殊)
       * @param {string} url 地址
       * @param {object} data 请求数据
       * @param {Function} done 成功回调
       * @param {Function} fail 失败回调(可选)
       */
      postAdmin(Url, params, data, done, fail) {
        const url = params ? `${Url}?${convertParams(params)}` : Url;
        return axios
          .post(url, data)
          .then((data) => {
            return data.data
          }
          )
          .catch((error) => {
            console.log(error);
            console.log(fail);
          });
      },
    
     // 上传文件
        beforeUpload(file) {
          this.fileList = [...this.fileList, file];
          // return false;
        },
        selfUpload() {
          this.handleUpload();
        },
        async handleUpload() {
             if(this.fileList.length == 0) {
            this.$message.error('请上传文件')
            return false
          }
          const formData = new FormData();
          this.fileList.forEach((file) => {
            formData.append("files", file);
          });
          console.log(formData);
          const res = await this.$api.batchUploadDrillImage(
            { drillId: parseInt(sessionStorage.getItem("drillid")) },
            formData
          );
          this.$message.success(res);
          console.log(res);
        },
    

    第二种

    selfUpload({file}){
          const base64 = new Promise(resolve => {
            const fileReader = new FileReader()
            fileReader.readAsDataURL(file)
            fileReader.onload = () => {
              resolve(fileReader.result)
              this.imageUrl = fileReader.result
              this.UploadSmallPic(fileReader.result)
            }
          })
        },// 上传图片
        async UploadSmallPic(str){
          str = str.replace(/^data:image\/\w+;base64,/, "")
          const res = await this.$api.batchUploadDrillImage({
             drillId:parseInt(sessionStorage.getItem("drillid")),
              pic: str
          })
          console.log(res);
        },
        // 图片上传前限制
        beforeUpload(file) {
          const isJpgOrPng = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isJpgOrPng) {
            this.$message.error('您只能选择JPG的图片格式上传');
          }
          if (!isLt2M) {
            this.$message.error('图片必须小于2MB');
          }
          return isJpgOrPng&&isLt2M;
        },
    
    展开全文
  • GET 从后端获取数据到dataForm methods: { init () { this.visible = true this.$nextTick(() => { this.$refs['dataForm'].resetFields() Promise.all([ this.getTaskList() ]).then(() => { if ...

    GET 从后端获取数据到dataForm

    在这里插入图片描述

    methods: {
        init () {
          this.visible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].resetFields()
             Promise.all([
              this.getTaskList()
            ]).then(() => {
              if (this.dataForm.id) {
                this.getInfo()
              }
            })
          })
        },
    
        // 获取任务类别列表
        getTaskList () {
          // return this.$http.get('/sys/role/list').then(({ data: res }) => {
            return this.$http.get('/ground/taskClassify/list').then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            this.taskList = res.data
          }).catch(() => {})
        },
        // 获取信息
        getInfo () {
          this.$http.get('/taskDetails/taskdetails/' + this.dataForm.id).then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            this.dataForm = {
              ...this.dataForm,
              ...res.data
            }
          }).catch(() => {})
        },
    

    从后端接口获取数据保存到data地下定义的字段名里面

    export default {
      data () {
        return {
          visible: false,
          taskList: [],
          dataForm: {
            id: '',
            taskName: '',
            contest: '',
            classify: '',
            creator: '',
            createDate: '',
            updaterDate: '',
            updater: '',
          }
        }
      },
    

    在这里插入图片描述

    前端将表单获取到的数据提交给后端接口

    在这里插入图片描述

     // 表单提交
        dataFormSubmitHandle: debounce(function () {
          this.$refs['dataForm'].validate((valid) => {
            if (!valid) {
              return false
            }
            this.$http[!this.dataForm.id ? 'post' : 'put']('/taskDetails/taskdetails/', this.dataForm).then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg)
              }
              this.$message({
                message: this.$t('prompt.success'),
                type: 'success',
                duration: 500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            }).catch(() => {})
          })
        }, 1000, { 'leading': true, 'trailing': false })
      }
    }
    

    后端接收来之前端vue请求或者数据,通过接口接收

    • get请求
    @GetMapping("{id}")
        public Result<DutyPersonEntity> get(@PathVariable("id") Long id){
            DutyPersonEntity data = dutyPersonService.getBy(id);
            return new Result<DutyPersonEntity>().ok(data);
        }
    

    通过id获取数据,使用@PathVariable接收id作为路径参数

    • 提交数组数据
      使用@RequestBody 加接收实体类来接收,
      1、其中@RequestBody用来接收json字符串,在实体类里面定义一个字段类型为List<>或者List
      这里一般是在下拉框多选的情况下,返回的数据,下拉框对应的是数组,实体类对应的字段就可以设置为List<> (个人理解)
      2、在这里插入图片描述

    前端传一个数组或者集合后台怎么接受

    mybatis遍历集合List和数组Array

    展开全文
  • vue前端后端传递参数

    千次阅读 2021-07-05 20:09:48
    前端: export default { data () { return { name: "david", //要传递的值1 age: 20, //要传递的值2 } }, methods: { //在method里面定义一个向后端传递参数的方法,我这里使用的是async await方法向后端...
  • 前端请求后端需要传递数组,但是后端接收到的数据不是理想数据,把下标也映射为内容了(这里我也不是很懂,有了解的可以在评论区告诉我,谢谢) 我希望后端接收到的数据是这样的 将内容映射到地址上(有bug,内容太...
  • vue+springboot前后端分离项目,在项目添加管理员账户时,后端数据接收前端数据为null,导致添加失败。搜索资料说可能由于传入的参数与后端参数不匹配,查看前端给后端传的表单信息。前端写的首字母大写,后端是...
  • Vue前后端数据交互,Post请求,后端用对象接收数据 前端axios发送请求 封装 request.js import axios from 'axios' export function request(config) { const instance = axios.create({ //地址 baseURL: '...
  • 主要介绍了vue后端做Excel导出功能返回数据前端的处理操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue前端向Spring Boot后端发送数据,使用的是post或是put请求时,后端获取不到数据,显示为空 原因分析: axios默认post请求格式为json,但spring boot默认不使用json格式解析 解决方案: 1、后端处理 在...
  • 问题: 这是由于前后端的日期格式不符合,前端为String,后端为Date 可以直接为标签添加一个change事件, 通过moment插件将String格式的前端数据转换为moment格式, 然后使用 @JsonFormat(pattern = "yyyy-MM-dd", ...
  • vue 获取后端数据

    千次阅读 2022-07-15 15:29:53
    vue 获取后端接口数据 通俗易懂版
  • 后端掌握Vue知识

    千次阅读 2021-11-01 20:34:18
    Vue框架 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走,其中前端是绕不开的一门必修课。 1、简介 概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 与其它...
  • Vue前端如何与后端进行数据交互

    千次阅读 2021-03-03 11:03:15
    1、安装 npm install axios --save 2、在main.js文件引入 import Axios from 'axios';//后台交互 Vue.prototype.$http=Axios //defaults 设置全局默认路径 ... // console.log('这是返回的客户数据')
  • Springboot +Vue3 后端接收前端传值查询并将结果以List返回
  • 由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,后端数据就为null,所以在发送之前,需要使用qs模块对其进行处理。 他们的格式: Request Payload:...
  • vue如何请求后端数据

    千次阅读 2022-06-30 08:17:53
    vue中,我们如何通过请求接口来访问后端数据呢?在这里简单总结了一个小示例: 主要问题:如果不封装的话,在每次请求的时候都要书写一遍下面的代码,造成代码冗余。
  • 后端接收前端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> <el-upload ref="uploadv" class="upload-demo" action="a" :on-change="handleChange" :file-list="videolist" :http-request="uploadFile" :auto-upload="false" > &
  • //页码选择提交数据 export function load(params) { return request({ url: '/api/load', method: 'post', params: params }) } 后端 @PostMapping("/load") public List pageAndSizeLoad(@RequestParam String ...
  • 参考一 参考二 参考二 一、直接使用 1.1、安装依赖 cnpm i axios -S 或 cnpm install axios --save 1.2、全局注册 1.3、使用 1.3.1、发送get请求 后端使用@RequestParam接收数据方式 1、后端 前端 或者 后端使用@...
  • vue前端与Django后端数据交互

    千次阅读 2021-02-22 16:56:49
    本文简单记录了vue前端与Django后端数据交互
  • 前端map传给后端接收

    千次阅读 2022-01-10 22:28:09
    前端let map = new Map(); map.set(1, 1); map.set(2, 2); map.set(3, 3); //map转obj let obj= Object.create(null); for (let[k,v] of map) { obj[k] = v; } $.ajax({ url:"", type:"POST", dataType:'json', ...
  • 运行的时候后端一直接收不到前端数据,不清楚哪里出现了问题,求解答,谢谢
  • 问题遇到的现象和发生背景 环境:前端 vue框架 后端springboot 前端多选框组件向后代传输数据,报错如下: 前端报错: 后端警告: WARN 57556 --- [nio-9000-exec-6] .w.s.m.s.DefaultHandlerExceptionResolver : ...
  • 前端拿到数据了但不能显示,控制台输出也正常,但再次调用时没数据
  • vue axios传参,后台收到为NULL的解决方案

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,628
精华内容 7,851
关键字:

后端接收vue前端数据