本文共 2763 字，大约阅读时间需要 9 分钟。

背景音乐查询后端代码

1、BgmService的代码

public interface BgmService {    /**     * 查询背景音乐列表     * @return     */    public List
   
     queryBgmList();}
   

2、背景音乐service接口的实现类BgmServiceImpl

@Servicepublic class BgmServiceImpl implements BgmService {    @Autowired    private BgmMapper bgmMapper;    @Transactional(propagation = Propagation.SUPPORTS)    @Override    public List
   
     queryBgmList() {        List
    
      bgms = bgmMapper.selectAll();        List
     
       bgmList = new ArrayList<>();        Bgm b = null;        for(Bgm bgm : bgms){            b = new Bgm();            String bgmPath = bgm.getPath().replace("\\","/");            BeanUtils.copyProperties(bgm,b);            b.setPath(bgmPath);            bgmList.add(b);        }        return bgmList;    }}
     
    
   

3、背景音乐的Controller类BgmController

@RestController@RequestMapping("/bgm")@Api(value = "背景音乐业务的接口" ,tags = "背景音乐业务的controller")public class BgmController {    @Autowired     private BgmService bgmService;    @ApiOperation(value ="获取背景音乐列表",notes = "获取背景音乐列表的接口")   @PostMapping("/list")    public IMoocJSONResult list() {        return IMoocJSONResult.ok(bgmService.queryBgmList());    }}

背景音乐小程序端代码

1、小程序呢端的choosebgm.wxml的代码

1. wx:for 对返回的背景音乐进行遍历，在js的data中定义bgmList，然后将后端返回的数据赋值给bgmList。
   通过item获取对象中的属性值。
2. audio是微信小程序中的音频组件
   3）src属性表示音频的地址，后端获取的地址是保存文件的相对路径，我们需要进行地址拼接。

     
    
    
          
               
               
                
                
            
                   
         
           
      视频描述:      
          
         
     上传视频    
     重置  
    
   

2、小程序wxss渲染choosebgm.wxss

page {  height: 100%;}.container {  display: flex;  margin-top: 20rpx;  justify-content: space-around;}.submitBtn {  width: 80%;  margin-top: 15px;}.gobackBtn {  width: 80%;  margin-top: 15px;}.loginLabel {  color: gray;  font-size:15px;}.inputText {  float: right;  text-align: right;  margin-right: 22px;  margin-top: 11px;  font-size: 15px;}.inputView {  padding: 5px;  background-color: white;  line-height: 45px;  border: solid 1px whitesmoke;}

3、小程序js文件，choosebgm.js

const app = getApp();Page({  data: {    bgmList:[],    serverUrl:"",  },  onLoad: function() {    var me = this;    wx.showLoading({      title: '请等待...',    });    var serverUrl = app.serverUrl;    //发起请求    wx.request({      url: serverUrl + '/bgm/list',      method: "POST",      header:{        'content-type':'application/json'      },      success: function(res) {        console.log(res.data);        wx.hideLoading();        if (res.data.status == 200){          var bgmList = res.data.data;          console.log(bgmList);          me.setData({            bgmList: bgmList,            serverUrl: serverUrl          })        }      }    })  }})

转载地址：http://vjfoi.baihongyu.com/