vue请求后台数据真实接口

真实案例

后台接口 
? 前面是路径 ?后面是参数  参数形式是  key=value 比如:specific_name=专题会议

路径 url
http://192.168.40.1:9900/api-dataflow/keywork/?specific_name=专题会议

前端请求

html 模块

  <div class="title">{{title}}</div>

js模块

export default {
  name: 'businessStat',
  data () {
    return {
      loading: true,
      title: '',
    }
  }
   // 钩子函数调用方法
  created () {
      //$store.state.param 读取vuex存储的数据
    this.dataObj = this.$store.state.params
  },
  mounted () {
    this.load()
  },
  methods: {
    load () {
      //url 是请求地址  “?specific_name=专题会议” 是请求参数
      this.axios.get(url + `?specific_name=专题会议`).then(res => {
        console.log(res)
        console.log(res.data.result)
        this.title = res.data.result[0].task_name
      })
    }
  }
}
</script>
store文件内容
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    params: {},
    code: '', // 主页,二级页面code
  },
  mutations: {
    params (state, data) {
      state.params = data
    },
    code (state, data) {
      state.code = data
    },
    code_page (state, data) {
      state.code_page = data
    },
  }

猜你喜欢

转载自blog.csdn.net/xiaosi1413/article/details/103452810