原文地址:

http://www.cnblogs.com/JimmyBright/p/7356502.html

通常js里面都用ajax来和服务器交换数据,Vue里边当然也可以用ajax,ajax是基于jquery的扩展插件,Vue的架构已经摒弃了Jquery,为了用一下ajax,还去引用jquery,显得太笨重了,而且,也会显得比较low了。

Vue里边自然有Vue的方法去发送你的Post、Get请求。之前有一个基于Vue的插件Vue-resource,现在一般推荐axios了,Vue-resource已经不更新了。下面分别看下他们怎么用的。

Vue-resource:

控制台进入当前项目,允许 npm install Vue-resource

aindex文件写一些全局方法库,网络请求是使用频次非常多的方法,所以写到这个文件里

由于resource是Vue的插件,所以在开始的时候需要引用进来

import Vue from 'vue';
import VueResource from 'vue-resource'
Vue.use(VueResource);
主要Vue.use,通常Vue插件都要这样引用

其他文件需要post参数的时候只要调用service_jz这个方法就可以了。

在单页面.vue文件里,先导入这个方法

   import {service_jz} from "@/lib/utils/aindex";

调用的地方:

   var url='open/age';
service_jz(url,{idno:"34234134134134143"},function(result){
console.log('eee:'+JSON.stringify(result.data))
},function(error){
console.log(JSON.stringify(error))
})

axios:

axios使用方法和vue-resouce类似,axios是一个独立的代码库,不需要基于Vue,所以引用的时候更方便一些。

首先npm安装:npm install axios

然后在utils文件里是这样的。

在Vue文件导入:

import utils from "@/lib/utils";

         var url='open/age';
utils.service_jz(url,{idno:"34234134134134143"},function(result){
console.log('eee:'+JSON.stringify(result.data))
},function(error){
console.log(JSON.stringify(error))
})

Vue里边接口访问Post、Get的更多相关文章

  1. Vue解决接口访问跨域问题

    随手摘录 Vue解决接口访问跨域问题 1.打开 config -> index.js 2. 找到proxyTable 3.粘贴 如下代码,'https://www.baidu.com'换成要访问 ...

  2. 循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志

    在一个系统的权限管理模块中,一般都需要跟踪一些具体的日志,ABP框架的系统的日志管理,包括登录日志.接口访问日志.实体变化历史日志,本篇随笔介绍ABP框架中这些日志的管理和界面处理. 1.系统登录日志 ...

  3. seller【2】Mock数据(接口访问配置)

    Mock数据 在文件[vue.config.js] - devServer 字段 - before(app)函数配置数据接口访问 const appData = require('./data.jso ...

  4. 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象

    用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...

  5. 一个vue请求接口渲染页面的例子

    new Vue({ el:'#bodylist', data: { list: [ { "type_id": "1", "type_name" ...

  6. `Vue`中为什么访问不了以`$`和`_`开头的属性?

    Vue中为什么访问不了以$和_开头的属性? 背景:航班管家H5使用了Vue进行新版开发,预订流程逻辑copy参考了野鹅国际机票小程序,小程序中使用__开头的属性作为私有属性. 如题,在data中定义的 ...

  7. redis 限制接口访问频率

    代码: <?php /** * */ class myRedis { private static $redis = null; /** * @return null|Redis */ publ ...

  8. Odoo(OpenERP)开发实践:通过XML-RPC接口访问Odoo数据库

    Odoo(OpenERP)服务器支持通过XML-RPC接口访问.操作数据库,基于此可实现与其他系统的交互与集成. 本文是使用Java通过XMLRPC接口操作Odoo数据库的简单示例.本例引用的jar包 ...

  9. 通过ODBC接口访问人大金仓数据库

      国产化软件和国产化芯片的窘境一样,一方面市场已经存在性能优越的同类软件,成本很低,但小众的国产化软件不仅需要高价买入版权,并且软件开发维护成本高:另一方面,国产软件目前普遍难用,性能不稳定,Bug ...

随机推荐

  1. GodMode | Windows上帝模式

    最近在网上学习到了一些Windows的隐藏功能,今天我就来说说GodMode模式吧. 借鉴:https://jingyan.baidu.com/article/90bc8fc853c38bf65264 ...

  2. v-if、v-show 指令

    HTML部分: <div id="app"> <button type="button" @click="flag=!flag&qu ...

  3. codeforces 1133E K Balanced Teams

    题目链接:http://codeforces.com/contest/1133/problem/E 题目大意: 在n个人中找到k个队伍.每个队伍必须满足最大值减最小值不超过5.求满足条件k个队伍人数的 ...

  4. 搭建 Digital Ocean 服务器

    作为程序员,搭建属于自己的服务器可以部署自己的网站,可以配置代理***,了解国际前沿科技:一些高性能的服务器还可以完成一些云计算.深度学习模型的训练任务. DigitalOcean 服务启动 注册 D ...

  5. Annotation 使用备忘2

    title: Annotation 使用备忘 date: 2018-01-02 20:48:43 tags: [Annotation] categories: [Programming,Java] - ...

  6. NABCD(校园包车)

    广州商学院包车 N(need) 各个高校包车需求量大,然而校园内包车信息太散乱,售票地点不确定,有些老师.学生特别是新生,甚至不知有校园包车这一回事, 随着信息网络的发展,为了给师生带来校园更多的方便 ...

  7. c++中的函数重载

    函数多态也称为函数重载. (1)函数重载指的是可以有多个同名的函数,因此对名称进行了重载. (2)函数重载的关键在于函数的参数列表,也称为函数特征标.如果两个函数的参数数目和参数类型相同,同时参数的排 ...

  8. visual stdio2013软件安装及单元测试

    visual stdio2013软件安装及单元测试 一.visual stdio2013软件安装详解 今天,笔者为大家带来如何在Windows10下完美安装Visual Studio 2013专业版. ...

  9. 软工网络15团队作业8——Beta阶段敏捷冲刺(Day4)

    提供当天站立式会议照片一张 每个人的工作 1.讨论项目每个成员的昨天进展 赵铭: 在知晓云上建立数据表 吴慧婷:做了背单词界面并学习了词库界面的设计. 陈敏: 我的词库-全部词汇功能/新建词汇功能全部 ...

  10. WindowsXP开机就打开数字小键盘的几种方法

    很多人WindowsXP登陆界面输入密码时,都要使用数字键盘,可是很多时候下都会出现小键盘灯不亮情况,非要每次都按一 下才行,是不是很麻烦呢?下面就把全面的解决方法告诉大家. 用户名和密码时,不要输入 ...