获取一级分类下所有商品、商品详情、登录操作、购物车添加、购物车获取

最新推荐文章于 2024-04-19 14:18:55 发布
最新推荐文章于 2024-04-19 14:18:55 发布
阅读量735 收藏 2
点赞数
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangyanqin2545/article/details/116377168
版权

一.获取一级分类下所有商品

1.页面跳转 传参

index.vue

	// 2.一级分类 切换选项卡
    changeIndex(index,fid){
        this.activeIndex = index

        uni.navigateTo({
            url:"../product/product?fid="+fid
        })
    },

2.获取数据

参数：

参数名说明
fid一级分类id,必填
page请求页码，必填
size分页偏移量，必填

接口：api.js

// 7.获取一级分类下所有商品-分页
const _getCateGoodPage= (data)=>{
	let option={
		url:"/api/getcategoodPage",
		data
	}
	 return http(option)
}

export default {
    _getFirstCate,_getBanner,_getSeckill,_getIndexGoods,_search,_getCates,
    _getCateGoodPage
}

请求代码： product.vue

<template>
	<view>
		<view class="search">
			<icon type="search" color="white" size="10"></icon>
			<input type="text" value="" placeholder="搜索商品" placeholder-class="placeholder"/>
		</view>
		<view class="list" v-if="goods.length > 0">
			<view class="row" v-for="(item,index) in goods" :key="item.id">
				<image :src="baseUrl+item.img" mode="widthFix"></image>
				<view class="info">
					<text>{{item.goodsname}}</text>	
					<text>￥{{item.price}}</text>	
					<text>3565评论</text>	
				</view>
			</view>
		</view>
		<view class="tishi" v-else>
			没有数据亲！
		</view>
	</view>
</template>

<script>
	
	
export default {
	data(){
		return {
			totalPage:1,
			goods:[],
			baseUrl:"",
			page:1,
			size:4
		}
	},
	onShow(){
		this.baseUrl = this.$config.baseUrl
		// console.log(this);
		this.getCateGood()
		
	},
	methods:{
        //1.请求数据，更新视图
		async getCateGood(){
			let res = await this.$api._getCateGoodPage({fid:this.$mp.query.fid,page:this.page,size:this.size})
			//console.log(res);
			// 总页码
			this.totalPage = res.data.list[0]
			
			
			// 数据   null == []
			res.data.list[1] = res.data.list[1] || []
			// 老拼接新数据
			this.goods = this.goods.concat(res.data.list[1] ) 
		}
	},
	// 2.上拉触底 加载下一页数据
	onReachBottom(){
        //页码 +1
		this.page++;
        // 请求的页码 > 总页码 return
		if(this.page >this.totalPage){
			uni.showToast({
				title:"数据已经到底了",
				icon:"none"
			})
			return
		}
		
		this.getCateGood()
		
	}
}
</script>

二.商品详情

0.页面跳转

//10.跳转到商品详情页
			toDetailPage(id){
				uni.navigateTo({
					url:"../details/details?id="+id
				})
			}

1.获取商品数据

**接口 **api.js

// 8获取一个商品信息
const _getGoodsInfo = (data)=>{
	let option={
		url:"/api/getgoodsinfo",
		data
	}
	return http(option)
}

export default {
	_getFirstCate,_getBanner,_getSeckill,_getIndexGoods,_search,_getCates,_getCateGoodPage
	,_getGoodsInfo
}

代码案例 detail.vue

export default {
		data() {
			return {
				info:{},
				baseUrl:"",
				num:1
			}
		},
		methods: {
            //获取商品详情数据 
			async getGoodInfo(){
				let res = await this.$api._getGoodsInfo({id:this.$mp.query.id})
					//console.log(res);
                	//处理商品属性的格式  字符串-->数组
				res.data.list[0].specsattr = res.data.list[0].specsattr.split(",")
                	//更新视图
				this.info = res.data.list[0]
				
			},
            //数量加加
			add(){
				this.num++
				if(this.num >= this.info.number ){
					this.num = this.info.number
				}
			},
            //数量减减
			dec(){
				this.num--
				if(this.num <= 1){
					this.num =1
				}
			}
			
		},
		onShow(){
			this.getGoodInfo()
			this.baseUrl = this.$config.baseUrl
		}

三.登录操作

1.获取手机验证码

参数：

参数名说明
phone手机号

接口：api.js

// 9.获取验证码
const _getSms = (data)=>{
	let option={
		url:"/api/sms",
		data
	}
	return http(option)
}

export default {
	_getFirstCate,_getBanner,_getSeckill,_getIndexGoods,_search,_getCates,_getCateGoodPage
	,_getGoodsInfo,_getSms
}

代码案例 send.vue

async getSms(){
				let phone = this.phone
				let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
				// console.log(reg.test(phone));
				
				// 验证手机格式
				if(!reg.test(phone)){
					uni.showToast({
						title:"手机号格式错误",
						icon:"none"
					})
					return
				}
				
				
				let res = await this.$api._getSms({phone})
				console.log(res);
				
			}

2.执行登录

参数：

参数名说明
phone手机号

接口

// 9.登录
const _login = (data)=>{
	let option={
		url:"/api/wxlogin",
		data
	}
	return http(option)
}


export default {
	_getFirstCate,_getBanner,_getSeckill,_getIndexGoods,_search,_getCates,_getCateGoodPage
	,_getGoodsInfo,_getSms,_login
}

代码案例

export default {
		data() {
			return {
				phone:"",
				msg:"获取手机验证码",
				time:null,
				isSend:false,
				code:""
			}
			
		},
		methods: {
			async getSms(){
				// 3.2 处理重复点击 ，避免重新触发定时器
				if(this.isSend){ return};
				
				let phone = this.phone
				let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
				// console.log(reg.test(phone));
				
				// 1.验证手机格式
				if(!reg.test(phone)){
					uni.showToast({
						title:"手机号格式错误",
						icon:"none"
					})
					return
				}
				
				// 2.执行 请求验证码
				let res = await this.$api._getSms({phone})
				console.log(res);
				// 3.倒计时效果--
				let num = 20
				if(res.data.code == 200){
					this.time = setInterval(()=>{
						num--
						if(num <0){
							clearInterval(this.time)
							this.msg="重新获取手机验证码"
							
							this.isSend = false
							
							uni.removeStorageSync('code')
							uni.removeStorageSync('phone')
							
							return
						}
						this.msg=num+"s后重新发送"
						
					},1000)
					this.isSend = true
					
				}
				
				// 4.存到本地缓存，code   phone
				uni.setStorageSync('code',res.data.list.code)
				uni.setStorageSync('phone',phone)
				
			},
			// 登录
			async login(){
				// 1.验证手机号 验证码
				// 是不是之前发送验证码 的手机号
				let code = uni.getStorageSync('code')
				let phone = uni.getStorageSync('phone')
				console.log(code,phone);
				// 2.输入框的验证码 和后台返回的code 是否相等
	
				if(this.phone != phone || this.code !=code){
					
					uni.showToast({
						title:"手机号或者验证码不正确",
						icon:"none"
					})
					
					return
				}
				
				// 3.执行登录
				let res = await this.$api._login({phone})
				console.log(res);
				if(res.data.code == 200){
					uni.showToast({
						title:res.data.msg
					})
					
					// 个人信息 uid token phone
					uni.setStorageSync('userInfo',res.data.list)
					
					// 跳转
					uni.navigateBack({
						delta:1
					})
				}
				
			}
			
		}
	}

3.登录检测

一进入项目，检测是否登录，如果登录了，个人中心tab文本显示【我的】，如果没登录，个人中心tab文本显示【未登录】

参数：

参数名说明
authorizationheader头 中需要添加 token 后台验证条件

接口


// 10登录验证
const _checkToken = (header)=>{
	let option={
		url:"/api/checktoken",
		header
	}
	return http(option)
}


export default {
	_getFirstCate,_getBanner,_getSeckill,_getIndexGoods,_search,_getCates,
    _getCateGoodPage,_getGoodsInfo,_getSms,_login,_checkToken
}

(1)封装检测方法

代码案例：checkToken.js

const checkToken = async (_this)=>{
	
	// 1.参数
	let token = uni.getStorageSync('userInfo').token || null
	
	// 1）.判断有没有登录
	if(!token){
		uni.setTabBarItem({
			index:2,
			text:"未登录"
		})
		
		return false
	}
	
	// 2）登录
		// 2.执行请求  判断登录是否过期
	let res = await _this.$api._checkToken({authorization:token})
	// console.log(res);
		// 登录过期  设置未登录状态 
	if(res.data.code == 403 || res.data.code == 500){
		
		uni.setTabBarItem({
			index:2,
			text:"未登录"
		})
		// 移除过期的用户token
		uni.removeStorageSync('userInfo')
		
		return false
	}
	
	uni.setTabBarItem({
		index:2,
		text:"我的"
	})
	return true
	
}

export default checkToken

(2)app.vue进行检测

代码案例

<script>
	import checkToken from "utils/checkToken.js"
	// 项目的根组件
	export default {
		async onShow() {
			checkToken(this)
			// // 1.参数
			// let token = uni.getStorageSync('userInfo').token || null
			
			// // 1）.判断有没有登录
			// if(!token){
			// 	uni.setTabBarItem({
			// 		index:2,
			// 		text:"未登录"
			// 	})
				
			// 	return
			// }
			
			// // 2）登录
			// 	// 2.执行请求  判断登录是否过期
			// let res = await this.$api._checkToken({authorization:token})
			// console.log(res);
			// 	// 登录过期  设置未登录状态 
			// if(res.data.code == 403 || res.data.code == 500){
			// 	uni.setTabBarItem({
			// 		index:2,
			// 		text:"未登录"
			// 	})
			// 	// 移除过期的用户token
			// 	uni.removeStorageSync('userInfo')
			// 	return
			// }
			
			// uni.setTabBarItem({
			// 	index:2,
			// 	text:"我的"
			// })
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

(3)个人中心进行检测

代码案例

import checkToken from "utils/checkToken.js"
.....

	data(){
        return {
            personMsgList: [......太长了 删除了],
            //是否登录 的状态
            isLogin:false,
            // 个人信息
            phone:""
        }
    },
    async onShow(){
        // 显示 检测是否登录
        let res = await checkToken(this)
        // console.log(res);
        if(res){
            this.isLogin = true
            this.phone = uni.getStorageSync('userInfo').phone

        }else{
            //uni.navigateTo({
                //url:"../send/send"
           // })
        }
    },
    methods:{
            toSendPage(){
                uni.navigateTo({
                    url:"../send/send"
                })
            }
        }

四.购物车添加

参数：

参数名说明
uid用户编号，必填项
goodsid商品编号，必填项
num数量，必填项
checked是否选中，必填项 ，默认1 选中 0 不选中
authorization放在请求头：header头 中需要添加token后台验证条件

接口

// 11.购物车 添加 
const _cartAdd = (header,data)=>{
	let option={
		url:"/api/cartadd",
		header,
		data
	}
	return http(option)
}


export default {
	_getFirstCate,_getBanner,_getSeckill,_getIndexGoods,_search,_getCates,
	_getCateGoodPage,_getGoodsInfo,_getSms,_login,_checkToken,_cartAdd
}

代码案例：detail.vue

// 购物车添加
async cartAdd(){

    // 1.参数
    let {uid=null,token=null} = uni.getStorageSync('userInfo')
    let data = {
        uid,
        goodsid:this.$mp.query.id,
        num:this.num,
        checked:0
    }
    let header = {authorization:token}

    // 2.执行添加
    let res = await this.$api._cartAdd(header,data)
    console.log(res);
    if(res.data.code == 403 || res.data.code == 500){
        uni.showToast({
            title:res.data.msg,
            icon:"none"
        })
        setTimeout(()=>{
            uni.navigateTo({
                url:"../send/send"
            })
        },1500)

        return
    }
    uni.showToast({
        title:"添加购物车成功"
    })

}

},

五.购物车获取

参数：

参数名说明
uid用户编号，必填项
authorizationheader头中需要添加token后台验证条件

接口

// 12.购物车 获取
const _cartList = (header,data)=>{
	let option={
		url:"/api/cartlist",
		header,
		data
	}
	return http(option)
}


export default {
	_getFirstCate,_getBanner,_getSeckill,_getIndexGoods,_search,_getCates,
	_getCateGoodPage,_getGoodsInfo,_getSms,_login,_checkToken,_cartAdd,_cartList
}

案例： cart.vue

import checkToken from "../../utils/checkToken.js"
	export default {
		data(){
			return {
				isLogin:false,
				cartLists:[],
				baseUrl:""
			}
		},
		methods:{
			toSendPage(){
				uni.navigateTo({
					url:"../send/send"
				})
			},
			async cartList(){
				// 1.找参数
				let {uid,token} = uni.getStorageSync('userInfo')
				let data = {uid}
				let header = {authorization:token}
				
				// 2.执行查询
				let res = await this.$api._cartList(header,data)
				console.log(res);
				this.cartLists = res.data.list || []
			},
			// 加加
			add(index){
				this.cartLists[index].num++;
				
			},
			// 减减
			dec(index){
				this.cartLists[index].num--;
				if(this.cartLists[index].num<1){
					this.cartLists[index].num = 1
				}
					
			}
		},
		async onShow(){
			// 检测是否登录
			this.isLogin = await checkToken(this)
			// console.log(this.isLogin);
			
			// 登录成功，再去获取购物车信息
			if(this.isLogin){
				this.cartList()
				this.baseUrl = this.$config.baseUrl
			}
		}
	}
琴～～
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE工程中axios基本使用
qq_37686852的博客
07-26 414
VUE工程中axios基本使用
js-buy-sdk:JS Buy SDK是一个轻量级的库，可让您将电子商务构建到任何网站中。 它基于Shopify的API，并提供从商店中检索产品和产品集，将产品添加到购物车以及结帐的功能。
04-28
JS Buy SDK是一个轻量级的库，可让您将电子商务构建到任何网站中。 它基于Shopify的并提供从商店中检索产品和产品集，将产品添加到购物车以及结帐的功能。 。 变更日志 查看我们的以获取有关我们版本的详细信息。 ...
asp购物车实例源码
08-28
使用： 第1 '================================================= '建立购物车对象,该对象用于直接在程序中调用 '================================================= dim uCart set uCart= new UserCart 第二 建立一个购物车 uCart.CreateCart （可以重复建立，因为里面有IsArray判断。所以建议这句在建立购物车对象后必写） 第三 增加购物车里的商品，在客户端点了某产品后，服务器端处理的ASP文件中接受传过来的产品标志，并访问数据库。分别把AddItem(aID产品标 志如ID,aName产品名称,aPrice1产品价格一，如单价,aPrice2产品价格二如会员价,aPrice3产品价格三如金牌会员价，如果没这么多可以置空 或置0,aCount购买数量，一般是一个，多个的话后面可以用修改函数修改,aImage产品图片地址) 使用方法：aa=uCart.AddItem(aID产品标志如ID,aName产品名称,aPrice1产品价格一，如单价,aPrice2产品价格二如会员价,aPrice3产品价格 三如金牌会员价，如果没这么多可以置空或置0,aCount购买数量，一般是一个，多个的话后面可以用修改函数修改,aImage产品图片地址),返回 true表示成功，false表示失败 第四 增加了以后进如显示页面，就要用到查看购物车 mycart=uCart.ViewCart() For i =LBound(myCart,2) to UBound(myCart,2) if myCart(0,i)"" then myCart(0,i) '获取标号 myCart(1,i) '获取单价 。。。以此类推 end if next 第五 查看了，可以修改购物车，如更改数量等，或是删除其中的 call uCart.ModifItem(mID唯一标志号,mCount产品数量,mFlag－标志 0－添加 1－删除,2-修改 3-清空) '先用给后面参数赋值 修改其中的商品 可以用第四个显示，先接受session的值，然后循环修改 或清空购物车 uCart.RemoveAll() 然后结帐，很简单 myprice=uCart.TPrice() 然后myprice（0）是产品单价的总价格，myprice（1）是产品会员价的总价格，myprice（2）是高级会员的总价格，myprice（3）是产品总数量 将商品装入购物车，这时需要用cookie或session来做一个不同页面间传递的全局变量，也就是说关了浏览器（针对session）或清楚了cookie等原因，本次购物车会消失，就象你今天在商场买了一车的东西，最后没结帐，明天肯定没了，又归位了，当然要有特殊需要保存，可以写数据库！所以这里记录的只需要是该商品的相关信息就可以了，这里我们记录他的 物品ID, 物品单价, 物品名称, 物品数量
PHP基础
dearphp的博客
05-23 1090
php基础，包含数据库等
vue一级分类和耳机分类_05-商品类别数据和VUE展示
weixin_32413177的博客
12-24 345
一、商品类别数据和VUE展示1、商品类别数据接口将商品类别数据展示出来，视图(views.py)代码如下：classCategoryViewset(mixins.ListModelMixin,viewsets.GenericViewSet):"""list:商品分类列表数据"""queryset=GoodsCategory.objects.all()serializer_class= GoodsC...
laravel 5种搜索条件商品列表
你华还是你华
09-09 477
本文目录一、商品列表1.1 创建商品列表路由1.2 创建商品列表方法1.3 测试效果 一、商品列表 1.1 创建商品列表路由 // 商品列表 $api->get('goods', [GoodsController::class, 'index']); 1.2 创建商品列表方法 /** * 商品列表 */ public function index(Request $request) { // 分页搜索条件 $t
1+X WEB前端中级 选择题-多选汇总2
热门推荐
niuroufen5的博客
11-19 2万+
点击前往????1+X WEB前端中级 选择题-单选汇总1 在MySQL中,创建一个购物表,其中一个字段是记录购物时间(要求精确到秒),则该字段比较合适的数据类型是( )。 A. DATE B. TIME C. DATETIME D. TIMESTAMP 在Bootstrap4中,下列说法正确的是 A. <576px 像素的为超小屏幕,用 .col-* B. ≥576px 像素的为小屏幕,用 .col-sm-* C. ≥768px 像素的为中等屏幕,用 .col-md-* D.
黑马程序员前端 Vue3 小兔鲜电商项目——（五）一级分类页
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
06-22 1544
黑马程序员前端 Vue3 小兔鲜电商项目——（五）一级分类页
Day12-获取并渲染一级分类的列表数据
qq_59110215的博客
11-26 100
卷
连续内存分配
计算机系秃头少女的博客
09-09 386
动态分区分配 Buddy System
Vue-cli3 解决跨域问题
evalsys的博客
11-23 1万+
devServer.proxy Type: string | Object 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。 devServer.proxy 可以是一个指向开发环境 API 服务器的字符串： mo...
电子商务CodeIgniter-Bootstrap：响应式，多供应商，多语言在线商店平台（购物车解决方案）
01-30
购物车解决方案-CodeIgniter和BootstrapBootsrap响应式多供应商，多语言在线商店平台当前版本： Codeigniter 3.1.11 Bootstrap 3.3.7捐如果这个项目可以帮助您减少开发时间，那么您可以给我一杯咖啡继续开发。...
JSP高级教程
07-25
6.10.4 利用session制作一个购物车 6.10.5 JavaBeans的作用域 6.10.6 利用JavaBeans制作的购物车 6.11 使用application对象 6.11.1 应用的概念 6.11.2 application对象可用的方法和属性 6.11.3 application...
Ext+JS高级程序设计.rar
04-21
9.3.5 实现添加一条记录的功能 262 9.3.6 实现修改一条记录的功能 264 9.3.7 实现删除一条记录的功能 266 9.4 从头实现 Ext扩展 270 9.5 本章小结 274 第10章 Ext插件 275 10.1 插件的用法 275 10.2 标签页右键菜单...
【uniapp / vue】中动态添加绑定style 或 class
Brod-Roy的博客
04-15 322
用于根据值不同需要修改的参数过多的时候。用于根据值不同需要修改的参数过多的时候。
uniapp H5项目 获取接口的二进制流转化成图片url（base64）
最新发布
qq_41910413的博客
04-19 98
uniapp H5项目 获取接口的二进制流转化成图片url（base64）
转换为elementUI提示方法为uni-app的showToast提示
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
04-16 229
【代码】转换为elementUI提示方法为uni-app的showToast提示。
多语言vue-i18n (vue2，uniapp)
weixin_45086164的博客
04-16 225
多语言vue-i18n (vue2，uniapp)
标准版uni-app移动端页面添加/开发操作流程
weixin_64051447的博客
04-15 821
uni-app项目中，一个页面就是一个符合Vue SFC规范的.vue文件或.nvue文件。.vue页面和.nvue页面，均全平台支持，差异在于当uni-app发行到App平台时，.vue文件会使用webview进行渲染，.nvue会使用原生进行渲染。nvue具体介绍及使用方法见：nvue原生渲染。
如何用JSP编写一个简易购物车，实现向购物车内添加商品、移除指定商品及清空购物车等功能。
04-23
您可以使用JSP技术和Servlet技术实现一个简易购物车。下面是实现的步骤： 1.在JSP页面中创建购物车页面，包括“添加商品”、“移除指定商品”和“清空购物车”等按钮。 2.通过Servlet代码响应用户的点击事件，获取商品ID和商品名称。 3.在Servlet代码中创建一个HashMap对象，作为购物车。 4.通过HashMap对象实现添加商品、移除指定商品和清空购物车等功能。 例如，要添加商品，首先检查购物车中是否已有该商品，如果是，则增加商品数量，如果不是，则在购物车中添加一个新的商品。 5.最后，将购物车对象保存到Session中，使得在整个会话过程中都可以访问购物车。 请注意，这是一个简单的实现，如果要实现高级功能，例如结算、订单管理、支付等，需要更复杂的技术和业务逻辑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值