前端随笔（实测axios之get请求）

1.main.js

两种书写方式，已验证

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

============================

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.prototype.axios = axios
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2.Login.vue

写法1(get请求，常规写法，参数以？拼接在url中)：

<template>
  <div class="hello">
    <button id="one" type="button" @click="getDataOne()">get带参数写法1</button>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  name: 'Login',
  methods: {
    getDataOne () {
      this.axios
        .get('http://www.wwtliu.com/sxtstu/blueberrypai/getChengpinDetails.php?count=10')
        .then(function (response) {
          console.log(response)
          alert('成功')
          var vip = document.getElementById('one')
          vip.innerText = response.data.chengpinDetails[0].title
        })
        .catch(function (error) {
          console.log(error)
          alert('失败')
        })
    }
  }
}
</script>

<style scoped>

</style>

============================

写法2（get请求，简化写法，推荐使用写法2，请求参数卸载params中）：

<template>
  <div class="hello">
    <button id="two" type="button" @click="getDataTwo()">get带参数写法2</button>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  name: 'Login',
  methods: {
    getDataTwo () {
      this.axios.get('http://www.wwtliu.com/sxtstu/blueberrypai/getChengpinDetails.php', {params: {count: 10}})
        .then(res => {
          var z = document.getElementById('two')
          z.innerText = res.data.chengpinDetails[0].content
          console.log(res)
          alert('ok')
        })
        .catch(err => {
          console.log(err)
          alert('no')
        })
    }
  }
}
</script>

<style scoped>

</style>

3.万能的接口：

http://www.wwtliu.com/sxtstu/blueberrypai/getChengpinDetails.php

注：上述了个简单的get请求，标题3的意义在于让开发者可以快速验证写完的效果，初学者，基本按此代码复制粘贴，3分钟可入门理解。