文章目錄

• 背景音樂查詢後端程式碼
• 1、BgmService的程式碼
• 2、背景音樂service介面的實現類BgmServiceImpl
• 3、背景音樂的Controller類BgmController
• 背景音樂小程式端程式碼
• 1、小程式呢端的choosebgm.wxml的程式碼
• 2、小程式wxss渲染choosebgm.wxss
• 3、小程式js檔案，choosebgm.js

背景音樂查詢後端程式碼

1、BgmService的程式碼

public interface BgmService {
    /**
     * 查詢背景音樂列表
     * @return
     */
    public List<Bgm> queryBgmList();
}

2、背景音樂service介面的實現類BgmServiceImpl

@Service
public class BgmServiceImpl implements BgmService {
    @Autowired
    private BgmMapper bgmMapper;

    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public List<Bgm> queryBgmList() {
        List<Bgm> bgms = bgmMapper.selectAll();
        List<Bgm> 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屬性表示音訊的地址，後端獲取的地址是儲存檔案的相對路徑，我們需要進行地址拼接。

<view>
  <form bindsubmit='upload'>
    <radio-group name="bgmId">
     <block wx:for="{{bgmList}}">
         <view class='container'>
        <audio  name="{{item.name}}" author="{{item.author}}" src="{{serverUrl}}{{item.path}}" style='width:300px' id="myAudio" controls loop></audio>
        <radio style='margin-top:20px;' value='{{item.id}}'></radio>
        </view>
     </block>
     
    
    </radio-group>
    <view class="inputView">
      <label class="loginLabel">視訊描述:</label>
      <input name="desc" class="inputText" placeholder='說點什麼吧'></input>
    </view>

    <button class="submitBtn" type='primary' form-type='submit'>上傳視訊</button>
    <button class='gobackBtn' type='warn' form-type='reset'>重置</button>
  </form>
</view>

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
          })
        }
      }
    })
  }
})