uniApp-04 从服务器获取数据

本节：从服务器获取数据，传送到前端。

1.div，for循环输出数组。 

2.script：定义服务器要传的参数；连接接口，定义空数组，存放数据，循环赋值。

// 从服务器获取数据
            loadmenu() {
                var that = this; //1.指向上面的数据
                uni.request({ //2.对服务器请求数据
                    url: `http://www.yhjtp.com:8761/menu/menu/listmenu/${this.categoryId}/100/1`,
                    //3.连接的接口
                    success: (res) => { //4.成功之后返回的数据
                        console.log(res);
                        // this.text = 'request success';
                        that.goods = []; //5.定义一个数组，来接收服务器的内容
                        for (let g of res.data.data.menuPage.records) { //6.循环输出从服务器获取的数据数组
                            that.goods.push({ //7.放到上面定义的数组，循环赋值
                                id: g.id, //
                                categoryId: g.categoryId,
                                img: "http://www.yhjtp.com:8761/" + g.cover, //图片要服务器的网址+指针指向
                                price: g.price,
                                desc: g.menuDesc,
                                count: 0,
                            })

                        }; //同级for这里用分号
                        that.categoryList = []; //1.定义数组，接收服务器的内容
                        for (let c of res.data.data.categoryList) { //2.循环数组
                            that.categoryList.push({
                                id: c.id, //3.赋值
                                name: c.name,
                            })
                        }

                    },
                })
            },
 

最后，原代码。

	.countlanmu {
		position: fixed;
		bottom: 0rpx;
		height: 100rpx;
		display: flex;
		background-color: #FFFFFF;
		width: 750rpx;
	}

	,
	.js {
		padding-right: 30rpx;
		flex: 1;
		background-color: #c09969;
		width: 150rpx;
		height: 80rpx;
		border-radius: 50rpx;
		line-height: 80rpx;
		text-align: center;
	}

	,
	.btn1 {
		height: 50rpx;
		width: 50rpx;
		background-color: #6d8dc4;
		border-radius: 50%;
		text-align: center;
		color: #FFFFFF;
		font-weight: 600;
		margin-right: 10rpx;
	}

	,
	.btn2 {
		margin-left: 10rpx;
		height: 50rpx;
		width: 50rpx;
		background-color: #6d8dc4;
		border-radius: 50%;
		text-align: center;
		color: #FFFFFF;
		font-weight: 600;
	}

	,
	.yuan2 {
		height: 40rpx;
		width: 40rpx;
		background-color: #ff0000;
		border-radius: 50%;
		text-align: center;
		line-height: 40rpx;
		color: #FFFFFF;
		font-size: 16rpx;

	}

	,
	.banner {
		width: 750rpx;
		height: 422rpx;
		background-color: #0f0f27;
	}

	.banner .swiper {
		width: 750rpx;
		height: 422rpx !important;
	}

	.banner .swiper-item {
		width: 750rpx;
		height: 422rpx !important;
	}

	.banner .swiper-item image {
		display: block;
		width: 750rpx;
		height: 422rpx !important;
	}