商城项目 pc----商品详情页
目录
vue路由滚动行为
排他思想
放大镜
加入购物车操作
项目实战
Promise
特点
用法
then
执行顺序
拓展 async/await
Promise优缺点
Promise方法:
浏览器缓存
为什么需要本地存储呢:
window.sessionStorage
window.localStorage
区别
语法
vue路由滚动行为
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
const router = createRouter({scrollBehavior(to, from, savedPosition) {// 始终滚动到顶部return { top: 0 }},
})
排他思想
点击项为true 其他项都为false
changeActive(val, list) {//当前点击项 和整个循环数组console.log(val, list);//遍历全部的属性值为0 没有高亮list.forEach((ele) => {ele.isChecked = 0;});//点击项为1val.isChecked = 1;},
放大镜
<template><div class="spec-preview"><img :src="skuImageList[currentIndex].imgUrl" /><div class="event" @mousemove="hadleer"></div><!-- 大图 --><div class="big"><img :src="skuImageList[currentIndex].imgUrl" ref="big" /></div><!-- 遮罩 --><div class="mask" ref="mask"></div></div>
</template><script>
export default {name: "Zoom",props: ["skuImageList"],data() {return {currentIndex: 0,};},mounted() {this.$bus.$on("getIndex", (index) => {this.currentIndex = index;console.log(this.currentIndex);});},methods: {hadleer(event) {//鼠标移入获取遮罩let mask = this.$refs.mask;let big = this.$refs.big;let left = event.offsetX - mask.offsetWidth / 2;let top = event.offsetY - mask.offsetHeight / 2;if (left <= 0) left = 0;if (left >= mask.offsetWidth) left = mask.offsetWeight;if (top <= 0) top = 0;if (top >= mask.offsetHeight) top = mask.offsetHeight;mask.style.left = left + "px";mask.style.top = top + "px";big.style.left = -2 * left + "px";big.style.top = -2 * top + "px";},},
};
</script><style lang="less">
.spec-preview {position: relative;width: 400px;height: 400px;border: 1px solid #ccc;img {width: 100%;height: 100%;}.event {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 998;}.mask {width: 50%;height: 50%;background-color: rgba(0, 255, 0, 0.3);position: absolute;left: 0;top: 0;display: none;}.big {width: 100%;height: 100%;position: absolute;top: -1px;left: 100%;border: 1px solid #aaa;overflow: hidden;z-index: 998;display: none;background: white;img {width: 200%;max-width: 200%;height: 200%;position: absolute;left: 0;top: 0;}}.event:hover ~ .mask,.event:hover ~ .big {display: block;}
}
</style>
加入购物车操作
项目实战
加入购物车的请求放在了vuex里 请求接口只返回状态码 ,我们需要判断派发vuex的结果
vuex 因为使用了async await 调用AsyncAddOrUpdataShopCart 返回promise
我们需要做进一步处理 返回promis实例状态 code200返回非空为成功,否则返回失败态
async AsyncAddOrUpdataShopCart({commit}, {skuId,skuNum}) {let result = await axios.reqAddOrUpdataShopCart(skuId, skuNum)//代表服务器加入购物车成功 修改promise状态为成功 成功的值为okif (result.code == 200) {return 'ok'} else {return Promise.reject(new Error('false'))}}
}
页面等待promise的状态 使用try catch处理
// 加入购物车async addShopCar() {//调用返回promise retrun 非空字符串即成功跳转 失败的promise 提示try {let result = await this.$store.dispatch('AsyncAddOrUpdataShopCart', {skuId: this.$route.params.skuId,skuNum: this.skuNum})console.log(result);} catch (err) {console.log(err);}}},
Promise
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件—更合理且更强大。它最早由社区提出并实现,ES6将其写进了语言标准,统一了用法,并原生提供了Promise对象。
特点
- 对象的状态不受外界影响 (3种状态)
- Pending状态(进行中)
- Fulfilled状态(已成功)
- Rejected状态(已失败)
- 一旦状态改变就不会再变 (两种状态改变:成功或失败)
- Pending -> Fulfilled
- Pending -> Rejected
用法
创建Promise实例
var promise = new Promise(function(resolve, reject){// ... some codeif (/* 异步操作成功 */) {resolve(value);} else {reject(error);}
})
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve
和reject
。它们是两个函数,由JavaScript引擎提供,不用自己部署。
resolve作用是将Promise对象状态由“未完成”变为“成功”,也就是Pending -> Fulfilled
,在异步操作成功时调用,并将异步操作的结果作为参数传递出去;而reject函数则是将Promise对象状态由“未完成”变为“失败”,也就是Pending -> Rejected
,在异步操作失败时调用,并将异步操作的结果作为参数传递出去。
then
Promise实例生成后,可用then
方法分别指定两种状态回调参数。then 方法可以接受两个回调函数作为参数:
- Promise对象状态改为Resolved时调用 (必选)
- Promise对象状态改为Rejected时调用 (可选)
基本用法示例
function sleep(ms) {return new Promise(function(resolve, reject) {setTimeout(resolve, ms);})
}
sleep(500).then( ()=> console.log("finished"));
这段代码定义了一个函数sleep,调用后,等待了指定参数(500)毫秒后执行then中的函数。值得注意的是,Promise新建后就会立即执行。
执行顺序
接下来我们探究一下它的执行顺序,看以下代码:
let promise = new Promise(function(resolve, reject){console.log("AAA");resolve()
});
promise.then(() => console.log("BBB"));
console.log("CCC")// AAA
// CCC
// BBB
执行后,我们发现输出顺序总是 AAA -> CCC -> BBB
。表明,在Promise新建后会立即执行,所以首先输出 AAA
。然后,then方法指定的回调函数将在当前脚本所有同步任务执行完后才会执行,所以BBB 最后输出
。
与定时器混用首先看一个实例:
let promise = new Promise(function(resolve, reject){console.log("1");resolve();
});
setTimeout(()=>console.log("2"), 0);
promise.then(() => console.log("3"));
console.log("4");// 1
// 4
// 3
// 2
可以看到,结果输出顺序总是:1 -> 4 -> 3 -> 2
。1与4的顺序不必再说,而2与3先输出Promise的then,而后输出定时器任务。原因则是Promise属于JavaScript引擎内部任务,而setTimeout则是浏览器API,而引擎内部任务优先级高于浏览器API任务,所以有此结果。
拓展 async/await
async
顾名思义,异步。async函数对 Generator 函数的改进,async 函数必定返回 Promise,我们把所有返回 Promise 的函数都可以认为是异步函数。特点体现在以下四点:
- 内置执行器
- 更好的语义
- 更广的适用性
- 返回值是 Promise
await
顾名思义,等待。正常情况下,await命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值。另一种情况是,await命令后面是一个thenable对象(即定义then方法的对象),那么await会将其等同于 Promise 对象。
混合使用先看示例:
function sleep(ms) {return new Promise(function(resolve, reject) {setTimeout(resolve,ms);})
}
async function handle(){console.log("AAA")await sleep(5000)console.log("BBB")
}handle();// AAA
// BBB (5000ms后)
我们定义函数sleep,返回一个Promise。然后在handle函数前加上async关键词,这样就定义了一个async函数。在该函数中,利用await来等待一个Promise。
Promise优缺点
优点 | 缺点 |
---|---|
解决回调 | 无法监测进行状态 |
链式调用 | 新建立即执行且无法取消 |
减少嵌套 | 内部错误无法抛出 |
Promise方法:
常用的方法有5中:then()、catch()、all()、race()、finally()。
1.then()
接受俩个俩个回调函数作为参数,第一个参数表示成功的时候去执行,第二参数表示失败的时候去执行,返回的时一个新的promise的实列。
2.catch()
相当于then方法的第二个参数。
3.all()
接受一个数组作为自己的参数,数组中每一项都是一个promise对象,当数组的每一个promise状态时resolved时,all方法的状态才会变成resolved,有一个变成rejected,那么all方法的状态就会变成rejected。
4.race()
他和all方法一样,接受一个数组作为自己的参数,但是不同的时他时以第一完成的promise的状态来定义直接的状态,假设第一个状态时resolved,那么race方法的状态就是resolved,反之相反。
5finally()
他是不管promise时什么状态都会执行的都会去执行的,他不接受任何的参数。
浏览器缓存
为什么需要本地存储呢:
- 数据存储在用户浏览器中,在控制台中Application模块中查看。
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大,
sessionStorage
约5M、localStorage
约20M - 只能存储字符串,可以将对象
JSON.stringify()
编码后存储
地储存分两种,一种是sessionStorage
,以及localStorage
.那么有什么异同点呢?
window.sessionStorage
生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
window.localStorage
声明周期永久生效,除非手动删除 否则关闭页面也会存在
可以多窗口(页面)共享(同一浏览器可以共享)
以键值对的形式存储使用
区别
最大的区别:生命周期的不同,sessionStorage在浏览器存储数据的页面关闭以后存储的数据就消失了,但是localStorage即使浏览器存储数据的页面关闭了,数据也不会丢失,那怎么删除localStorage存储的数据呢?使用localStorage.removeItem(key)和localStorage.clear()语句来删除。
相同点:都是用来存储数据的并且代码语法结构相似。下面细说一下存储数据结构的代码:
语法
- 存储数据: sessionStorage.setItem(key, value)
- 获取数据:sessionStorage.getItem(key)
- 删除数据:sessionStorage.removeItem(key)
- 清空数据:(所有都清除掉) sessionStorage.clear()
商城项目 pc----商品详情页相关推荐
- 尚硅谷谷粒商城第十二天 商品详情页及异步编排
1. 商品详情 当用户搜索到商品,肯定会点击查看,就会进入商品详情页,接下来我们完成商品详情页的展示. 商品详情浏览量比较大,并发高,我们会独立开启一个微服务,用来展示商品详情. 1.1. 创建mod ...
- 商城-3 查询商品详情页信息
查询商品详情页信息 上面章节完成了查询spu列表 在商品列表中选中商品后,会显示这个商品的详情信息 商品详情页我们需要显示的信息包括 根据spuId查询spu信息 根据spuId查询spuDetail ...
- java电商项目搭建-------商品详情页模块
努力好了,时间会给你答案.--------magic_guo 在一个电商项目中,访问频率最高的是商品详情页页面,而且商品详情页的变化评率不会太高(除非是搞活动的时候):那么访问频率高,然后再使用数据库 ...
- 微信小程序商城系列之商品详情页
wxml: <!--商品幻灯片--> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{au ...
- 微信小程序商城开发-商品详情页跳转购物车
项目场景: 微信小程序商城开发中商品详情页中购物车页面的跳转(仅限于tabbar页面的跳转) 问题描述 点击商品详情页中的购物车图标跳转不到tabbar及导航栏中的购物车页面,总是报错 原因分析: 微 ...
- 仿淘宝商品详情页TabLayout+ListView
第一次写博客,我是一名Android的小码农写代码也有三四年了.有点好玩的跟大家分享一下 项目对商品详情页改版有新需求.顶部是一个渐变的Title包括"宝贝","详情&q ...
- Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品排序,Thymeleaf快速入门,商品详情页的展示)
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息 这是用来做排序的,默认按照综合排序 ...
- SpringBoot--网上商城项目(自定义的参数解析器、购物车后台前台功能、商品详情页)
目录 一.自定义的参数解析器 关于Mybatis-plus时间字段代码生成问题 报错信息:Caused by: java.lang.IllegalStateException: No typehand ...
- 电商项目商品详情页架构设计
当用户进入京东首页,点击搜索手机进入搜索页面,点击一款手机进入商品详情页面,主要展示商品的信息,主要分为三块信息: 1:基本信息:展示商品的基本信息,包括sku价格等基本信息. 2:商品描述(商品详情 ...
最新文章
- 大数据和数据库的理解文章收藏
- 第六篇:Feedforward Networks 前向网络
- 第 138 章 Spark
- 帝国cms后台编辑时日期显示保存使用时间戳的方法
- Oracle OFA目录结构
- JS 版的pnp in_array($str,$arr)
- Nginx教程-http_core_module变量
- 如何在没有Springockito的情况下模拟Spring bean
- Cloud一分钟 | 华为云发布云数据安全白皮书;OPPO携手阿里云举行天池OGeek算法挑战赛...
- python中xlrd写操作_Python读写操作Excel模块_xlrd_xlwt_xlutils
- 【突发】解决remote: Support for password authentication was removed on August 13, 2021. Please use a perso
- java 类 引用数组对象_Java 方法重载与引用数组类型
- 快逸报表(润乾报表使用)(v4 版本)
- 大学计算机python教材答案_大学计算机python答案
- 人体手脚部位与内脏的对应关系图
- 基于skyline的城市三维建模研究(转)
- 新人如何快速上手做(海外问卷)站点查?
- Java+SSH人力资源管理系统(含源码+论文+答辩PPT等)
- Linux.bash脚本编写基础
- PostgreSQL 常用命令实战
热门文章
- 鼎捷ERP二次开发教程 Tiptop GP开发资料大全 Tipto开发实战经验 鼎捷开发实战例子 Tiptop GP二次开发项目例子 4GL开发Demo 鼎捷二次开发完整例子 鼎捷ERP二次开发入门
- QML自定义的日历控件
- 基于js原生算法+cocos游戏引擎+uni框架Cloud托管网页:开发2048小游戏域名发布版本
- 测试mysql连接服务器,配置云服务器的mysql连接,navicat测试远程连接
- si4463突破最大包64字节发送
- 安徽省计算机基础应用成绩查询,安徽计算机一级考试成绩查询入口
- 高考+考研,如何选择人工智能相关专业?
- VS Code 遇上 Java丨第一章:配置 Java 开发环境
- 忘记oracle管理员密码了,解决oracle数据库忘记系统管理员密码
- VB6如何引用VBDX9.tlb-------VB6编程学习DX9游戏编程DirectX9编程2D小游戏源码冷风引擎CoolWind2D游戏引擎(2)