前端mounted的使用

今天完成了一个前端的需求,将前端页面的固定值换成从后端查询的值,后端的接口已经写好,主要是前端的编写。

1.新建一个js文件

import request from '@/utils/request';
export function getMusic() {
  return request({
    method: 'POST',
    url: '/music/select',
  });
}

2.在Vue页面添加

import {getMusic} from '@/api/music';

3.在mouted中写方法

mounted() {
        this.getMusicFromBackend();
        },

4.在methods写方法,这样页面在加载时候,就能够从后端拿到数据

getMusicFromBackend() {
          getMusic().then(res => {
                res.data.info.forEach(item=>{
                this.musicData.push(item)
              })})
            .catch(error => {
              // 处理错误情况
              console.error('Error:', error);
            });
      }

3.将从后端拿到的数据替换成后端查询的值,这里需要注意的是赋值时候要判断

该数据是否拿到了,如下代码中我用数组musicData接收后端的数据,但是有可能页面在加载时候,数据还没有拿到,但是页面在渲染,如果不做判断,页面就会找不到所需的数据。

<img src="@/img/music.svg" alt="">
   <div v-if="musicData.length > 0">
{{musicRoomData[i].name}}
    <span class="small-gray" >PFlops</span>
   </div>
<div>音乐</div>
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值