vue 调用后台数据的方法

☆夏の独憶☆

已于 2022-02-14 15:49:25 修改

阅读量1.7k

点赞数

文章标签： javascript 前端 vue.js

于 2022-02-14 15:10:04 首次发布

本文链接：https://blog.youkuaiyun.com/zyi200207278017/article/details/122924913

版权

本文详细介绍了在Vue.js项目中如何与后端API进行交互，包括使用axios库发送HTTP请求，设置请求头，处理响应数据，以及错误处理。通过实例展示了GET和POST请求的实现，帮助开发者掌握在Vue应用中获取和更新后台数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：在script中写入：
  created() {
    this.getmenuList()
  },

第二步：在created下面写入：
methods: {
    // 获取所有的菜单数据
    async getmenuList() {
   	// get或post方法
      const { data: res } = await this.$http.POST("/system/cfg/menu");
      if(res.meta.status !== 200) return this.$message.error();
      this.menuList = res.data
      console.log(res);
    },
}

第三步：在template中写入：
  <el-submenu index="1" v-for="item in menuList" :key="item.id">
    <template slot="title">
      <i class="el-icon-monitor"></i>
        <span style="font-family: '等线'">{{item.authName}}</span>
    </template>
  </el-submenu>