我学会了
对于项目的模块化管理:把每一个不同模块的代码存放在对应的文件夹中,编写代码和项目出问题之时可以快速准确的找到报错的模块,方便修改和管理。
对于交互的问题:我们写的项目都是要提供给用户使用的,需要提供较好的用户体验,数据请求和页面跳转等都需要考虑用户使用的情况,我们选择使用加载图片对页面覆盖,切换页面后对覆盖页面进行隐藏处理很好的解决了这个问题,提高了用户体验
对于请求数据的问题优化:原先使用原生的ajax请求需要每一次都根据不同的情况编写不同的请求方法,使用了老师封装好的库request.js,然后根据api接口的前面相同性封装号一个又一个的方法,对请求数据的地址传值,使用对象拼接字符串的方式传入参数,对于数据的地址不同,我们仅仅需要写一个简单的方法,切换一个参数就可以进行引入调用完成数据的请求
对于退出登录,登录和注册:使用了正则表达式,验证了代码长度以及格式,对于汉字的的正则表达式 [\u4e00-\u9fa5] 拓展了我们的正则表达式的使用范围,对于注册需要对数据的传值给服务器,判断服务器的返回码进行提示注册成功与否的提示,登录成功需要添加一个token,验证token是否存在,显示登录界面和未登录页面。退出登录删除本地保存的token,显示未登录界面。
对于详细页面的跳转设置:需要对页面每一个元素进行绑定,跳转后需要对新页面的进行请求数据的渲染,页面传值的方法有两种,1.使用url地址传值,在新页面获取url地址进行字符转的截取获取页面的传值,2.使用本地储存,存储一个字符串或对象,并赋值,在新页面获取本地存储的数据,进行使用获取的数值,使用跳转的方式一般使用location.href = ''新的网址'即可完成
页面布局合理性:回到顶部按钮需要在右下角,当页面下滑到一定的高度时才出现,当回到顶部时隐藏回到顶部按钮,楼层滚动时需要将不同的楼层设置到左中部比较美观。
你的进步有哪些
对于多个页面的关联性设计的掌握,每个页面需要的界面设计,数据渲染区域,和数据请求,存储传值都有比较好的分类处理,虽然都在一个界面中,封装不同的方法,加以注释可以理解代码每一块的的功能,使用封装的方法可以在同一个作用域中数据渲染完成时调用该方法,不会出现找不到对应的数据,标签的问题,事件绑定需要理解需要准确的传值。
数据渲染:对于数据的请求把一些页面不需要的数据,但是要用的的值保存为标签的自定义样式,当需要使用时,根据 getAttrbute('data-id')获取对应的数据,实现例如,懒加载,图片的地址切换,以及购物车的加减删除按钮给予该商品的id值可以更方便的对商品数量进行管理 和删除。
你哪里不会
我对于组件的编写有一定困难,可以很好的使用组件,但是对于复杂的组件就看不懂,理解不了。
购物车的数据结算和计算总价,以及对于商品全选也没有实现。
页面滚动时元素的位置监听不太准确
总结项目中有那些业务,你是符合实现的
主页,实现无缝轮播图,使用外边距(获取图片宽度)实现切换图片,根据复制一张图片在最后,播放到最后一张图片时,瞬间切换到第一张图片,实现无缝轮播,页面实现渲染数据,请求数据,渲染到页面,下拉到底部再次发送请求获取数据,使用计时器延时几秒后 再次添加数据到底部。渲染数据时并添加点击跳转事件并把id值添加到url,方便详细页面的请求数据
详细页面,使用url地址中的id值请求数据,渲染到页面:放大镜:两张图片,加一个蒙版监听鼠标位置,展示放大原始图片的具体细节,点击下面的其他图片同时切换两张图片。点击添加购物车发送添加商品id和token发送请求,获取返回值提示是否添加成功和失败。
分类页面,获取一级标题,获取对应的数据,数据先获取二级标题并存入数组,使用for循环渲染数据,判断数据是否在对应的二级标题下
注册登录页面:使用了正则判断输入的数据格式是否正确,注册发送注册请求,成功后跳转到登录页面,登录页面登陆成功在本地存储token数值,在跳转到主页推荐列表,当本地存储中存在token值时,隐藏登录和注册页面,展示购物车和退出登录页面。
购物车:根据token值获取用户的购物车数据进行渲染数据,加减删除按钮对数据的数量改变,数据不能小于0,删除按钮删除用户数据,每一次按钮点击都会发送一次请求,请求值为1就添加 ,为0即跳出弹窗添加失败,不进行数据更改
总结你写的项目中有那些技术亮点并详细说明
自己成功的完成了整个项目,对于各个模块进行了整合代码不会冗余,对于api组件手写了购物车的请求操作。