Vue-resource安装过程及使用方法解析

1、安装

npm install vue-resource --save

2、在main.js中添加

import VueResource from 'vue-resource'

//全局注册
Vue.use(VueResource)

3、vue-resource发送请求

　　a）对象参数，post请求

this.$http.post('http://127.0.0.1:8081/getUserByParam',
     {
      userName: this.username,
      sex:this.sex
     }).then((response) => {

      }）

　　b）get请求

this.$http.get('http://127.0.0.1:8081/getUserById',{
      params:{id:2}//注意，get请求一定要加params，post请求不需要
           }).then((response) =>{
      this.list=response.body
      console.log(this.list)
     });

　　c) json参数post请求，和对象参数post请求一样

this.$http.post('http://127.0.0.1:8081/getUserByJson',
     {
      "id":"11",
      "userName":"jie"
     }//注意，get请求一定要加params，post请求不需要
    ).then((response) =>{
     this.list=response.body
     console.log(this.list)
    })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）

    一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数

  • vue中使用v-for时为什么不能用index作为key

    结论: 更新DOM的时候会出现性能问题 会发生一些状态bug React 中的 key 也是如此 如果已经了解 为什么要用key,可以通过目录直接跳到下一节. 为什么要用key? Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设: 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构. 同一

  • vue实现表单未编辑或未保存离开弹窗提示功能

    说明 UI组件是使用 Quasar Framework. 最近做一个表单弹出框,表单保存提交,但是,产品提出,用户不保存,而关闭弹出框时,要给出一个弹窗提示.这个功能,可以用watch监听表单数据.当数据表单发生变化,用户点击了关闭按钮,则根据监听结果来判断用户输入或编辑了数据,进而出现弹窗提示,让用户选择是否离开:当数据没发生变化,则不必提示. 确认离开提示框 实现效果 先实现一个确认离开提示框,效果如下: 实现代码: <template> <div> <q-dialog

  • 简单了解Vue + ElementUI后台管理模板

    最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue-element-admin 官网介绍 vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现.它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产

  • vue开发移动端底部导航条功能

    效果图 src/app.vue <template> <div id="app" class="g-container"> <div class="g-header-container"> 头部导航 </div> <div class="g-view-container"> <div class="content"> 内容区域 <

  • Vue插件之滑动验证码用法详解

    本文实例讲述了Vue插件之滑动验证码用法.分享给大家供大家参考,具体如下: 目录 预览 基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录 安装 使用方法 更新记录 V1.1.2 版本 V1.1.1 描述(此版本有bug,请使用最新版) V1.1.0 版本新增属性`imgs`: 内置方法 props传参(均为可选) 自定义回调函数 注意事项 预览 基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录 目前仅前端实现,支持移动端滑动事件.版本V1.1.2 github

  • Vue-router 报错NavigationDuplicated的解决方法

    版本:3.1.x 报错原因: 使用push().replace()进行导航时,不能重复导航到当前路由. 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(err => err) } co

  • vue在线动态切换主题色方案

    主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件webpack/themePlugin.js const ThemeColorReplacer = require('webpack-theme-color-replacer') const forElementUI = require('webpack-theme-color-replacer/for

  • Vue-resource安装过程及使用方法解析

    1.安装 npm install vue-resource --save 2.在main.js中添加 import VueResource from 'vue-resource' //全局注册 Vue.use(VueResource) 3.vue-resource发送请求 a)对象参数,post请求 this.$http.post('http://127.0.0.1:8081/getUserByParam', { userName: this.username, sex:this.sex }).

  • Linux下redis5.0.5的安装过程与配置方法

    一. 下载redis 我一般去这里下载:redis下载地址 也可以自行去官网下载 提示:此处安装的为redis-5.05的版本 二.上传redis安装包(我的安装目录为/data/local/tool/redis-5.0.5) 1.创建目录/data/local/tool并进入该目录 mkdir -p /data/local/tool 2.上传下载好的压缩包 注:我用的xshell的配套工具xftp进行上传 三.安装redis 1.解压 在/data/local/tool目录下执行 [root@

  • vue中npm包全局安装和局部安装过程

    全局安装是将npm包安装在你的node安装目录下的node_modules文件夹中.在windows和mac中,全局安装的默认路径是不同的.在mac中默认是安装到 /usr/locla/lib 中.在windows默认安装目录是 C:\Program Files\nodejs ,当然你也可以通过一下命令来查看全局安装路径. // 查看全局安装路径 npm root -g // 查看npm的基础设置 npm config ls // 查看安装目录路径 npm config get prefix 全

  • 解析windows下使用命令的方式安装mysql5.7的方法

    解析windows下使用命令的方式安装mysql5.7的方法

    解压zip压缩包,创建my.ini文件内容如下 这里注意一下sql_mode 这里写的是让MySQL使用习惯类似Oracle,具体哪些什么意思大家很容易百度查到 [mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] sql_mode='NO_AUTO_VALUE_ON_ZERO,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO

  • 全面解析Windows下安装 mysql5.7的方法

    关于在windows下安装mysql 5.7 •要注意的新坑: 5.7版本安装后ROOT账号是有默认的密码的,这个密码在windows下可以在mysql.ini配置文件指定的data文件夹下面,那个为.err后缀名的文件里面找到. 2016-07-16T04:14:27.448186Z 1 [Note] A temporary password is generated for root@localhost: ?wxxx mysql的文件夹名字最好除掉,-, .这样的字符, 网上有其它安装帖子说

  • Vue项目中使用Vux的安装过程

    Vue项目中使用Vux的安装过程

    最近想用vue+vux写一个项目,于是到vux的官网看了文档开始着手搭建项目,但是遇到一些坑.下面简单说下安装vux 的过程. 默认已安装vue环境 1.安装vux npm install vux --save-dev 2.安装vux-loader npm install vux-loader --save-dev //官网没提安装这个,但是不安装会报错 3.安装less-loader以正确编译less源码 npm install less less-loader --save-dev 4.安装

  • Centos7.4服务器安装apache及安装过程出现的问题解决方法

    本文实例讲述了Centos7.4服务器安装apache及安装过程出现的问题解决方法.分享给大家供大家参考,具体如下: 一.安装httpd 1. 安装之前,先查看系统中是否存在已经安装了的httpd.rpm包,如果,没有就是没安装,有的话rpm -e 对应的rpm包名进行删除 #rpm -qa | grep httpd 2. 使用yum安装(自动安装依赖包),简单方便 #yum -y install httpd 3. 安装成功后,httpd-v 查看安装的apache版本,查找apache的配置文

  • vue的安装及element组件的安装方法

    一.新建vue项目 1.首先需要下载nodejs,安装后打开命令窗口可以使用npm包管理工具 npm集成在node中的,所以直接输入npm-v查看npm的版本信息 2.npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm. 3.在命令行中输入 npm install -g cnpm--registry=http://registry.npm.taobao.org然后等待安装完成,就可以使用cnpm安装依赖包了,这里说一下最好

  • 解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程

    一.问题具体描述: 在cmd控制台 pip install xxxx 后并显示安装成功后,并且尝试用cmd 的python 中import xxxx ,没有显示异常,说明这个库是安装成功了的.(这里以安装 virtualenv 为例:) 但是在PyCharm中导库时却出现了问题,会显示该模块不存在!!!(即在一个项目文件中,import一个未安装的第三方库文件,PyCharm会显示波浪线,即表示此库未安装.) 那怎么解呢?下面就来简单分析一下. 之前有问老师这个问题,老师说这是PyCharm这个

  • VisualStudio Community2019在安装的过程中无法进入安装界面的解决方法

    今天在安装VS2019的时候,在安装的过程中一直无法进入安装界面,在网上找了各种方法试了将近40分钟都没有找到有效的办法,不过就快放弃的时候,问题解决了,哈哈哈!!!! 1.下载地址:https://visualstudio.microsoft.com/zh-hans/thank-you-downloading-visual-studio/?sku=Community&rel=16(官网) 2.运行之后,读完进度条之后,就退出了,无法进入到安装界面.类似下面的截图,截图是网上找的,懒得自己在重新

随机推荐