Vue里边接口访问Post、Get
原文地址:
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的更多相关文章
- Vue解决接口访问跨域问题
随手摘录 Vue解决接口访问跨域问题 1.打开 config -> index.js 2. 找到proxyTable 3.粘贴 如下代码,'https://www.baidu.com'换成要访问 ...
- 循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志
在一个系统的权限管理模块中,一般都需要跟踪一些具体的日志,ABP框架的系统的日志管理,包括登录日志.接口访问日志.实体变化历史日志,本篇随笔介绍ABP框架中这些日志的管理和界面处理. 1.系统登录日志 ...
- seller【2】Mock数据(接口访问配置)
Mock数据 在文件[vue.config.js] - devServer 字段 - before(app)函数配置数据接口访问 const appData = require('./data.jso ...
- 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象
用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...
- 一个vue请求接口渲染页面的例子
new Vue({ el:'#bodylist', data: { list: [ { "type_id": "1", "type_name" ...
- `Vue`中为什么访问不了以`$`和`_`开头的属性?
Vue中为什么访问不了以$和_开头的属性? 背景:航班管家H5使用了Vue进行新版开发,预订流程逻辑copy参考了野鹅国际机票小程序,小程序中使用__开头的属性作为私有属性. 如题,在data中定义的 ...
- redis 限制接口访问频率
代码: <?php /** * */ class myRedis { private static $redis = null; /** * @return null|Redis */ publ ...
- Odoo(OpenERP)开发实践:通过XML-RPC接口访问Odoo数据库
Odoo(OpenERP)服务器支持通过XML-RPC接口访问.操作数据库,基于此可实现与其他系统的交互与集成. 本文是使用Java通过XMLRPC接口操作Odoo数据库的简单示例.本例引用的jar包 ...
- 通过ODBC接口访问人大金仓数据库
国产化软件和国产化芯片的窘境一样,一方面市场已经存在性能优越的同类软件,成本很低,但小众的国产化软件不仅需要高价买入版权,并且软件开发维护成本高:另一方面,国产软件目前普遍难用,性能不稳定,Bug ...
随机推荐
- GodMode | Windows上帝模式
最近在网上学习到了一些Windows的隐藏功能,今天我就来说说GodMode模式吧. 借鉴:https://jingyan.baidu.com/article/90bc8fc853c38bf65264 ...
- v-if、v-show 指令
HTML部分: <div id="app"> <button type="button" @click="flag=!flag&qu ...
- codeforces 1133E K Balanced Teams
题目链接:http://codeforces.com/contest/1133/problem/E 题目大意: 在n个人中找到k个队伍.每个队伍必须满足最大值减最小值不超过5.求满足条件k个队伍人数的 ...
- 搭建 Digital Ocean 服务器
作为程序员,搭建属于自己的服务器可以部署自己的网站,可以配置代理***,了解国际前沿科技:一些高性能的服务器还可以完成一些云计算.深度学习模型的训练任务. DigitalOcean 服务启动 注册 D ...
- Annotation 使用备忘2
title: Annotation 使用备忘 date: 2018-01-02 20:48:43 tags: [Annotation] categories: [Programming,Java] - ...
- NABCD(校园包车)
广州商学院包车 N(need) 各个高校包车需求量大,然而校园内包车信息太散乱,售票地点不确定,有些老师.学生特别是新生,甚至不知有校园包车这一回事, 随着信息网络的发展,为了给师生带来校园更多的方便 ...
- c++中的函数重载
函数多态也称为函数重载. (1)函数重载指的是可以有多个同名的函数,因此对名称进行了重载. (2)函数重载的关键在于函数的参数列表,也称为函数特征标.如果两个函数的参数数目和参数类型相同,同时参数的排 ...
- visual stdio2013软件安装及单元测试
visual stdio2013软件安装及单元测试 一.visual stdio2013软件安装详解 今天,笔者为大家带来如何在Windows10下完美安装Visual Studio 2013专业版. ...
- 软工网络15团队作业8——Beta阶段敏捷冲刺(Day4)
提供当天站立式会议照片一张 每个人的工作 1.讨论项目每个成员的昨天进展 赵铭: 在知晓云上建立数据表 吴慧婷:做了背单词界面并学习了词库界面的设计. 陈敏: 我的词库-全部词汇功能/新建词汇功能全部 ...
- WindowsXP开机就打开数字小键盘的几种方法
很多人WindowsXP登陆界面输入密码时,都要使用数字键盘,可是很多时候下都会出现小键盘灯不亮情况,非要每次都按一 下才行,是不是很麻烦呢?下面就把全面的解决方法告诉大家. 用户名和密码时,不要输入 ...