项目总结
一、学会了什么
1、在登录注册页面,学会了如何使用正则表达式的方式来完成注册登录页面中,账号密码的格式是否符合要求,以及关于登录页面的中登录时的权限验证,登录与未登录时分别赋予两者什么样的权限。就比如:登录时需要显示什么,不需要显示什么,登陆时显示用户的购物车和添加到购物车以及退出登录等功能
;未登陆时需要显示什么,不需要显示什么,未登陆时显示用户的登录以及注册等功能
。
2、在首页中,轮播这一块儿学会了如何对轮播js
代码进行简单的封装以及让轮播能够顺畅的进行无缝轮播;轮播下面的内容方面,学会了当数据过多时,首先进行显示一页,之后触底再请求下一页内容的操作,这样的话,可以减少首页因为首次请求数据过多而造成卡顿的现象。
3、在分类页中,学会了页面的楼层滚动操作
,在同一个大的一级标题页面,通过点击固定定位导航中的二级标题,来使得屏幕所显示的内容滚动到当前点击的二级标题下所相对应的内容位置,使得用户在想要查看某一个大的一级标题中二级标题内容时,能够更快速的找到相应的内容。
4、在所有显示数据页面中,学会了通过点击商品来获取相应商品的id
,将得到的id
进行本地的暂时性存储操作,以便详情页通过获取本地暂时性存储的商品id
,后跳转到详情页面中,并通过得到的id
,请求该对应商品的详情数据,并进行页面渲染操作。
5、在详情页面中,学会了关于权限验证,通过判断用户是否登陆来进行用于能否添加商品到购物车的操作,用户没有登陆时点击添加购物车使用提示框对用户进行提示您未登录,无法进行添加购物车操作,请登录后再进行该操作,或进行其他操作
。
6、在购物车页面,学会了,通过使用提前封装好的关于获取数据的函数,来获取关于购物车数据的操作,并添加了能够添加和减少商品数量的操作,并能够进行删除购物车中商品的操作。
进步有哪些
1、登录注册页面,对于登录验证中的正则表达式验证账号密码格式是否符合要求方面以及判断登录与否所显示不同的内容方面
2、通过封装函数来完成数据的获取以及个别页面的渲染方面。
3、首页中的触底显示下一页内容
4、通过验证来判断用户是否能够进行添加购物车操作
哪里不会
不会的地方主要在于封装组件,简单的封装函数来获取数据可以完成,组件方面使用调用函数方面无法独立完成。
总结项目中有哪些业务,是怎么实现的
1、注册登录页面,权限验证业务,用户登陆时将用户名以及密码保存到window.localStorage
本地永久存储中,之后通过判断本地存储中是否存在用户名密码,来改变页面显示的内容,完成用户登录的权限验证;用户名以及密码格式是否符合要求业务,通过正则表达式/\w{6,12}$/
来完成账号格式的验证,通过正则表达式/a-zA-Z0-9{6,12}&/
来完成密码格式的验证
2、首页中,触底加载下一页内容业务,使用document.documentElement.scrollTop
浏览器的滚动条是否到达底部,当浏览器滚动条到达底部时,再次获取数据调用函数page++
使得页面加一,在第一的内容上再加上第二页的内容,当页码数大于等于42时,也就意味着数据已经加载完毕,这个时候也就意味着当滚动条再次触底时,无需再调用此函数,return
跳出即可
3、分类页中,每一个大的一级标题都是一个页面,通过点击分类一级标题,来跳转到对应的页面,楼层滚动方面,通过点击固定定位导航中的标题,跳转到对应的数据所在的位置,通过offsetTop
获取到每一个二级标题距离顶部的位置,并将其放到一个数组中,以便将其与浏览器的滚动条滚动的偏移量进行对比来完成页面内部的跳转。获取点击的二级标题所对应的offsetTop
,若当前的滚动偏移量大于点击所对应的,那么就使用
let timers = setInterval(() => {
document.documentElement.scrollTop -= 2000 / 16.7;
console.log(document.documentElement.scrollTop, arrTop[index]);
if (document.documentElement.scrollTop <= arrTop[index]) {
clearInterval(timers);
}
}, 16.7)
来完成滚动条的过渡效果;
若当前的滚动偏移量小于点击所对应的offsetTop
,那么就使用
let timers = setInterval(() => {
document.documentElement.scrollTop += 2000 / 16.7;
console.log(document.documentElement.scrollTop, arrTop[index]);
if (document.documentElement.scrollTop <= arrTop[index]) {
clearInterval(timers);
}
}, 16.7)
来完成滚动条的过渡效果
4、获取详情页以及添加购物车中跳转之后根据前一个页面数据来获取当前数据业务,对获取详情页所需的数据进行暂时的一个本地存储window.sessionStorage
,之后在详情页和购物车页中通过在本地存储中根据早已存储的数据来获取对应的数据,并加之渲染在页面上
总结所写项目中哪些技术亮点并详细说明
通过本地存储的数据来完成业务,如:权限验证、获取详情数据、购物车加载。 (1)权限验证是将登陆时将用户名进行本地存储,登陆成功后,若本地存在该用户名,时头部导航书写,首页、购物车、退出登录;若未进行登录,头部显示,首页、登录、注册。
(2)获取详情数据是将在前一个页面所点击的数据信息进行暂时的本地存储,例:商品的id。之后在详情页中根据本地暂时存储的id来获取相应的详情数据,之后再对详情数据进行页面渲染
(3)购物车加载是,在登陆时将获取的token值进行本地存储,在详情页面,点击添加购物车按钮,将对应的商品id存储到本地中,在购物车中根据早已存储的token、商品id、用户名username
,来获取购物车数据,之后在对其进行页面渲染,在一个就是,当商品数量为0时或点击商品行中的删除按钮时,提示用户是否要删除该商品
var ts = confirm("是否删除该商品");
若ts为true就可以删除,若为false则代表用户不想删除该商品,或点错,或后悔。
为true时,开始请求删除商品操作,之后通过返回的code来判断是否删除成功
if (res.code === 1) {
// location.href = './shopCar.html'
} else if (res.code === 2) {
alert("删除失败");
} else if (res.code === 0) {
alert('无效 token ,登陆失败,请重新登陆');
location.href = './login.html';
}