前端mounted的使用

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

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>
相关推荐
咖啡の猫14 分钟前
Vue初始化脚手架
前端·javascript·vue.js
晨枫阳26 分钟前
uniapp兼容问题处理总结
前端·vue.js·uni-app
liusheng2 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪2 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛2 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能2 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
非凡ghost2 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
trsoliu2 小时前
2025前端AI Coding产品与实战案例大盘点
前端·ai编程
云中雾丽2 小时前
react-checkbox的封装
前端
乐园游梦记2 小时前
告别Ctrl+F5!解决VUE生产环境缓存更新的终极方案
前端