zoukankan html css js c++ java

使用vue-resource发送跨域请求

　1、安装vue-resource并引入

　1. cnpm install vue-resource -S

　2. 参考：GitHub上搜索 vue-resource ，查看API文档：https://github.com/pagekit/vue-resource

　2、基本用法

使用this.$http发送请求

　　　　this.$http.get(url, [options])

　　　　this.$http.head(url, [options])

　　　　this.$http.delete(url, [options])

　　　　this.$http.jsonp(url, [options])

　　　　this.$http.post(url, [body], [options])

　　　　this.$http.put(url, [body], [options])

　　　　this.$http.patch(url, [body], [options])

3、使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送AJAX请求</title>
</head>
<body>
    <div id="itany">
        <button @click="sendJSONP">向360搜索发送JSONP请求</button>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/vue-resource.min.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#itany',
                data:{
                    user:{
                        name:'alice',
                        age:19
                    },
                    uid:''
                },
                methods:{
                    sendJSONP(){
                        //https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
                        this.$http.jsonp('https://sug.so.360.cn/suggest',{
                            params:{
                                word:'python'            // 要查询的内容
                            }
                        }).then(resp => {
                            console.log(resp.data.s);    // 返回的查询结果
                            // ["python官网", "python视频教程", "python 培训", "python基础教程", "python下载", ]
                        });
                    },
                }
            });
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送AJAX请求</title>
</head>
<body>
    <div id="itany">
        <button @click="sendJSONP2">向百度搜索发送JSONP请求</button>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/vue-resource.min.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#itany',
                data:{
                    user:{
                        name:'alice',
                        age:19
                    },
                    uid:''
                },
                methods:{
                    sendJSONP2(){
                        //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1420_21118_17001_21931_23632_22072&req=2&csor=1&cb=jQuery110208075694879886905_1498805938134&_=1498805938138
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            params:{
                                wd:'a'
                            },
                            jsonp:'cb' //百度使用的jsonp参数名为cb，所以需要修改
                        }).then(resp => {
                            console.log(resp.data.s);
                            // ["爱奇艺", "阿黛尔", "艾力绅", "阿里云", "阿里巴巴", "安居客", ]
                        });
                    }
                }
            });
        }
    </script>
</body>
</html>

4、发送get请求，并将请求内容添加到插件中

get(url, option)
　　　　　　　　Url ：表示请求地址
　　　　　　　　Option ：表示请求配置
　　　　　　　　Params ：定义query数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>vue实例化对象</h1>
        <router-view></router-view>        <!--定义渲染容器-->
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="vue-router.js"></script>
    <script type="text/javascript" src="vue-resource.min.js"></script>
    <script>
        var Home = {
            template:'<h1>home--{{data}}</h1>',
            data:function () {
                return {
                    data:''
                }
            },
            created:function () {
                this.$http.get('demo.json?123',{
                    params:{
                        color:'red'
                    }
                })
                    .then(function (res) {
                        this.data = res.data.name  //  res.data 是请求获取的内容
                    })
            }
        };

        // 第一步：定义路由规则
        var routes = [
            {
                path:'/home',
                name:'home',
                component:Home
            },
        ];

        // 第二步：实例化路由对象
        var router = new VueRouter({
            routes:routes
        });

        // 第三步：在vue实例化对象中注册路由
        var app = new Vue({
            el:'#app',
            router:router
        })
    </script>
</body>
</html>

5、发送post请求

post(url, data, option)
　　　　　　　　Url ：表示请求地址
　　　　　　　　Data ：表示请求的数据
　　　　　　　　Option ：表示请求的配置
　　　　　　　　Params ：定义query数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>vue实例化对象</h1>
        <router-view></router-view>        <!--定义渲染容器-->
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="vue-router.js"></script>
    <script type="text/javascript" src="vue-resource.min.js"></script>
    <script>
        var Home = {
            template:'<h1>home--{{data}}</h1>',
            data:function () {
                return {
                    data:''
                }
            },
            created:function () {
                this.$http.post('demo.json?123',{'arg1':'price'},{
                    params:{
                        b:200
                    }
                })
                    .then(function (res) {
                        this.data = res.data.name  //  res.data 是请求获取的内容
                    })
            }
        };

        // 第一步：定义路由规则
        var routes = [
            {
                path:'/home',
                name:'home',
                component:Home
            },
        ];

        // 第二步：实例化路由对象
        var router = new VueRouter({
            routes:routes
        });

        // 第三步：在vue实例化对象中注册路由
        var app = new Vue({
            el:'#app',
            router:router
        })
    </script>
</body>
</html>

1.4 封装axios请求

　1、初始化环境

　　　　　　vue init webpack deaxios

　　　　　　npm install axios –S

　　　　　　cnpm install vuex -S

　　2、封装axios（创建 src/api 文件夹）

configurls.js 配置全局url变量

export default {
  // api请求地址
  // API_URL: 'http://mup.dev.yiducloud.cn/'
  API_URL: 'http://1.1.1.3:8888'
}

import Axios from 'axios'
import URLS from '../../config/urls'

//1、使用自定义配置新建一个 axios 实例
const instance = Axios.create({
  baseURL: URLS.API_URL,
  headers: {
    'Content-Type': 'application/json'
  }
});

//2、添加请求拦截器
instance.interceptors.request.use(
  config => {
    //发送请求前添加认证token
    config.headers.Authorization = sessionStorage.getItem('token')
    // console.log(sessionStorage.getItem('token'),11223344)
    return config
  },
  err => {
    return Promise.reject(err)
  });

//3、添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据处理
  if (response.status === 200 || response.status === 201 || response.status === 400) {
    const data = response.data
    if (data.code === 200 || data.code === 201) {
      return data
    }
  }
  return Promise.reject(response)
}, function (error) {
  if (error.response) {
    switch (error.response.status) {
      case 400:
        return Promise.reject(error.response.data)
      case 401:
        window.location.href = '/login'
    }
  }
  // const errorData = error.response.data
  // if (errorData.code === 400) {
  //   return Promise.reject(errorData.desc)
  // }
  // return Promise.reject(errorData)
})

// export const getNodegroups = params => { return instance.get(`${base}/nodegroup/v1/nodegroups/list/`, params).then(res => res.data) }
// export const getNodegroups = params => { return instance.get(`/nodegroup/v1/nodegroups/list/`, params).then(res => res) }
export default instance

import URLS from '../../config/urls'
import ajax from './ajax'
let base = URLS.API_URL

// 用户相关
export const requestLogin = params => { return ajax.post(`${base}/users/v1/user/login/`, params).then(res => res) }

import * as api from './api'

export default api

3、使用vuex

import Vue from 'vue'
import Vuex from 'vuex'
import login from './modules/login/login'

Vue.use(Vuex);

export default new Vuex.Store({
  modules:{
    login
  }
});

import {
  requestLogin,
} from '../../../api/api'  // 导入封装后的axios请求

const state = {}

const getters = {}

const actions = {
  async loginMethod ({commit}, params) {
    return requestLogin(params).then(response => response)
  },
};

const mutations = {}

export default {
  state,
  getters,
  actions,
  mutations
}

　4、入口

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

<template>
  <div id="app">
    <p @click="handleLogin">点击发送axiso请求</p>
    <router-view/>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
export default {
  name: 'App',
  methods: {
    ...mapActions(['loginMethod']),
    handleLogin () {
          var loginParams = { username: 'zhangsan', password: '123456' }
          this.loginMethod(loginParams).then(response => {
            // this.logining = false
            sessionStorage.setItem('token', response.data)
            // this.$router.push({ path: '/' })
          }).catch(error => {
            this.loading = false
            this.error(error.desc ? error.desc : '服务器异常')
          })
        }
    },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

　5、封装axios作用

1. 我们在此将此项目所用到的所有接口调用方法都做了定义，这样既方便查看也利于管理。在

　　　　　　2. 我们需要调用接口方法的时候，我们只需要在对应vue文件中的标签里直接import想用的接口方法就行了

　　　　　　例如：import { getOptList,branchList,addOperator } from "../../api/index";

6、使用vuex发送get请求

import Vue from 'vue'
import Vuex from 'vuex'
import meeting from './modules/meeting/meeting'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  modules: {
    meeting
  }
})

import {
  getMeetingList
} from '../../../api/api'
import {getUrl} from "../../../utils/global/geturl";  // 导入封装后的axios请求

const state = {};

const getters = {};

const actions = {
  async getMeetingListMethod ({commit}, params) {
    return getMeetingList(getUrl(params)).then(response => response)
  },
};

const mutations = {};

export default {
  state,
  getters,
  actions,
  mutations
}

<template>
 
</template>

<script>
  import { mapActions } from 'vuex'
  export default {
    data() {
      return {};
    },
    methods: {
      ...mapActions(['getMeetingListMethod']),

      // 获取会议室信息
      requestMeetingListMethod () {
        var parms = {};
        this.getMeetingListMethod(parms).then(response => {
          console.log(123456)
          console.log(response)
          // this.tableData = response.data.data_list
          // this.listQuery.total = response.data.total
          this.loading = false
        }).catch(error => {
          this.loading = false;
          this.error(error.desc ? error.desc : '服务器异常')
        })
      },
    },

    created(){
      this.requestMeetingListMethod();  // 获取会议室信息
    },
  };
</script>

<style scoped>


</style>

查看全文

相关阅读:
lr 增强窗格中，如何生成调试信息？
lr 自带的例子，如何进行关联，通过代码的函数进行实现
 lr11 录制脚本时候，无法自动启动ie,查了网上很多方法都未解决？
loadrunner11 录制脚步不成功，在录制概要出现“No Events were detected”，浮动窗口总是显示“0 Events”,解决办法
 loadrunner11 安装及破解教程来自百度文库
 安装loadrunner11 ，出现如下错误如何解决？
回收站数据删除了，如何进行恢复？
网管工作方面——————打印机删除了然后开机重启他依然存在，如何解决
 Windows 不能在本地计算机启动 SQL Server 服务错误代码126
Sorry, the page you are looking for is currently unavailable. Please try again later. Nginx

原文地址：https://www.cnblogs.com/nbzyf/p/13746765.html