vuejs学习之路 发送http请求（二）

vuejs项目还是主要显示前端内容，跟后端联动，难免会涉及到通信。我们的项目中使用的是http协议进行通信，选择的库为axios。

1、安装axios依赖库：

npm install axios --save
bower install axios --save

2、在vue文件中进行引用

import axios from 'axios'

3、发送请求，例如放到一个button的getData方法中。

      如果需要header则第四行变成： method: 'post', headers: { 'Content-Type': 'application/json-rpc' }, url: vm.stressUrl + '/getData',

      避免函数过长，我把获取到的数据填充到table单独放到一个函数里去了。

      getData(val) {
        let vm = this
        axios({
          method: 'post', url: vm.stressUrl + '/getData',
          data: {
            page: val,
            page_size: vm.pageSize,
            choose_env: vm.choose_env.toString()
          }
        }).then(function(res) {
          vm.total_page = res.data.data.counts
          vm.pushdata(res.data.data.Info)
        })
      },

4、后端接收你的http请求， 后端语言不同，实现方法不一样，golang为例：

      我的后端http用的gin， 需要在handlers里边定义GetData方法来处理。

package router

import (
	"github.com/gin-gonic/gin"
)

func Init(r *gin.Engine) {
	r.Use(Cors()) //HTTP框架GIN使用

	r.POST("/getData", handlers.GetData)   
}