vue-axios

1、简介

一款vue库，用于处理ajax请求，vue2.x时广泛应用。

2、流程

step1：安装
命令行输入

npm install axios --save

step2：引入
在哪里使用，就在哪里引入

import axios from 'axios'

App.vue

<template>
    <div>
        <div v-if="!repositoryUrl">loading...</div>
        <div v-else>most star repository is <a :href="repositoryUrl">{{repositoryName}}</a></div>
    </div>
    <!--App -->
</template>

<script>
    import axios from 'axios';
    
    export default {
        data() {
            return {
                repositoryUrl : '',
                repositoryName : ''
            }
        },
        
        mounted() {
            // 发ajax请求，用以获取数据，此处地址意思是查询 github中 vue 星数最高的项目
            const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';
            
            axios.get(url).then(
                response => {
                    const result = response.data.items[0];
                    console.log(result)
                    this.repositoryUrl = result.html_url;
                    this.repositoryName = result.name;
                }
            ).catch(
                response => {
                    alert('请求失败');
                },
            );
        }
    }
</script>

<style>

</style>

跨域 confif下的index.js文件配置

 proxyTable: {
  //解决跨域
  // '/ssm'项目工程包路径
  '/ssm':{
      //项目端口
    target:"http://localhost:8081",
    ws:true,
    changeOnSelect:true
  }
},

main.js

import axios from 'axios'
//解决跨域 引用
axios.defaults.baseURL = '/ssm'

去除Eslint的验证

在build文件加下webpack.base.conf.js中把配置注释掉
//...(config.dev.useEslint ? [createLintingRule()] : []),

—————————————————————————————————————————————
vue传递数据给后台使用qs（推荐）

npm install qs --save-dev

然后在需要使用的页面引入一下：
import qs from 'qs'

引入好了之后，把上面的postData用qs转一下再发送给后台就可以了：
const data = qs.stringify(this.form)