项目总结

项目总结

一、学会了什么

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';
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,922评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,591评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,546评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,467评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,553评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,580评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,588评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,334评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,780评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,925评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,573评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容

  • 这一周我们组队进行了良仓商城项目,通过老师提供的商城api接口,我们完成了注册页,登录页,首页,各分类页,商品详情...
    wish1994阅读 629评论 1 0
  • 项目介绍一、pc端静态页面制作1.小米官网静态页面制作2.博雅互动静态页面制作二、基础实例项目1.花瓣网实例1)思...
    果木山阅读 576评论 0 0
  • 最近学了一点vue.js,并且根据教程做了一个类似饿了么的APP商家页面。vue.js作为现在很火的一个前端框架,...
    Shaw_Chen阅读 1,811评论 0 2
  • 第十一天:完成购物车需求 一、购物车需求分析 1、天猫式添加购物车商品:在添加商品到购物车之前,要先判断用户是否已...
    ArcadeChan阅读 123评论 0 0
  • 一、启动项目 1. 安装脚手架和依赖 首先保证你的电脑上有node和npm,版本越新越好 npm install...
    在路上919阅读 934评论 0 2