前端mounted的使用

chuyufengling2023-09-16 16:06

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

1.新建一个js文件

javascript 复制代码

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

2.在Vue页面添加

javascript 复制代码

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

3.在mouted中写方法

javascript 复制代码

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

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

javascript 复制代码

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

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

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

javascript 复制代码

<img src="@/img/music.svg" alt="">
   <div v-if="musicData.length > 0">
{{musicRoomData[i].name}}
    <span class="small-gray" >PFlops</span>
   </div>
<div>音乐</div>