精华内容
下载资源
问答
  • 今天在写项目的时候,Vue data里面定义了一个对象A,对象A里面包含其他属性及一个对象B[] ,但是在往后端传数据的时候始终报412的错误,故此记录一个。 解决 既然是请求,以目前来说,肯定离不开HTTP协议 1、HTTP是...

    问题

    今天在写项目的时候,Vue data里面定义了一个对象A,对象A里面包含其他属性及一个对象B[] ,但是在往后端传数据的时候始终报412的错误,故此记录一个。

    解决

    既然是请求,以目前来说,肯定离不开HTTP协议

    1、HTTP是以ASCll编码的基于TCP/IP的应用层规范

    规范把HTTP分为状态行,请求头,消息主体,请求方法有OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT。Restful风格(Restful请求风格:url+请求方式),

    • GET:用于请求资源
    • POST:用于新建资源
    • PUT:用于更新资源
    • DELETE:用于删除资源
    而我们常用的是POST和GET

    2、POST和GET的区别

    • POST两个数据包;GET一个
    • POST将请求参数放在body里,参数没有大小限制,参数没有暴露;GET是以
      ?name=xxx&age=11 的形式拼接在url后面,参数有大小限制,参数暴露在外
    • 参数类型:POST无限制;GET只接受ASCll字符
    请求方式再往下,就是请求的数据格式

    3、常用的数据格式application/x-www-form-urlencoded和application/json

    • application/x-www-form-urlencoded是键值对的形式
    • application/json 是json字符串

    application/json数据放在body中,application/x-www-form-urlencoded都可以
    表单提交时,请求头设置为application/x-www-form-urlencoded,POST和GET的区别
    GET: 浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2…),然后把这个字串append到url后面,用?分割,加载这个新的url
    POST: 浏览器把form数据封装到http body中,然后发送到server
    springmvc对application/x-www-form-urlencoded和application/json的处理
    application/x-www-form-urlencoded:get 方式中queryString的值,和post方式中 body data的值都会被Servlet接受到并转化到Request.getParameter()参数集中,所以@RequestParam可以获取的到。
    application/json:必须用接受@RequestBody,因为GET请求没有body,所以无法接受,只能使用post

    4、Spring MVC常用的几种方式:

    普通GET:

     @GetMapping(value = "optprom/list")
     JsonResult optionalPromotionList(Term term) throws Exception {
            return null;
     }
    ``
    
    路径参数 @PathVariable:
    ```java
      @GetMapping(value = "optprom/{id}")
      JsonResult optionalPromotion(@PathVariable Long id) throws Exception {
            return null;
      }
    

    application/json @RequestBody:

      @PostMapping(value = "optprom/save")
      JsonResult optionalPromotionSave(@RequestBody OptionalPromotion optionalPromotion) throws 
               Exception {
           return null;
      }
    

    application/x-www-form-urlencoded @RequestParam

        @PostMapping(value = "message/wms")
        public JsonResult wmsmessage(@RequestParam Map<String,Object> params) throws Exception{
          return null;
       }
    

    参考大佬:JAVA 中Springmvc 请求 GET、 POST , application/x-www-form-urlencoded、application/json 区别与联系

    展开全文
  • 前端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', ...

    前端发送的数据:

    前端JS请求:

    1  //demo为JSON格式数据
    2  let para ={
    3      dataJ: JSON.stringfiy(demo);
    4  }
    5  //这一段是Vue封装的方法,本质就是一条url
    6  this.$http.post('${webRoot}/demo?list', para,{emulateJSON: true}); 

    后端Controller接收数据:

     1 @RequestMapping(params = "list")
     2 @ResponseBody
     3 public void treeList(String treedata , HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid){
     4 //      request.getParameterValues("treedata");
     5         JSONArray jsonArray = JSONArray.fromObject(treedata);
     6         for (Object o : jsonArray) {
     7             JSONObject jo = (JSONObject)o;
     8             System.out.println(jo.getString("parent"));
     9         }
    10 }

    =================分割线===========================

    反之

    后端Controller封装数据:

     1     @RequestMapping(params = "query")
     2     public void query(HttpServletRequest request) {
     3         //父级
     4         Map<String,Object> parentMap=new HashMap<String, Object>();
     5         parentMap.put("id", "001");
     6         parentMap.put("name", "王某");
     7         //子级
     8         Map<String,Object> childMap=new HashMap<String, Object>();
     9         childMap.put("id", "child001");
    10         childMap.put("name", "王孩子");
    11         //将子级Map封装成List
    12         List<Map<String,Object>> ChildMapList=new ArrayList<Map<String,Object>>();
    13         ChildMapList.add(childMap);
    14         //将子级MapList写进父级Map中
    15         parentMap.put("children", ChildMapList);
    16         //将父级Map封装成List
    17         List<Map<String,Object>> parentMapList=new ArrayList<Map<String,Object>>();
    18         parentMapList.add(parentMap);
    19         //将封装好的数据转换成Json
    20         JSONArray arr = JSONArray.fromObject(parentMapList);
    21         request.setAttribute("mapList", arr);
    22 
    23         request.setAttribute("mapList", arr);
    24         
    25     }

    前端页面el表达式接收 ${mapList}  后数据格式:

    ----------展开后:

     

    我是应用在树形菜单的,这一部分代码就不展示了。效果如下:

     

    转载于:https://www.cnblogs.com/ic710/p/11043486.html

    展开全文
  • 由于是学习阶段,在接收数据的时候,发现前端发送数据正常,后端服务器接收不到? 这是怎么回事呢?网上查了很多方法,最后发现 如果是 post方式提交需要在 SpringBoot项目中的Controller 接收参数的时候用@...

    由于是学习阶段,在接收数据的时候,发现前端发送数据正常,后端服务器接收不到?

    这是怎么回事呢?网上查了很多方法,最后发现  如果是 post方式提交需要在

     SpringBoot项目中的Controller 接收参数的时候用@RequestBody 注解一下就行了;get方式则不需要注解

    本文章分为前端、后端 两种解决方法,二选一  

    1.后端解决方法:

    简单说明一下:因为post方式提交的时候会包装成一个json字符串,而get方式传参时 直接追加到地址后面,因此 后台接收get请求不用@RequestBody 注解

    前端页面发送数据,添加一个名称。

     

    可以看出Content-Type是 application/json;charset=UTF-8

    axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据 

    但问题就麻烦在这:服务端要求的 'Content-Type': 'application/x-www-form-urlencoded'

    怎么解决呢,由于懒,直接改了Controller, 在接收数据这里 @ResquestBody注解一下

    因为@requestBody注解常用来处理content-type不是默认的application/x-www-form-urlcoded编码的内容,比如说:application/json或者是application/xml等。一般情况下来说常用其来处理application/json类型。

    2.前端解决方法:

    引入qs库,我采用的是cdn引入

        <script src="https://cdn.bootcss.com/qs/6.6.0/qs.min.js"></script>

    main.js 中

    import QS from 'qs'

    然后发送 axios 请求的时候:

     axios({
            method: "post",
            changeOrigin: "true",
            url: "/query/news",
            transformRequest: [
              function(data) {
                // 对 data 进行任意转换处理
                return Qs.stringify(data);
              }
            ],
            data: {
              name: this.channelNname,
              currentPage: this.currentPage
            }
          }).then(result => {
            // 注意 通过axios获取的数据,都在result.data中放着
            var result = result.data;
            console.log(result);
            })

    特别推进去这个文章看一下,前端的解决方法我就是在这里看到的,以前不想用qs,现在发现qs挺简单的

    https://blog.csdn.net/csdn_yudong/article/details/79668655

     

    因为涉及到跨域,每次请求都是两次,感觉很浪费,怎么解决呢? 百度上搜到一个简单的解决方案,设定一个超时时间

    具体如何解决,请参考我的另一篇文章:解决axios+SpringBoot跨域请求两次访问的问题

    展开全文
  • 后端接收json数据并转换成java对象 前段时间做java接收并转换json数据的时候,遇到一个坑,由于我是个小白解决了挺久,希望我的方法能帮到其他小白,我用的是servlet容器接收。 前端,我这里是用vue实现 图片: ...

    后端接收json数据并转换成java对象

    前段时间做java接收并转换json数据的时候,遇到一个坑,由于我是个小白解决了挺久,希望我的方法能帮到其他小白,我用的是servlet容器接收。

    前端,我这里是用vue实现
    图片: 在这里插入图片描述

    submit(){
    	let list=this.list;
    	/**
    	   list=[
    				{"name":"张三","studentid":"10001","a1":81,"a2":82,"a3":83,"a4":84,"a5":85,"a6":86},
    				{"name":"李四","studentid":"10002","a1":91,"a2":92,"a3":93,"a4":94,"a5":95,"a6":96}
    	   ]
    	**/
    	list=JSON.stringify(list);   //将JavaScript对象转换为JSON字符串
    	if(confirm("确认提交")){
    		axios.get('/EnData/score1', {     //接口路径
    		    params: {
    		    	operate:"input",
    		      	list:list
    		    }
    		})
    		.then(function (response) {
    		    console.log(response.data);
    		    alert("提交成功!");
    		})
    		.catch(function (error) {
    		    console.log(error);
    		});
        }else {
    		return true;
        }
    },
    

    后端,这里用的是servlet容器(注意:JSONObject我用的是阿里巴巴的fastjson包,可以去官网下载,但是JSONArray还是用那个就有点问题,所以我用的是json-lib-2.4-jdk15.jar以及它的依赖包,如果有其他更好的方法,可以互相学习一下)
    在这里插入图片描述

    在这里插入图片描述

    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.ArrayList;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.alibaba.fastjson.JSONObject;
    
    import bean.*;
    import connecttodao.*;
    import net.sf.json.JSONArray;
    
    /**
     * Servlet implementation class teacherlogin
     */
    @WebServlet(name="score1",urlPatterns="/score1")
    public class score1 extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public score1() {
            super();
            // TODO Auto-generated constructor stub
        }
    
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		response.setContentType("text/html;charset=utf-8"); 
        	response.setCharacterEncoding("utf-8"); 
        	request.setCharacterEncoding("utf-8"); 
        	PrintWriter out = response.getWriter();
        	String operate=request.getParameter("operate");
        	//数据输入
        	if(operate.equals("input")) {
        		String list=request.getParameter("list");
        		List<Score1> list2 = JSONObject.parseArray(list, Score1.class);  
        		JSONArray array = JSONArray.fromObject(list2);
    			for(int i=0;i<list2.size();i++) {
    				try {
    					Dao1 dao1=new Dao1();
    					dao1.InsertToMark1(list2.get(i), num);
    				} catch (Exception e) {
    					// TODO Auto-generated catch block
    					e.printStackTrace();
    				}
    				num++;
    			}
        		out.print(array);
        	}
        	
            out.flush();
            out.close();
    	}
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		
    	}
    
    }
    
    public class Score1 {
    	private String name;
    	private String studentid;
    	private int A1;
    	private int A2;
    	private int A3;
    	private int A4;
    	private int A5;
    	private int A6;
    	public String getName() {
    		return name;
    	}
    	public void setName(String name) {
    		this.name = name;
    	}
    	public String getStudentid() {
    		return studentid;
    	}
    	public void setStudentid(String studentid) {
    		this.studentid = studentid;
    	}
    	public int getA1() {
    		return A1;
    	}
    	public void setA1(int a1) {
    		A1 = a1;
    	}
    	public int getA2() {
    		return A2;
    	}
    	public void setA2(int a2) {
    		A2 = a2;
    	}
    	public int getA3() {
    		return A3;
    	}
    	public void setA3(int a3) {
    		A3 = a3;
    	}
    	public int getA4() {
    		return A4;
    	}
    	public void setA4(int a4) {
    		A4 = a4;
    	}
    	public int getA5() {
    		return A5;
    	}
    	public void setA5(int a5) {
    		A5 = a5;
    	}
    	public int getA6() {
    		return A6;
    	}
    	public void setA6(int a6) {
    		A6 = a6;
    	}
    	
    }
    
    
    public void InsertToMark1(Score1 score1,int num) throws Exception
    	{
    		PreparedStatement stmt;
    		String insertStr="INSERT INTO 17aa1701a VALUES(?,?,?,?,?,?,?,?);";
    		stmt =conn.prepareStatement(insertStr);
    		try
    		{                                  
    			stmt.setString(1,score1.getName());                    
    			stmt.setString(2,score1.getStudentid());    
    			stmt.setInt(3,score1.getA1());
    			stmt.setInt(4,score1.getA2());
    			stmt.setInt(5,score1.getA3());
    			stmt.setInt(6,score1.getA4());
    			stmt.setInt(7,score1.getA5());
    			stmt.setInt(8,score1.getA6());
    			
    			stmt.executeUpdate();   //rs=      
    		}catch (SQLException e)
    		{
    			e.printStackTrace();
    		}finally
    		{
    			try {
    				stmt.close();
    			} catch (SQLException e) {
    			}
    			try {
    				conn.close();
    			} catch (SQLException e) {
    			}    				
    		}
    	}
    
    public class DAO {
    	protected Connection conn = null;//数据库连接
    	public Connection getConn() {
    		try {
    			 String driverName="com.mysql.jdbc.Driver";
    			  String userName="root";
    			  String userPasswd="1234";     //数据库密码
    			  String dbName="endata";       //数据库名称
    			  String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd+"&useUnicode=true&characterEncoding=GBK";
    			  Class.forName("com.mysql.jdbc.Driver").newInstance();
    			   conn=DriverManager.getConnection(url);
    		} catch (Exception e) {
    			e.printStackTrace();
    		} 
    		return conn;
    	}
    }
    

    以上就是我用servlet接收并转换json数据的经验,如果有哪里讲的不对的,或者实现过程复杂化了,希望伙伴们能指出或给予建议。

    展开全文
  • 因为项目前后端分离,前端需要获取后端传过来的json数据,并显示到页面上,但因为页面的内容是在data()函数里动态生成,有些内容是后端的json没有的,所以在把json数组的数据添加进data()函数里的数组的时候动态的...
  • 现在我在vue前端用formdata上传图片,通过**http-request设置的接口uploadUserImage发送**,但是由于预设好的拦截器,只能发送**json数据**到go后端,请问是否有避开的方法 前端 ``` httpRequest(params){ ...
  • 由于是后端新建的一个controller,导致前端报404错误,但是后端接收数据成功,还能读取数据库,让我很郁闷! 因为前面写的代码都没问题,后来逐一排查,发现,是Controller注解的问题。 我以前的Controller用的都...
  • 这是一个简单的SPA,使用作为后端, 作为第一个前端, 作为第二个前端构建。 产品特点 Koa 2.5.1 使用异步/等待完全编写 考阿路由器 Koa-Ratelimit Koa-Bodyparser 科斯 JSON请求/响应的Koa-Json-Error Koa-...
  • 最近在学习Vue,期间遇到个问题就是前端页面使用axios调用接口将页面数据存储到数据库中时,使用POST请求时后端Debug不出前端的参数,导致前端触发调用后端接口时后端会一直报错,之前前端这样写的: (接口调用...
  • 后端controller查询到数据库数据的时间输出:(此时时间与数据库...springboot对于json方面的时间处理,是会按照GMT+0时区的时间进行处理,而当前系统时间的时区是GMT+8,所以前端接收后端时间数据时会出现时间差。...
  • 点击上方“蓝字”关注我们无论你是正在学习vue 还是在学习node, 你一定会碰到前端路由和后端路由这两个概念, 因为路由是实现页面之间的切换的一个重要途径。相信我,这篇文章一定能让你入门路由的概念。路由的概念...
  • 不使用Ajax或者vue前端也可以将对象数据送到后端1:前端提交字段数据(可以是from,也可以是get请求,只要能将字段数据发送到后端即可)。2:后端用对象接收数据,在此过程中,框架会自动将请求里的字段名与对象里...
  • 类似这么一张表单,第一行的产品名称和产品型号需要从后端去取数据,但又要把表中填的所有数据再反给后端接口,需要在el-from中怎么绑定值。假设代码是中比需抖接朋功要朋插这样子的第一部分为布遇新是直朋能到分览...
  • 解决 Vue+SpringBoot中axios发送post请求 控制台报错 404,后端接收数据! Controller使用:@RestController,就可以解决 新建的Controller用的注解是:@Controller 关于这俩具体的区别我自己的理解就是: @...
  • 我这里引用的是element UI框架,在这个...他相当于桥梁,(在参数处)接收前端vue数据,(通过url)找到后端Controller,后端再把查询出的结果返回回来,最后return返回给vue。 文件夹中存放的是js文件,每个js文件都是
  • 前端请求是这样的 后端接收是这样的       错误的前端请求是这样的 这种请求无法匹配后端的。  
  • 在一篇文章中,我们说了如果在后端接收POST请求(JSON类型和x-www-form-urlencoded类型),不过使用的是Postman来模拟前端发送请求的。这篇文章将展示使用在vue.js框架中如何发送请求。Axios 是一个基于 promise 的 ...
  • 最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414请求一直报错,显示 request URI too ...
  • 问题:最近在用elementui-templete时发现前端的form无法传送给后端后端显示的时候一直是{}的数据。 解决办法: 首先在调用后端api的article.js中添加 export function createArticle(form) { var qs = ...
  • 前端接受数据的初始化需要为 Array 类型,而不是 [ ] data(){ return { orderList:{ type:Array } } } 写成下面是接收不到数据的 data(){ return { orderList:[] } } 参考链接:https://segment...
  • 通过flask_sqlachemy 对sqlite数据库进行操作,并将得到的数据发送到前端vue,并由table 显示。 Sqlachemy数据库 配置 及创建 创建数据库python文件(DB.py) from flask import Flask from flask_sqlalchemy ...
  • 最近在做的以后后台管理的项目,采用前后端分离的方式进行开发,前端采用的是 vue-element-admin 版本,版本为4.2.1,后端服务使用的是springboot进行开发,接口数据交互遵循restful风格进行封装。在这里一定要说明...
  • 工作室项目里面需要实现登录校验,因为打算做的app,现在没学安卓,暂时用的vue做了个H5版的,所以用的...后端接收数据后核验,如果正确返回生成的token和用户的基本信息,否则返回401 前端接收token后存储在localstorag.
  • 刚开始使用vue对接后端接口时,PHP后端一直接受不到前端传的参数。找了很久,发现vue请求接口传参的形式是流的方式,因此后端要在接受数据的方面做一些改变。这里我用的是PHP原生方法file_get_contents。file_get_...
  • axios是vue项目中用来使用ajax技术来与后台交换数据的一个组件,在vue的作者推荐下,相当数量的vue前端开发人员开始使用它。但是在实际开发过程中,却时有出现后端接收不到前端post过来的数据的情况。以PHP语言开发...
  • vue.js向后端数据

    千次阅读 2019-04-12 16:28:12
    1.vue后端传json字符串,后端用String类型接收 前端请求: getTbjnTableData() { var me = this me.$axios({ url: '/zs/zhgl/getTbjnTableData', method: 'post', data: qs.stringify({ zhId: me....
  • 给大家分享一下在不使用第三方插件的情况下,完成前端Excel表格形式的数据导出,大致思路为后端使用excel工具类将数据封装成为文件流形式进行发送,前端使用bolb形式接收数据,并使用浏览器完成表格下载 1.后端 1.1...
  • 不使用Ajax或者vue前端也可以将对象数据送到后端1:前端提交字段数据(可以是from,也可以是get请求,只要能将字段数据发送到后端即可)。2:后端用对象接收数据,在此过程中,框架会自动将请求里的字段名与对象里...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 164
精华内容 65
关键字:

后端接收vue前端数据

vue 订阅