uniApp-04 从服务器获取数据

最新推荐文章于 2024-05-21 21:35:00 发布
最新推荐文章于 2024-05-21 21:35:00 发布
阅读量2.4k 收藏 11
点赞数
分类专栏： uniApp 文章标签： 服务器 前端 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59214979/article/details/121235427
版权

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

 

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

                    },
                })
            },
 

最后，原代码。

<template>
	<view>
		<view class="" style="background-color:#f7f7f7 ;">

			<view style="height: 110rpx;width: 750rpx;line-height: 110rpx;background-color: #FFFFFF;">
				藤原肠粉店
			</view>
			<view>
				<view class="page-section swiper">
					<view>
						<swiper :indicator-dots="indicatorDots" :indicator-color="indicatorColor"
							:indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval"
							:duration="duration">
							<swiper-item>
								<view>
									<image style="width: 750rpx; height: 422rpx; " src="../../../static/1.jpg" mode="">
									</image>
								</view>
							</swiper-item>
							<swiper-item>
								<view>
									<image style="width: 750rpx; height: 422rpx; " src="../../../static/1.jpg" mode="">
									</image>
								</view>
							</swiper-item>
							<swiper-item>
								<view>
									<image style="width: 750rpx; height: 422rpx; " src="../../../static/1.jpg" mode="">
									</image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="qianggoouqu" style="margin-top: 10rpx;background-color: #FFFFFF;">
				<view class="" style="font-weight: 600;padding-bottom: 5rpx;">
					抢购专区
				</view>
				<view class="">
					<scroll-view class="nav1" scroll-x="true" style="">
						<view class="" style="background-color:#FFFFFF;display: flex;width:1800rpx;height: 330rpx;">

							<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

								<image src="../../../static/1.jpg" mode="" style="width: 270rpx;height: 160rpx;">
								</image>
								<view class="tc">
									一人吃超值套餐
								</view>
								<view class="price" style="display: flex;font-size: 35rpx;">
									￥9.9 <del class="" style="color:#e6e6e6; margin-left: 5rpx;">
										￥4.9
									</del>
								</view>

							</view>
							<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

								<image src="../../../static/1.jpg" mode="" style="width: 270rpx;height: 160rpx;">
								</image>
								<view class="tc">
									一人吃超值套餐
								</view>
								<view class="price" style="display: flex;font-size: 35rpx;">
									￥9.9 <del class="" style="color:#e6e6e6; margin-left: 5rpx;">
										￥4.9
									</del>
								</view>

							</view>
							<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

								<image src="../../../static/1.jpg" mode="" style="width: 270rpx;height: 160rpx;">
								</image>
								<view class="tc">
									一人吃超值套餐
								</view>
								<view class="price" style="display: flex;font-size: 35rpx;">
									￥9.9 <del class="" style="color:#e6e6e6; margin-left: 5rpx;">
										￥4.9
									</del>
								</view>

							</view>
							<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

								<image src="../../../static/1.jpg" mode="" style="width: 270rpx;height: 160rpx;">
								</image>
								<view class="tc">
									一人吃超值套餐
								</view>
								<view class="price" style="display: flex;font-size: 35rpx;">
									￥9.9 <del class="" style="color:#e6e6e6; margin-left: 5rpx;">
										￥4.9
									</del>
								</view>
							</view>
							<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

								<image src="../../../static/1.jpg" mode="" style="width: 270rpx;height: 160rpx;">
								</image>
								<view class="tc">
									一人吃超值套餐
								</view>
								<view class="price" style="display: flex;font-size: 35rpx;">
									￥9.9 <del class="" style="color:#e6e6e6; margin-left: 5rpx;">
										￥4.9
									</del>
								</view>
							</view>
							<view class="" style="padding-left: 20rpx;margin-top: 10rpx;">

								<image src="../../../static/1.jpg" mode="" style="width: 270rpx;height: 160rpx;">
								</image>
								<view class="tc">
									一人吃超值套餐
								</view>
								<view class="price" style="display: flex;font-size: 35rpx;">
									￥9.9 <del class="" style="color:#e6e6e6; margin-left: 5rpx;">
										￥4.9
									</del>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>


			</view>
			<view class="" style="margin-top: 10rpx;background-color: #FFFFFF;height: 80rpx;display: flex;">
				<view @click="showGoodsByCategoryId(category.id)" v-for="(category,index) in categoryList"
					:key="'c-' +index" style="margin-left: 20rpx;line-height: 80rpx;display:flex;
				position: relative;">
					<!--  :key="'c-' +index" 防止循环重复，不然电脑会以为只有一个循环 -->
					{{category.id}}--{{category.name}}
					<view v-if="category.count > 0" class="yuan2" style="position: absolute;top: 0rpx;right: -20rpx;">
						{{category.count}}
					</view>
					<!-- 					<div style="position: relative;" v-for="(cate, index) in category"
						 :key="index">
						{{ cate.name }}
					</div> -->
				</view>

			</view>
			<view class="" style="margin-top: 10rpx;background-color: #FFFFFF;height: 1200rpx;">
				<view v-for="(good,index) in goods" style="padding-top: 30rpx;display: flex;align-items: center; ">
					<div v-if="good.categoryId == showCategoryId">
						<div>
							<image style="width: 131rpx;height: 125rpx;margin-left: 20rpx;" :src="good.img"></image>
							<!-- 冒号是变量，不是冒号的src是直接的路径 -->
						</div>
						<view style="margin-left: 10rpx;">

							<div>{{good.name}}</div>
							<div>{{good.desc}}</div>
							<div>￥{{good.price}}</div>
						</view>

						<view class="" style="display: flex;margin-left:300rpx;margin-top:-100rpx">
							<view class="btn1" @click="alterGoods(good,1)">+</view>
							<view class="">
								{{good.count}}
							</view>
							<view class="btn2" @click="alterGoods(good,-1)">-</view>
						</view>
					</div>
				</view>

			</view>
		</view>
		<view class="countlanmu">
			<view class="" style="flex: 1;padding-left: 30rpx;">
				<view class="">
					总价:
					{{totalprice.toFixed(2)}}
				</view>
				数量
				{{totalcount}}
			</view>
			<view class="js" @click="settlement()">
				去结算
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 1.任何变量的先加都要放在data里面
				categoryList: [{
						id: 1,
						name: "烧腊",
						count: 0,
					},
					{
						id: 2,
						name: "奶茶",
						count: 0,
					},
					{
						id: 3,
						name: "米饭",
						count: 0,
					},
				],
				categoryId: 1,
				pagesize: 1,
				pagenum: 10,
				showCategoryId: 1,
				totalprice: 0,
				totalcount: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				indicatorColor: "#292b40",
				indicatorActiveColor: "#ffffff",
				goods: [{
						id: 1,
						name: "曲奇饼",
						price: 0.5,
						desc: "我很好吃",
						img: "../../../static/3.png",
						count: 0,
						categoryId: 1,
					},
					{
						id: 2,
						name: "奥利啊",
						price: 0.5,
						desc: "我很好吃",
						count: 0,
						img: "../../../static/1.jpg",
						categoryId: 2,
					},
					{
						id: 3,
						name: "奥利啊",
						price: 0.5,
						desc: "我很好吃",
						count: 0,
						img: "../../../static/1.jpg",
						categoryId: 3,
					},
					{
						id: 4,
						name: "奥利啊",
						price: 0.5,
						desc: "我很好吃",
						count: 0,
						img: "../../../static/1.jpg",
						categoryId: 2,
					},

				]
			}

		},
		created: function() {
			// 4.最开始就运行这个程序，就是计算器
			this.loadcategoryList();
			this.loadmenu();
		},
		methods: {
			// 从服务器获取数据
			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,
							})
						}

					},
				})
			},

			settlement() {
				let orderInfo = { //1.因为服务器要接收数组和userID，所以要先定义好，然后再接收
					menuInfoDtoList: [],
					userId: 1,
				}
				for (let g of this.goods) { //2.循环商品数组
					orderInfo.menuInfoDtoList.push({ // 3.接收到之后，传递进数组
						menuId: g.id,
						num: g.count
					});
				}
				console.log(orderInfo);
				uni.request({ //1.连接接口
					url: 'http://www.yhjtp.com:8761/menu/order/confirm', //仅为示例，并非真实接口地址。
					data: orderInfo, //传递的数组
					method: "POST", //传递的方法
					header: {
						'custom-header': 'hello' //自定义请求头信息,服务器没有要header的时候，可以不传
					},
					success: (res) => { //es6语法写法  2.成功之后的返回告知的文字
						console.log(res.data);
						this.text = 'request success'; //传递成功之后，输出的文字。
					}
				});


			},
			alterGoods(good, val) {
				// val是加减的参数
				// good.count = good.count + val;
				good.count = Math.max(good.count + val, 0);
				// 大于0的时候才赋值
				// 寻找分类的对象
				// 增加对应商品，会在对应分类增加对应的数量。商品有分类的id，分类也有id，相等就可以互相对应。
				let curCategory = {}; //新定义的数组
				for (let c of this.categoryList) {
					// 循环分类列表，如果商品id和分类id一致，就把这个id参数赋值给新定义的数组
					if (c.id == good.categoryId) {
						curCategory = c;
					}
					curCategory.count = 0; //先把商品分类总数，小红点里面的值，定义为0
					//this.categoryList[0].count = 0; //先把红点里面的内容定义为0
					this.totalcount = 0;
					this.totalprice = 0;
					for (let g of this.goods) {
						// 再次循环商品
						if (curCategory.id == g.categoryId) {
							// 如果商品的id等于新定义数组的id，就计算各个分类数组的总数，商品的数量加上对于分类的数量
							curCategory.count = curCategory.count + g.count;
							// this.curCategory[0].count = this.categoryList[0].count + g.count;
							// 红点里面的内容，加商品的内容，不断累加

						}
						this.totalcount += g.count; //数量
						this.totalprice += g.count * g.price; //价格
					}
				}
			},
			showGoodsByCategoryId(categoryId) {
				this.showCategoryId = categoryId;
			},

			loadcategoryList() { //显示商品列表
				var that = this;
				// 	方便指向，访问上面的数组，就是把上面之前的东西赋值到that上，就不需要再引入一遍，只需要that即可指到之前的对象
				uni.request({
					url: 'http://www.yhjtp.com:8761/menu/category/list/', //仅为示例，并非真实接口地址。
					success: (res) => {
						console.log(res.data);
						that.categoryList = res.data.data; //接收到的分类列表
						that.loadmenu(that.categoryList[0].id);
						for (let i of that.categoryList) {
							i["count"] = 0;
							// 定义一个变量count，默认值为0，因为服务器没有count变量，所以要定义一个，然后在根据上面加就加
						}
					}
				});
			}
		},
	}
</script>

<style>
	.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;
	}
</style>

V_zcm
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp 模拟请求自身的JSON模拟数据
weixin_41647577的博客
11-05 2511
uniapp 模拟请求自身的JSON模拟数据
uniapp 微信小程序 从接口获取配置信息 前端添加固定的过期时间
树上骑个猴的博客
04-19 558
系统中的配置信息从接口中获取，这些配置信息需要在多个接口请求中的参数中用到，为了保证这些接口使用时能够拥有配置信息，需要把配置信息做成全局的。为了减少请求的频率，需要把配置信息存储在缓存中，但是为了保证实时性，于是需要给缓存添加过期时间，当用户刷新页面时就去检查是否拥有配置信息，如果配置信息不存在，则去请求配置信息，如果配置信息已过期，则去请求最新的配置信息。 代码如下： App.vue // 当 uni-app 启动，或从后台进入前台显示 onShow: function(e) {
Difference between GET and POST Request in HTTP/REST 之选择GET还是POST？？
老照片
11-25 539
HTTP Protocol supports many methods to retrieve data from the server or perform any operation on the server, like upload data, delete the file, etc. In total, the HTTP protocol supports the following methods, like GET, POST, PUT, DELETE, HEAD, DELETE, OP..
uni-app发送数据请求教学：从入门到实践
最新发布
qq_74916452的博客
05-21 2086
uni-app是什么？uni-app是一个使用Vue.js开发所有前端应用的框架，它允许开发者编写一次代码，发布到多个平台。这些平台包括iOS、Android、以及各种小程序（如微信/支付宝/百度/字节跳动/QQ/淘宝/京东等）和H5等。uni-app通过封装Vue.js的核心以及微信小程序等平台的原生能力，让开发者可以使用Vue的语法来编写应用，并发布到多个平台。uni-app的特点跨平台能力：uni-app的最大特点在于其强大的跨平台能力。
uniapp使用原生请求访问本地服务器
qq_55695208的博客
03-07 1422
通过async调用的函数返回的会使一个promise对象， uni.request（object）是uni的原生请求方式，配置好后用.then获取数据。第一个是成功回调函数，默认有一个参数，可根据参数判断成功与否，并获取数据。该函数是我的请求函数，没有经过封装，在created（）中调用的。需要注意的是async是不能直接在生命周期中使用，通过写成函数在里面调用即可。一个Promise对象如何前面加上await返回的就直接是结果，.then函数中第一个成功回调函数的参数。
uni-app中统一调用接口服务
haoyuexihuai的专栏
01-22 1万+
基础调用使用Fly 1.request.js uni-app自带Fly，通用模块 // 目前没有针对uni的Fly版本，使用wx版本没有问题 // #ifdef APP-PLUS import Fly from 'flyio/dist/npm/wx' // #endif // #ifdef MP-WEIXIN import Fly from 'flyio/dist/npm/wx' // #endi...
uni-app的三种操作数据库方法
小淼淼的博客
11-28 6409
uni-app的三种操作数据库方法
支付宝小程序-获取会员手机号
05-12
1、适用于uniapp开发支付宝小程序 2、 组件 open-type=getAuthorize ，用于授权 3、当用户点击并同意之后，可以通过my.getPhoneNumber() 接口获取到支付宝服务器返回的加密数据
uniapp轮播图实例和动态获取实例
05-04
然而，实际项目中，我们通常需要从服务器获取数据动态渲染轮播图。可以将图片URL存储在 Vue 实例的数据（data）中，然后通过 `v-for` 循环渲染 `uni-swiper-item`： ```html <uni-swiper :autoplay="true" :...
angularjs 动态从后台获取下拉框的值方法
10-18
在本例中，我们将探讨如何使用AngularJS的`$http`服务来获取数据，并通过`ng-repeat`指令动态生成下拉框选项。 1. **$http服务**：AngularJS的`$http`服务是用于与服务器通信的主要工具。在这个例子中，`service...
浏览器跨域获取Lrc歌词数据的解决办法
12-12
但如果要访问不同域的数据时，由于浏览器的安全设置，XMLHTTP没有权限获取数据，而IFRAME没有权限将获取的数据传递给父窗口，似乎没有其它解决办法。 顿悟…… 网页内引用不同域的脚本并不会提示权限不足，对了，...
uni-app从0到1.DOC uni-app实现代码
01-10
14. **网络请求**：介绍uni.request API，用于发送HTTP请求，获取服务器数据。 15. **从本地相册选择图片或使用相机拍照**：讲解如何利用uni-app接口进行图片选取和拍摄。 16. **数据缓存**：使用uni.setStorage和...
uni-app中配置devServer实现跨域访问数据
az44yao的专栏
05-26 2276
1.在devServer中： 在manifest.json->源码视图中添加 注意：以下代码可以跨域，但是请求出来的数据不是想要的，会出现请求得到的不是数据，而是得到https://api.ithome.com网址的报错网页代码 "h5": { "devServer": { "port": 8000, "disableHostCheck": true, "proxy": { ...
uniapp获取当前页面的地址
m0_60207396的博客
12-15 1029
【代码】uniapp获取当前页面的地址。
uni-app学习05 封装网络请求和获取动态数据
qq_51575392的博客
07-04 207
/ let用来声明变量。用法类似于var，但是所声明的变量，// async 关键字写在函数名之前（相当于一个标识），在utils文件夹中创建request.js用于网络请求。成功获取后台数据库中的动态数据，打印到小程序的控制台中。新建文件夹utils用于存放工具js文件。// 只在let命令所在的代码块内有效。在home.vue中修改script。// 让普通函数具有异步的行为特征，// 但是整体上代码却是同步执行的。// 请求首页的动态数据信息。'首页动态数据---'
uni-app开发微信小程序之获取当前地址
Xinacridine的博客
02-25 1448
<script> import amapFile from '../../common/amap-wx.js' export default { data() { return { key: 'ea5272730d9258289a996809b38c1638', } }, onShow() { this.handleAuthorize() }, methods: { // 获取位置 handleAuthorize() { va
uniapp 启用服务推送
全易
12-29 860
一定要放在事件直接执行的地方，比如点击事件 // 一定要放在事件直接执行的地方，比如点击事件 uni.requestSubscribeMessage({ tmplIds: [''], // 需要订阅的消息模板的id的集合 success (res) { console.log(res); // 然后业务代码 } }) 官方说明 ...
uni-app 调用接口
热门推荐
Hocen_Jonin的博客
06-17 2万+
一、适用于浏览器跨域 1.manifest.json文件新增 "h5": { "devServer": { "port": 8000, "disableHostCheck": true, "proxy" : { "/api" : { "target" : "https://www...
调用其它app中的Service
lihuapinghust的专栏
06-21 711
涉及到IPC，用Messenger实现IPC，参见：http://developer.android.com/guide/components/bound-services.html 在Service的工程的Manifest文件中做如下声明：             android:exported="true">
uniapp websocket 无法获取数据
07-31
UniApp WebSocket 无法获取数据可能是由于以下几个原因： ...综上所述，如果 UniApp WebSocket 无法获取数据，请检查连接设置、事件处理、服务器数据和跨域等方面的问题，排查出具体原因并进行相应的修复。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值