【java小程序】背景页面到小程序的展示

上传短视频时，我们会选择一些对应的背景音乐，背景音乐是后台系统上传的，在这里我们直接通过查询，显示在小程序中就可以了。

背景音乐查询后端代码

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