文档章节

Vue路由vue-resource框架

SingularD
 SingularD
发布于 2017/08/11 14:32
字数 319
阅读 33
收藏 0

今天接触到了两个路由的框架一个是vue-resource还有一个axios,我都会分别介绍:

vue-resource框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
  <div id="app">
    <h1>vue-resource插件</h1>
    <a href="javascript:;" v-on:click="get">get请求</a>
    <a href="javascript:;" v-on:click="post">post请求</a>
  </div>
</body>
<script>
  new Vue ({
    el: "#app",
    data: {
      msg: ''
    },
    methods: {
      get: function () {
        this.$http.get("package.json",{
          params: {
            userId: "101"
          },
          headers: {
            token: "singular"
          }
        }).then(res=>{
          this.msg = res.data;
        })
      },
      post: function () {
        this.$http.post("package.json",{
          params: {
            userId: "102"
          },
          headers: {
            access_token: "singularpoint"
          }
        }).then(res=>{
          this.msg = res.data;
        })
      }
    }
  })
</script>
</html>

在这里面:首先通过npm install vue-resource安装;

之后再将vue-resource.js文件引入:

对于get请求:

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

post请求:

this.$http.post('/someUrl', [options]).then(successCallback, errorCallback);

在vue-resource里面get的用法是:

this.$http.get('/someUrl', [options]).then(function(response){
    // 响应成功回调
}, function(response){
    // 响应错误回调
});

而在ES6中function(response){}可以写成:res=>{}

post同理;

在页面中点击按钮只有就会收到(get请求):

在header中general:

  1. Request URL:

    http://localhost:63342/fullstack/package.json?userId=101

  2. Request Method:

    GET

  3. Status Code:

    200 OK

  4. Remote Address:

    127.0.0.1:63342

  5. Referrer Policy:

    no-referrer-when-downgrade

说明已经接受到了get请求;

点击post请求:

在header中general:

  1. Request URL:

    http://localhost:63342/fullstack/package.json

  2. Request Method:

    POST

  3. Status Code:

    200 OK

  4. Remote Address:

    127.0.0.1:63342

  5. Referrer Policy:

    no-referrer-when-downgrade

说明接受到了post请求;

 

© 著作权归作者所有

上一篇: Vue路由axios框架
下一篇: Vue的路由(三)
SingularD
粉丝 2
博文 17
码字总数 6512
作品 0
成都
程序员
私信 提问
Vue实现前后端分离项目的初体验

Vue实现前后端分离项目的初体验 经过之前学习的Vue的知识: vue基本指令 vue组件 vue-resource vue路由 其实我们已经可以开始实战运用到实际的Web项目中了,由于本人是Java后端开发的,所以后...

TyCoding
2018/09/01
0
0
前端与移动开发之vue-day6(4)

App.vue 组件的基本设置 头部的固定导航栏使用 Mint-UI 的 Header 组件; 底部的页签使用 mui 的 tabbar; 购物车的图标,使用 icons-extra 中的 mui-icon-extra mui-icon-extra-cart,同时,...

czbkzmj
2018/11/21
0
0
Vue中路由管理器Vue Router使用方式(二)-推荐

一、Vue中使用Vue Router简单方式使用 vue add xxx命令添加插件 使用步骤,本人假设已经安装好了Vue CLI工具,了解更多参考:VSCode 搭建Vue开发环境之Vue CLI 1.创建项目 创建过程比较慢,需...

tianma3798
2018/10/17
0
0
Vue.js 新手入门教程之环境搭建(一)

本文相关引用来自Vue官网 https://cn.vuejs.org/ 作为一个Java后端程序员觉得有必要了解一下当前流行的Vue框架(PS:公司目前后台管理系统前端用的是老掉牙的easyui~囧),是时候更新换代了。...

青小城
2018/10/19
0
0
Vue中路由管理器Vue Router使用介绍(三)

一、路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 在js中使用: 二、路由链接使用 1.使用router-link 定义跳转链接 2.使用js跳转 更多示例: 也可以使用 三、动态注册...

tianma3798
2018/10/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

威胁快报|新兴挖矿团伙借助shodan作恶,非web应用安全再鸣警钟

近日,阿里云安全发现了一个使用未授权访问漏洞部署恶意Docker镜像进行挖矿的僵尸网络团伙。我们给这一团伙取名为Xulu,因为该团伙使用这个字符串作为挖矿时的用户名。 Xulu并不是第一个攻击...

阿里云官方博客
17分钟前
3
0
MD5 加密需要注意编码格式!!!

相信做过MD5加密的童鞋都遇到过字符编码的坑,一般加密出来的结果和其他人不一样都是字符编码不一致导致的,比如类文件的字符编码、浏览器的字符编码等和对方不一致,所以就需要转码统一字符...

jason_kiss
19分钟前
1
0
python中字符串的操作

https://www.jianshu.com/p/7fc851b6a7ee

writeademo
28分钟前
1
0
如何制定 Java 性能调优标准?

想让你的程序更快更稳,但是系统经常出各种 bug,无从下手?Java 性能调优全攻略来啦! 我有一个朋友,有一次他跟我说,他们公司的系统从来没有经过性能调优,功能测试完成后就上线了,线上也...

Java领航员
29分钟前
2
0
java博客项目

项目地址:https://github.com/otale/tale 项目演示地址:https://tale.biezhi.me/ 项目介绍:Tale使用轻量级mvc框架Blade进行开发,默认主题使用漂亮的pinghsu, 特征 设计简洁,界面美观 ...

编程资源库
29分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部