vue框架与后台之间的http交互

最新推荐文章于 2024-08-11 18:51:05 发布
最新推荐文章于 2024-08-11 18:51:05 发布
阅读量2k 收藏 2
点赞数
分类专栏： 前端常见问题 文章标签： 前端

1. 引入vue.js, vue-resource.js;

2.这就可以开始交互了。

注意：一定要运行在服务器里面，否则输出的是php代码，而非返回值。

有三种交互方式：get、post、jsonp

get：会将请求的参数附在最后

post：不会显示在url中

get、post用来请求某个php文件的参数。

jsonp：JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。其核心思想是利用JS标签里面的跨域特性进行跨域数据访问，在JS标签里面存在的是一个跨域的URL，实际执行的时候通过这个URL获得一段字符串，这段返回的字符串必须是一个合法的JS调用，通过EVAL这个字符串来完成对获得的数据的处理。

定义a.txt

内容是：Hello world!

1）get:

php接口：

 

 

  1. <?php

  2. $a=$_GET['a'];

  3. $b=$_GET['b'];

  4. echo $a+$b;

  5. ?>

 

vue：

 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>Ajax-get</title>

  6. <script src="vue.js"></script>

  7. <script src="vue-resource.js"></script>

  8. </head>

  9. <body>

  10. <div id="app">

  11. a= <input type="text" id="t1" v-model="t1">

  12. b= <input type="text" id="t2" v-model="t2">

  13. a+b=<span class="a">{{msg}}</span>

  14. <input type="button" value="submit" @click="get()">

  15. </div>

  16.  

  17. <script>

  18. new Vue({

  19. el:'body',

  20. data:{

  21. t1:'',

  22. t2:'',

  23. msg:''

  24. },

  25. methods:{

  26. get:function(){

  27. this.$http.get('get.php',{

  28. a:this.t1,

  29. b:this.t2

  30. }).then(function(res){

  31. this.msg=res.data;

  32. },function(res){

  33. alert(res.status);

  34. });

  35. }

  36. }

  37. });

  38. </script>

  39. </body>

  40. </html>

 

 

 

 

2)  post:

php接口：

 

  1. <?php

  2. $a=$_POST['a'];

  3. $b=$_POST['b'];

  4. echo $a-$b;

  5. ?>

 

vue：

 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>Ajax-post</title>

  6. <script src="vue.js"></script>

  7. <script src="vue-resource.js"></script>

  8. </head>

  9. <body>

  10. <div id="app">

  11. a= <input type="text" id="t1" v-model="t1">

  12. b=<input type="text" id="t2" v-model="t2">

  13. a-b=<span class="a">{{msg}}</span>

  14. <input type="button" value="submit" @click="post()">

  15. </div>

  16.  

  17. <script>

  18. new Vue({

  19. el:'body',

  20. data:{

  21. t1:'',

  22. t2:'',

  23. msg:''

  24. },

  25. methods:{

  26. post:function(){

  27. this.$http.post('post.php',{

  28. a:this.t1,

  29. b:this.t2

  30. },{

  31. emulateJSON:true

  32. }).then(function(res){

  33. this.msg=res.data;

  34. },function(res){

  35. alert(res.status);

  36. });

  37. }

  38. }

  39. });

  40. </script>

  41. </body>

  42. </html>

 

 

 

 

3)  JOSNP:

 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>Ajax</title>

  6. <script src="vue.js"></script>

  7. <script src="vue-resource.js"></script>

  8. </head>

  9. <body>

  10. <div id="app">

  11. <input type="text" id="t1" v-model="t1">

  12. <p class="a">{{msg1}}</p>

  13. <input type="button" value="submit" @click="get()">

  14. </div>

  15. <script>

  16. new Vue ({

  17. el:'#app',

  18. data:{

  19. t1:'',

  20. msg1:''

  21. },

  22. methods:{

  23. get:function(){

  24. this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{

  25. wd:this.t1

  26. },{

  27. jsonp:'cb' //callback名字，默认名字就是"callback"

  28. }).then(function(res){

  29. this.msg1=res.data.s;

  30. },function(res){

  31. alert(res.status);

  32. });

  33. }

  34. }

  35. });

  36.  

  37. </script>

  38. </body>

  39. </html>

 

 

最传统的写法：

 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>Ajax</title>

  6. <script src="vue.js"></script>

  7. <script src="vue-resource.js"></script>

  8. </head>

  9. <body>

  10. <div id="app">

  11. <input type="text" id="t1" v-model="t1">

  12. <p class="a">{{msg1}}</p>

  13. <input type="button" value="submit" @click="get()">

  14. </div>

  15. <script>

  16. new Vue ({

  17. el:'#app',

  18. data:{

  19. t1:'a',

  20. msg1:'b'

  21. },

  22. methods:{

  23. get:function(){

  24. this.$http({

  25. url:'post.php'

  26. data:给后台提交数据,

  27. method:'get'//也可以是/post/jsonp

  28. //如果是jsonp，那么还要加一行：jsonp:'cb' //cbName

  29. }).then(function(res){

  30. this.msg1=res.data.s;

  31. },function(res){

  32. alert(res.status);

  33. });

  34. }

  35. }

  36. });

  37.  

  38. </script>

  39. </body>

  40. </html>

gloria_chenjing
关注
专栏目录
Vue与后台通信的两种方式
小小默：进无止境
11-16 1121
【1】vue-resource Vue的一个插件，非官方库，多用于Vue1.X。详细介绍点击查看在线文档 下载vue-resource npm install vue-resource --save 引入vue-resource // 引入模块 import VueResource from 'vue-resource' main.js中声明使用 Vue.user(VueResource ) 内部会给VM对象和组件对象添加一个属性：$http The http service can be used
Vue框架部署、项目构建与后端交互详解
2301_78150212的博客
12-30 1463
在Vue项目中，通过安装Vue Router并进行简单配置，可以实现路由的跳转和管理。本文将详细介绍如何部署Vue框架，进行项目构建，并深入讨论前后端交互的方法。文件），将模板、脚本和样式组合在一个文件中，使得代码更加模块化和可维护。Vue CLI是Vue.js的官方脚手架工具，用于快速搭建Vue项目。在开发中，前端通常运行在不同的端口或域名下，需要处理跨域。Vue项目的目录结构是一个关键因素，有助于代码的组织和维护。文件），其中包含了模板、脚本和样式，使得组件的代码更加模块化和可维护。
Vue前后台交互
翎羽飘的小分享
07-11 9253
一直在文档什么的看到的都是静态页面的制作，终于搞明白怎么做交互了。 1. 引入vue.js, vue-resource.js; 2.这就可以开始交互了。 注意：一定要运行在服务器里面，否则输出的是php代码，而非返回值。 有三种交互方式：get、post、jsonp get：会将请求的参数附在最后 post：不会显示在url中 get、post用来请求某个php文件的参数。 jso
Vue 2 搭建后台管理系统 - 全面指南
最新发布
qq_42072014的博客
08-11 1351
通过本文，你已经了解了如何使用 Vue 2 和 Element UI 快速搭建一个后台管理系统的基本流程。当然，实际项目中可能还会遇到更多复杂的需求和技术挑战，但本文提供的基础架构足以作为一个良好的起点。
VUE基础学习笔记——04前后端交互
ZJia_X的博客
10-09 2124
一、URL 地址格式 1、传统形式的 URL 格式：schema://host:port/path?query#fragment (1) schema：协议（http、https、ftp等） (2) host：域名或IP地址 (3) port：端口，http 默认端口80，可以省略 (4) path：路径 (5) query：查询参数。例如 uname=lisi&age=12 (6) fragment：锚点（哈希Hash）用于定位页面的某个位置 2、Restful 形式的 URL HTTP请
初识 vue —— 最简单的前后端交互示例
weixin_30384031的博客
10-11 1万+
一、初识 vue 时的困惑 最近想学一门前端技术防身，看到博客园中写 vue 的多，那就 vue 吧。都说 vue 的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼？还是让人一头雾水嘛。而且我一开始也没有搞清楚 vue...
Vue - 与后端交互
wuzeipero的博客
12-16 4578
Vue - 与后端交互零：与后端交互 - ajax版本1 - 出现了跨域问题版本2 - 解决了跨域问题版本3 - 后端读取json文件传到前端一：fetch1.简介2.实例二：Axios1.简介2.实例三：计算属性1.通过计算属性实现名字首字母大写2.通过计算属性重写过滤案例四：虚拟DOM 与diff算法 key的作用1.Vue2.0 v-for 中 :key 有什么用呢？2.虚拟DOM的diff算法3.具体实现思考：什么是跨域问题？如何解决？ 零：与后端交互 - ajax 版本1 - 出现了跨域问题 前端
vue.js与后台数据交互的实例讲解
10-18
vue-resource是一个用于处理HTTP请求的插件，它允许Vue实例通过HTTP与服务器进行通信，包括GET、POST、PUT等操作。在示例中，可以看到以下引入语句： ```html <script src="../js/common/vue.min.js"> ...
基于Vue框架的后台管理模板
01-17
【Vue后台管理模板】是一种基于Vue.js框架的高效开发解决方案，专为开发者、设计师和产品经理设计，用于构建功能丰富的后台管理系统。Vue.js是Google维护的一个轻量级、高性能的前端JavaScript框架，它以其易学易用...
springboot+vue管理后台框架
04-13
标题 "springboot+vue管理后台框架" 涉及到的技术栈是Spring Boot与Vue.js，这是一种常见的前后端分离架构的实现方式。Spring Boot作为后端框架，提供数据处理、业务逻辑以及API接口，而Vue.js则作为前端框架，负责...
一款开箱即用的 Vue 中后台管理系统框架，兼容PC、移动端
05-20
4. **API请求封装**：为了方便与后端接口交互，框架通常会封装axios或fetch等HTTP库，提供统一的API调用方式，便于数据的获取和发送。 5. **权限控制**：对于后台管理系统，权限控制是非常重要的一环。框架可能内置...
详解vue与后端数据交互(ajax)：vue-resource
08-31
本篇文章主要介绍了详解vue与后端数据交互(ajax)：vue-resource，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
详解vue前后台数据交互vue-resource文档
12-09
这两天学习了vue-resource插件个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 Vue可以构建一个完全不依赖后端服务的应用，同时也可以与服务端进行数据交互来同步界面的动态更新。 Vue通过插件的形式实现了基于AJAX，JSPNP等技术的服务端通信。 vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件 提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和VUe组件实例方法。 使用的版本是：vue-resource 0.7.2 配置 参数配置 分为： 全局配置 组件实例配
vue后台框架
09-30
vue后台框架，是一个后台集成解决方案，它基于 vue 和 element。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
Vue管理后台框架
04-17
封装Vue+Element实现一套后台管理框架，实现快速构建和开发
vue搭建的简单后台框架
08-27
vue-cli2.5搭建的一个简单的后台管理系统，有登陆、退出，使用了插件elment、echart..一个简单的应用，可供初学者学习使用,运行前先安装依赖cnpm install
深入浅出学Vue(五) | Vue与后端进行交互
热门推荐
super1223的博客
07-09 1万+
目录PromiseaxiosAxios语法格式Axios过滤器async-await用法Vue与后端交互案例 Promise ajax作为一种运用广泛异步请求方式，在特殊的业务逻辑时会出现某种问题。比如：ajax成功回调后调用另外一个ajax，这样的ajax将会让逻辑十分复杂和混乱，而且一步出错，步步出错。 而Promise则用另一种语法方式则可以解决这种ajax的嵌套问题。 并且Promise对象提供了简洁的API 用法简单 使用方法： 1.then 异步调用正确时返回 2.catch 获取异
Vue前后端交互
PengK_aha的博客
12-12 3673
Vue前后端交互
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值