精华内容
下载资源
问答
  • formdata格式传递参数 let formData = new FormData(); for(let key in this.ruleForm){ formData.append(key,this.ruleForm[key]); } axios({ method:"post", url:"", data:

    用formdata格式传递参数

    		  let formData = new FormData();
              for(let key in this.ruleForm){
                     formData.append(key,this.ruleForm[key]);
               }
               axios({
                   method:"post",
                    url:"",
                   data:{  
                   },
              **之前不加这一句的时候上传时formdata对象中没有东西,现在加了转化就可以获取到了**
                   transformRequest: [function (data) { var ret = ''; for (var it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], 
                   headers: {
                       "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
                   }
                 }).then(async (res)=>{
                    console.log(res.data)
                  
                 });
    

    初次写文章,只是希望下次遇到能参考一下

    展开全文
  • 不过,如果在日常使用中,如果我们不对这个类型的字段进行处理的话,在打印或者直接返回到页面的时候往往看到的格式是这样的 2020-11-11T22:12:03.793 。显然这种格式对于用户来说阅读体验很差,那么,今天我们将...

    背景

    使用过java8的朋友应该都知道LocalDateTime类型,它作为全新的日期和时间API ,对比Date类型有着很大的优势,极大的方便了我们对于时间和日期的操作。不过,如果在日常使用中,如果我们不对这个类型的字段进行处理的话,在打印或者直接返回到页面的时候往往看到的格式是这样的 2020-11-11T22:12:03.793 。显然这种格式对于用户来说阅读体验很差,那么,今天我们将通过这篇文章来介绍一下在使用LocalDateTime是如何在接受参数和返回信息时进行格式化。

    测试

    我们有如下类,供测试

    UserVO.java

    public class UserVO {     private String userName;    private String sex;    private LocalDateTime birthday;    //省略Getter and Setter方法 }

    1.接收参数时进行格式化

    post请求使用formdata进行传参,这种情况下只需要在变量上添加@DateTimeFormat注解,案例如下:

    public class UserVO {    private String userName;    private String sex;    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")    private LocalDateTime birthday;    //省略Getter and Setter方法}
    @PostMapping("/testLocalDateTime")public UserVO testLocalDateTime(UserVO userVO) {    System.out.println(userVO);    return userVO;}
    de5d7d136d862a7ce3460dd1f1717269.png

    调用之后可以看到控制台成功打印相关信息:

    686342815b42f25dda019d216ad0574e.png

    接口返回:

    2a7a4c9bbed29a005dc048b7bc8cf0f1.png

    使用post请求传参,并将参数放在请求体中,此时,需要在接口的实体类前添加@RequestBody注解,同时在LocalDateTime类型的变量上添加 @JsonFormat注解,案例如下:

    private String userName;private String sex;@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")private LocalDateTime birthday;//省略Getter and Setter方法
    @PostMapping("/testLocalDateTime2")public UserVO testLocalDateTime2(@RequestBody UserVO userVO) {    System.out.println(userVO.toString());    return userVO;}
    e4ddbc90728fb2a04c405e15270ee8c2.png

    调用之后一样可以看到控制台成功打印相关信息:

    3c23e9fcb195ba42cd2bc4fb6b60c731.png

    并且接口返回如下信息:

    fdeb119cc043f144a131c1983c2ddaf8.png

    这里我们可以注意到:这种情况下不需要添加额外配置,也会对返回值进行格式化

    补充

    如果项目中返回LocalDateTime类型字段过多的话一个一个去添加@JsonFormat显然是不合理的,那么我们可以在项目中添加如下配置,即可对所有LocalDateTime类型进行序列化和反序列化。

    LocalDateTimeConvertConfig.java

    此配置使用于第一种情况,通过formDate进行传参

    import lombok.extern.slf4j.Slf4j;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.core.convert.converter.Converter; import java.time.LocalDateTime;import java.time.format.DateTimeFormatter;  @Slf4j@Configurationpublic class LocalDateTimeConvertConfig {    @Bean    public Converter localDateTimeConvert() {        return new Converter() {            @Override            public LocalDateTime convert(String source) {                DateTimeFormatter df = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");                LocalDateTime dateTime = null;                try {                    //2020-01-01 00:00:00                    switch (source.length()) {                        case 10:                            log.debug("传过来的是日期格式:{}", source);                            source = source + " 00:00:00";                            break;                        case 13:                            log.debug("传过来的是日期 小时格式:{}", source);                            source = source + ":00:00";                            break;                        case 16:                            log.debug("传过来的是日期 小时:分钟格式:{}", source);                            source = source + ":00";                            break;                    }                    dateTime = LocalDateTime.parse(source, df);                } catch (Exception e) {                    log.error(e.getMessage(), e);                }                return dateTime;            }        };    }}LocalDateTimeSerializerConfig.java

    此配置使用于第二种情况,将请求参数放在requestbody中,可配合上一个文件使用

    import com.fasterxml.jackson.datatype.jsr310.deser.LocalDateTimeDeserializer;import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateTimeSerializer;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Value;import org.springframework.boot.autoconfigure.jackson.Jackson2ObjectMapperBuilderCustomizer;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration; import java.time.LocalDateTime;import java.time.format.DateTimeFormatter; @Slf4j@Configurationpublic class LocalDateTimeSerializerConfig {     @Value("${spring.jackson.date-format:yyyy-MM-dd HH:mm:ss}")    private String pattern;     // localDateTime 序列化器    @Bean    public LocalDateTimeSerializer localDateTimeSerializer() {        return new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(pattern));    }     // localDateTime 反序列化器    @Bean    public LocalDateTimeDeserializer localDateTimeDeserializer() {        return new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(pattern));    }     @Bean    public Jackson2ObjectMapperBuilderCustomizer jackson2ObjectMapperBuilderCustomizer() {//        return new Jackson2ObjectMapperBuilderCustomizer() {//            @Override//            public void customize(Jackson2ObjectMapperBuilder jacksonObjectMapperBuilder) {//                jacksonObjectMapperBuilder.featuresToDisable(SerializationFeature.FAIL_ON_EMPTY_BEANS);//                jacksonObjectMapperBuilder.serializerByType(LocalDateTime.class, localDateTimeSerializer());//                jacksonObjectMapperBuilder.deserializerByType(LocalDateTime.class, localDateTimeDeserializer());//            }//        };        //这种方式同上        return builder -> {            builder.serializerByType(LocalDateTime.class, localDateTimeSerializer());            builder.deserializerByType(LocalDateTime.class, localDateTimeDeserializer());            builder.simpleDateFormat(pattern);        };    }}

    总结

    今天这篇文章主要讲解了springboot中如何对LocalDateTime进行格式化,同时还提供了配置类来更加方便的全局格式化LocalDateTime格式。

    展开全文
  • HTTP有两种报文格式:请求报文:由客户端向服务器端发出的报文。响应报文:从服务端到客户端的报文。我们呢,一个一个来说一下,先说请求报文。先看一下大学期间比较熟悉的一张图请求报文:我们先从最右边开始看,...
    6d3ef8a110ad711a66e2eb20c89e6b82.png

    HTTP有两种报文格式:

    请求报文:由客户端向服务器端发出的报文。

    响应报文:从服务端到客户端的报文。

    我们呢,一个一个来说一下,先说请求报文。先看一下大学期间比较熟悉的一张图

    2eb1b40d0c4a43a7543ed79c5e4a7b0e.png
    c59777ac05794a57b547cc1389d68de3.png

    请求报文:

    我们先从最右边开始看,可以看出来,HTTTP请求报文由三部分构成,分别是:请求行、请求头、请求实体。当然,严格意义上来说,应该还包括空行。


    一.请求行:

    首先,为什么要用请求行?

    其实,请求航的存在其主要目的就是为了区分报文是请求报文还是响应报文,以及记录相应的URL以及协议版本。可以看出,请求行主要由三部分构成:方法、请求资源的URL、HTTP的版本。其中URL和版本无须多说,咱们主要说一下“方法”;

    HTTP请求的方法主要有:GET、POST、PUT、DELETE、OPTIONS、HEAD、TRANCE、CONNECT

    其中,最常用的是GET和POST请求,但是我们都来了解一下。

    1. GET:想特定的资源发出请求。
    2. POST:向指定的资源提交相应的数据金星焕处理请求,比如说提交表单、上传文件。数据被包含在请求实体中。
    3. PUT:从客户端向服务器传送的数据取代指定的文档的内容。
    4. DELETE:请求服务器删除指定的页面
    5. OPTIONS:允许客户端查看服务器的性能。
    6. HEAD:类似于get请求,只不过返回的响应中没有具体的内容,用于获取报头
    7. TRANS:回显服务器收到的请求,主要用于测试或诊断。
    8. CONNECT:HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

    我们重点来说一下GET和POST方法。

    1、GET请求,请求的数据会附在URL后面,已key=value(参数名=参数值)的形式传递,具体例子:http://localhost:8888/abc/login.jsp?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD,在这里有一点十分的重要:GET请求中的参数用“?”分割URL实体和传递参数,而参数之间用“&”进行分割。其中,如果传输的数据是英文字母或者数据,则原样发送;如果时空格,转换成“+”;如果是中文或者其他的字符,则直接把传输的数用BASE64加密,转换成十六进制输出,比如后面的%E4%BD%A0%E5%A5%BD就是16进制的输出。

    POST请求,则是把提交的数据放在HTTP请求实体中。

    2、GET请求最大长度是有限制的,可能有一种说法是GET请求传递参数的最大长度是1024KB,其实这种说法是不准确的。实际中,URL并不存在参数上限的限制,HTTP规范里面也并没有对URL的长度进行限制。而这个限制主要是来自浏览器和服务器。比如IE6.0浏览器所支持的最大长度的URL长度是2083KB,firefox 3.0.3浏览器所支持的最大长度是7764KB.

    POST请求传递的数据是没有大小限制的,HTTP规范中也没有对其进行相应的限制。只不过是处理器的处理能力限制了它。

    一般来说,GET请求传递的数据大小要小于POST传递数据的大小。

    3、POST的安全性要比GET请求的安全性要高一些。因为GET请求传递的参数是后缀在URL后面的,可以直接看到,所以安全性较POST请求安全性会差一些!

    我们来看一下具体请求报文示例:

    c7eddcfca07ab57308ca004026333971.png

    其中第一行就是请求行,上图中“GET”代表着请求的方法为GET请求,HTTP/1.1 代表这使用的HTTP协议的版本,中间代表着URL。


    二.请求头:

    1、请求头的作用:请求头是用来通知服务器有关客户端请求的一些信息。

    2:请求头的格式:请求头由关键字/值对构成,每行一对。关键字和值用英文冒号“:”隔开,值对之间用英文逗号

    展开全文
  • 为什么一定要使用formdata格式……很大原因是因为当时我犯蠢……前端肯定是JS了,具体不写了,使用Postman测试,后端语言是Java,框架Spring Boot,使用IntelliJ IDEA一、基本类型例:可以看到form-data只能传递键值...

    为什么一定要使用formdata格式……很大原因是因为当时我犯蠢……

    前端肯定是JS了,具体不写了,使用Postman测试,后端语言是Java,框架Spring Boot,使用IntelliJ IDEA

    一、基本类型

    例:

    可以看到form-data只能传递键值对形式。

    简单类型直接传递就可以了。

    二、对象类型

    Java代码:

    importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;classUser {

    String name;intage;publicString getName() {returnname;

    }public voidsetName(String name) {this.name =name;

    }public intgetAge() {returnage;

    }public void setAge(intage) {this.age =age;

    }

    }

    @RestController

    @RequestMapping(value={"/example"})public classExample {

    @RequestMapping(value={"/user"})public voidobjectType(User user) {return;

    }

    }

    前端数据:

    name: 'xiaoming'age:18

    三、复杂情况

    行吧……直接说我遇到的问题,接收一个对象和一个对象数组。

    同时接收两个参数时不可能的(至少我没发现),首先要建一个对象包含这两个参数。

    上代码…

    public classCLS1 {intid;public intgetId() {returnid;

    }public void setId(intid) {this.id =id;

    }

    }/***********************/

    public classCLS2 {

    String name;publicString getName() {returnname;

    }public voidsetName(String name) {this.name =name;

    }

    }/***********************/

    importjava.util.ArrayList;public classWrapper {

    CLS1 cls1;

    ArrayListcls2List;publicCLS1 getCls1() {returncls1;

    }public voidsetCls1(CLS1 cls1) {this.cls1 =cls1;

    }public ArrayListgetCls2List() {returncls2List;

    }public void setCls2List(ArrayListcls2List) {this.cls2List =cls2List;

    }

    }/***********************/

    importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;importjava.util.ArrayList;

    @RestController

    @RequestMapping(value={"/example"})public classExample {

    @RequestMapping(value={"/complex"})public voidcomplexType(Wrapper wrapper) {

    CLS1 cls1=wrapper.getCls1();

    ArrayList cls2s =wrapper.getCls2List();

    }

    }

    重点在于前端的数据格式:

    cls1.id: 233cls2List[0].name: 'hello'cls2List[1].name: 'world'

    四、前端格式化工具类

    前端手打肯定很麻烦,写了一个对象转formdata键值对的函数,自己试了下没什么问题,有没有bug就不知道了……

    functionobjToFd(obj, form, name) {

    const fd= form || newFormData()if (typeof obj !== 'object' || obj instanceofFile) {

    fd.append(name, obj)returnfd

    }

    const keyName= name ? name + '.' : ''

    for (const prop inobj) {//判断是自己的属性 且不为空

    if (prop != null && obj.hasOwnProperty(prop) && obj[prop] != null && obj[prop] !== '') {

    const val=obj[prop]if (val instanceofArray) {//如果是数组

    val.map((item, index) =>{

    objToFd(item, fd, keyName+ prop + '[' + index + ']')

    })

    }else{

    objToFd(val, fd, keyName+prop)

    }

    }

    }returnfd

    }

    测试:

    let data ={

    k1:"k1-v",

    k2:345,

    k3: {

    k31: [1, 2, { k313: 'k313-v'}],

    k32: {

    k321:'k321-v',

    k322:true,

    k323: ['con', 'ff']

    }

    },

    k4:'',

    k5: undefined,

    k6: ['m', 'd', 'z', 'z']

    }

    const fd=objToFd(data);for (varpair of fd.entries()) {

    console.log(pair[0] + ': ' + pair[1])

    }/******* 输出 *******/k1: k1-v

    k2:345k3.k31[0]: 1k3.k31[1]: 2k3.k31[2].k313: k313-v

    k3.k32.k321: k321-v

    k3.k32.k322:truek3.k32.k323[0]: con

    k3.k32.k323[1]: ff

    k6[0]: m

    k6[1]: d

    k6[2]: z

    k6[3]: z

    以上全是自己在网上查资料&瞎试出来了,不保证准确性。

    展开全文
  • formData其实就相当于是个表单,平常我们创建表单需要通过标签,而我们使用formData就可以直接创建一个表单,因为我们需求中还得有上传文件的操作,所以我们使用formData来给后台传递数据。我这边业务需求是点击保存...
  • contentType 常见的格式text/plain :纯文本格式application/json: JSON数据格式application/x-www-form-urlencoded 中默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的...
  • formData请求接口传递参数格式

    千次阅读 2019-10-04 20:14:19
    element ui组件方法的传递 //引入 组件。 <el-upload class="avatar-uploader" :action="action" :http-request="uploadFile" :show-file-list="false"> <img v-if="imageUrl" :sr...
  • 表单的 enctype 等于 ...FormData对象XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send(...
  • 转换formdata参数格式

    千次阅读 2018-07-30 15:23:07
    在formdata中传递复杂参数时,很头疼,期望是一个样子,结果到了后台又是另一个样子,介绍几个基本的formdata格式 传递一个普通的对象obj:{name:'testname',age:'testage'} 需要写成这个样子 ‘obj[name]’:'...
  • //要传递的数据类型: //【第一种】: var arr=[ {a:"1",b:"s",c:"6"}, {a:"1",b:"s",c:"6"}, {a:"1",b:"s",c:"6"} ...//正常直接 formData.append("name", val) 传递,后台接收: 第一种:"arr"...
  • 在formdata中传递复杂参数时,很头疼,期望是一个样子,结果到了后台又是另一个样子,介绍几个基本的formdata格式传递一个普通的对象obj:{name:'testname',age:'testage'}需要写成这个样子‘obj[name]’:'testname'...
  • 有时候需要给后端传递参数FormData(表单)格式(默认是json格式) // 在main.js中配置如下代码 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' axios.defaults....
  • 后台服务端代码如下: public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置接收的编码格式 request.setCharacterEncoding("UT
  • 请求参数 属性 类型 默认值 必填 说明 access_token string 是 接口调用凭证 media FormData 是 要检测的图片文件,格式支持PNG、JPEG、JPG、GIF,图片尺寸不超过 750px x 1334px 其实直接调用wx....
  • @Controller页面form表单请求时不会丢数据返回json数据时需要加注解@ResponseBody请求格式如下@ResponseBodypublic Object login(SignIn user)@RestController页面form表单请求时会丢数据返回json数据时不需要加注解...
  • vue 使用qs向后端传递表单FormData参数

    千次阅读 2019-12-02 23:54:35
    axois_qs 使用表单传参 在使用vue+elementUI搭建了登录页面之后,想和后端的Springboot...而前端内,最好选择表单字段,也就是applicaton/x-www-form-urlencoded格式,这种后端最好接收。 那么,如何使用? 引入a...
  • // json格式转为formData格式,因为某些接口的原因 function json2formData(jsonData) { var params = new URLSearchParams(); for(var key in jsonData){ //遍历json对象的每个key/val...
  • ajax有三种传递传递data的方式:json格式json字符串格式标准参数模式1.json格式形如:{“username”:”chen”,”nickname”:”alien”}$.ajax({type:"post",url:"/test/saveUser",data:{"username":"chen","nickname...
  • // 请求参数类型为FromData时候的headers的配置 let FromDataconfig = { headers: { 'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime() } } axios.post('/account/', data, From...
  • input 上传文件在前端通过ajax生成formData,在传递...而对于formData格式数据的接收,可以通过request()来实现,格式为: request()->file('file')。第一个file是file函数,第二个则是参数,formData传递过来的...
  • FormData

    2020-06-11 12:42:57
    Formdata 对象不能用于 get 请求,因为对象需要被传递到 send 方法中,而 get 请求方式的请求参数只能放在请求地址的后面。 服务器端 bodyParser 模块不能解析 formData 对象表单数据,我们需要使用 formidable 模块...
  • 在使用@PutMapping时,后端接收不到传递过来的参数。 查找解决方案: 1. HttpPutFormContentFilter 类 在网上搜索之后发现,有一个 HttpPutFormContentFilter 类,可以解决这个问题。类注释中有这么一段话: The ...
  • 请求对象一、客户端传参的几种方式1. 通过URL路径(path)传递,例如:http://127.0.0.1:8000/news/1/2,两个参数:id和page2. 通过 query string查询... 通过 body请求体 传递,又可根据传递的数据格式,分为: ...

空空如也

空空如也

1 2 3 4
收藏数 68
精华内容 27
关键字:

formdata格式传递参数