vue中的请求（前后台交互）

最新推荐文章于 2023-03-22 15:04:15 发布
最新推荐文章于 2023-03-22 15:04:15 发布
阅读量1.3k 收藏 4
点赞数 1
分类专栏： vue中的请求（前后台交互） Vue 文章标签： vue js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RememberQian/article/details/103871050
版权

1：请求依赖

​ 在vue中请求依赖于vue-resource.js

2：vue的get请求实例

<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:{
               list:[
                   {id:1,name="123"},
                   {id:2,name="123"}
               ]
            },
            methods:{
                add(){
                    this.$http.get('请求地址',参数).then(function (result){
                        console.log(result);
                    });
                }
            }            
        });	
    </script>            
    </body>
</html>

3：vue的post请求实例

<html>
	<head>
    	<title></title>
        <script src="vue.js"></script>
    </head>
<body>
  
    <div id="app">  
     
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
               list:[
                   {id:1,name="123"},
                   {id:2,name="123"}
               ]
            },
            methods:{
                add(){
                    //手动发起的post请求，默认没有表单格式，
                    //所以设置  emulateJSON:true 为表单格式
                    this.$http.post('请求地址',参数,{emulateJSON:true} ).then(
                        function (result){
                            console.log(result.boby);
                        });
                }
            }            
        });	
    </script>            
    </body>
</html>

4：初始化请求数据

<html>
	<head>
    	<title></title>
        <script src="vue.js"></script>
    </head>
<body>
  
    <div id="app">  
     
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
               list:[
                   {id:1,name="123"},
                   {id:2,name="123"}
               ]
            },
            created(){//在页面加载的时候的初始化方法
			  this.query();
			},
            methods:{
                query(){
                    //手动发起的post请求，默认没有表单格式，
                    //所以设置  emulateJSON:true 为表单格式
                    this.$http.post('请求地址',参数,{emulateJSON:true} ).then(
                        function (result){
                            console.log(result.boby);
                     });
                }
            }            
        });	
    </script>            
    </body>
</html>

5：vue中上传文件

<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:{
            },
            methods:{
                query(){
                    var upload = new FormData();
                    upload.append("upfile",文件对象);
                    upload.append("name",文件名称);
                    
                    this.$http.post('路径'，upload).then(function(result){
                        console.log(result);
                    });
                }
            }            
        });	
    </script>            
    </body>
</html>

6：以对象的形式传递参数

<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>
千魂！~
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue前后台数据交互vue-resource文档
12-09
Vue可以构建一个完全不依赖后端服务的应用，同时也可以与服务端进行数据交互来同步界面的动态更新。 Vue通过插件的形式实现了基于AJAX，JSPNP等技术的服务端通信。 vue-resource是一个通过XMLHttpRequrest或JSONP...
详解vue-Resource（与后端数据交互）
08-31
本篇文章主要介绍了vue-Resource（与后端数据交互），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 中前后端使用WebSocket
路虽远行则将至，事虽难做则必成。
12-10 2万+
WebSocket 是一种网络通信协议。RFC6455定义了它的通信标准。WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的http是一种无状态，无连接，单向的应用层协议，它采用了请求/响应模型，通信请求只能由客户端发起，服务端对请求做出应答处理。
Vue+WebSocket 实现页面实时刷新长连接
Harrietjia的博客
07-28 6174
&lt;template&gt; &lt;div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { data() { return { websock: null, } }, ...
VUE 前后台交互 （vue学习二）
li_rt4的专栏
11-28 1127
VUE前后台交互，我使用的是jquery的脚本，既然它能完成任务，就不再用其它脚本库了。另外在返回值时，就直接返回VUE的数据对象，不再重新构造参数，这样使用VUE才有意义。 接前一篇例子： 后台的方法： [HttpPost] //保存学生信息，实际原值返回 public JsonResult SaveStudentInfo(StudentManager.StudentModule stu) { var res = new JsonR...
vue（21）：前后端交互（获取后台数据）
weixin_41897680的博客
07-12 8670
接口调用方式 原生ajax 基于jQuery的ajax fetch axios Promise 概述 Promise时异步编程的一种解决方案，从语法上将，Promise是一个对象，从它可以获取异步操作的消息 优点： 可以避免多层异步调用嵌套问题（回调地狱） Promise对象提供了简介的API，使得异步操作更加容易 基本用法： 实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务 resolve和reject两个参数用于处理成功和失败两种情况，并通过then函数获取处理结果 格式
VUE进行前后端交互
young_man2的博客
03-22 7853
vue前后端访问
Django + Vue + HTTP实现后台管理项目
05-03
本PPT重在产出后端框架Django，前端框架Vue，交互协议HTTP，前后端交互流程这几个方面。其中以一个我已经设计好的项目为讲解路线，串联起web项目前后端分离开发思路，以及最主要的一点：数据交互。包括请求、响应、...
详解vue与后端数据交互(ajax)：vue-resource
08-31
本篇文章主要介绍了详解vue与后端数据交互(ajax)：vue-resource，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
前后端分离后台管理项目（springboot+mybatis+vue）
07-21
在前后端分离后台管理项目中，前端通常使用HTML、CSS和JavaScript等技术构建用户界面，并通过HTTP请求与后端进行数据交互。后端使用服务器端编程语言（如Java、Python、Node.js等）和数据库来处理数据，并提供API...
vue 项目使用（后台管理系统）
05-01
vue-cli 整个脚手架及每个模块的功能介绍
Vue前后端交互
淘小欣的博客
04-30 1万+
Vue前后端交互 文章目录Vue前后端交互引入：Vue前后端交互一、基于jQuery的ajax前后端交互模式前端后端二、使用fetch前后端交互fetch基本用法与请求参数fetch基本用法fetch请求参数fetch前后端交互前端后端三、前后端交互之axios前端后端参考资料 引入：Vue前后端交互 一般在项目中结合async/await语法使用axios调用接口 一、基于jQuery的ajax前后端交互模式 前端 <head> <meta charset="UTF-8">
Vue中前端与后端如何交互？
qq_42698326的博客
08-24 1万+
Vue中前后端交互Promise的基本使用基本使用多个请求，链式编程Promise的API---实例方法Promise的API---对象方法 Promise的基本使用 基本使用 new一个promise，为其传入一个函数作为参数，这个函数中传入两个参数，分别用来执行异步任务成功和失败的回调函数。 function query(){ var p=new Promise(function(resolve,reject){ setTimeout(function(){ var flag=true;
Vue+SpringBoot 前后台JSON 交互（亲测踩坑）
Java 璐到底
08-20 893
话不多说，直接上代码，前端VUE的请求方法 这样写在浏览器看到的参数可能有点奇怪 不要慌，服务端仍然可以接收 Springboot端代码有两种接收方式 1、通过@RequestBody接收json @RequestMapping(value = "/modifyInfo1", method = RequestMethod.POST) public String get(@RequestBody Map map) { String param1 ...
vue如何请求后端数据
热门推荐
friggly的博客
07-04 3万+
在vue中，我们如何通过请求接口来访问后端的数据呢？在这里简单总结了一个小示例： 主要问题：如果不封装的话，在每次请求的时候都要书写一遍下面的代码，造成代码冗余。
VUE.js前端向后端发送请求 以及页面路由跳转
CSDNwangyi的博客
10-21 3612
首先构造入参请求体，内容通常是一个json格式的，(jason:前后端数据交互格式之一，辨识度好，发送接收方便，花括号引起来，格式如下。随后直接拿到路径发请求咯,从后端接收的数据放到res里以便前端接着处理，这是常见的回调语法，发请求的同时拿到后端返回的信息。注意：！！！如果你是get请求，post换成get外，params还要加上{}，变成{params}。
Vue 利用axios请求后台数据
weixin_41987908的博客
11-06 3391
axios请求后台数据
vue 前后台数据交互
最新发布
12-09
Vue前后台数据交互可以使用vue-resource插件来实现。下面是一个简单的例子： 1.首先需要在项目中安装vue-resource插件： ```shell npm install vue-resource --save ``` 2.在main.js中引入vue-resource并注册： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值