WEB应用开发综合实训day13

本节实训内容为微信小程序与后端服务器进行通信，向后端请求数据而不是向网易云请求，微信小程序页面跳转以及部分组件功能，如原型图片，wx:for用法等
另外将自己的腾讯云windows服务器改为了CentOS服务器，并申请了https证书，使项目能够上线运行，下面贴出项目网址和微信小程序体验版二维码，欢迎大家进行测试，体验版只有15个名额，先到先得哦。
后端项目地址：https://www.hbuas.top/ManageMusic/index.
微信小程序体验版二维码↓

• 歌曲列表

  • 后端

    @RequestMapping("/wx/music")
    @RestController//给小程序提供的一定是json数据，所以直接指定controller为RestController
    public class WxMusicController {
    
        @Resource
        private MusicService musicService;
        /**
         * 分页获取歌曲列表(默认从第一页开始,默认取10条)
         */
        @RequestMapping("/list")
        public ResultVo list(Integer page,Integer limit){
            return musicService.getMusicList(page,limit);
        }
    }
    

  • 小程序端

    /**
       * 生命周期函数--监听页面加载
       */
    onLoad: function (options) {
        //1. 调用获取歌曲列表的方法
        this.getMusicList();
    },
    /**
       * 获取歌曲列表
       */
    getMusicList:function(){
        //在this指向发生改变之前，使用that提前存储下this
        var that = this;
        wx.request({
            url: this.data.baseUrl+'wx/music/list',
            data:{
                page:1,
                limit:30
            },
            success:function(res){
                //解析之后的歌曲结果
                var resultSongs = res.data.data;
                //使用this给data中的属性赋值
                //在经过异步接口回调之后，this的指向发生了改变
                //异步请求的回调函数中，不要用this
                that.setData({
                    songList:resultSongs
                })
            }
        })
    },
    

    <!-- 歌曲列表 -->
    <view wx:for="{{songList}}" wx:for-item="song" class="music-container">
        <view class="left">
            <image src="{{baseUrl+song.mPhoto}}"></image>
        </view>
        <view class="center">
            <view class="songName">{{song.mName}}</view>
            <view class="singerName">
                <block wx:for="{{song.artistList}}" wx:for-item="artist"
                       wx:for-index='i'>
                    <text wx:if="{{i<song.artistList.length-1}}">
                        {{artist.aName}},
                    </text>
                    <text wx:else>{{artist.aName}}</text>
                </block>
                <block wx:if="{{song.tbAlbum}}">- 《{{song.tbAlbum.alName}}》
                </block>
                <block wx:else>- 《单曲》</block>
            </view>
        </view>
        <view class="right">
            <!-- 携带当前歌曲的id -->
            <image   src="/img/play.png"></image>
        </view>
    </view>
    

• 歌曲详情

  • 后端

    /**
         * 根据id获取详情(为了偷懒不返回ResultVo格式了，直接返回TbMusic格式)
    */
    @RequestMapping("/detail")
    public TbMusic detail(Integer id){
        return musicService.getMusicById(id);
    }
    

  • 小程序端

    /**
       * 生命周期函数--监听页面加载
       */
    onLoad: function (options) {
        this.getMusicInfoById(options.id);
    
    },
    /**
       * 根据歌曲id获取歌曲详情的方法
    */
    getMusicInfoById:function(id){
            var that = this;
            wx.request({
                url: this.data.baseUrl+'wx/music/detail',
                data:{
                    id:id
                },
                success:function(res){
                    that.setData({
                        song:res.data
                    })
                }
            })
    },