一曰:“温故而知新,可以为师矣”,故用原生面向dom的方式,写了个东西,对web初学者还是很有学习意义的奥!
- 仿360商城写的demo,完成度较高。欢迎大神路过抛砖! 可通过BAE在线链接直接打开: 在线发布版本已经gulp压缩打包,喜欢的话可以通过我的github下载源码看看: 记得star一下吆。
PS:如果打不开的话,想必是我的BAE账户余额不够了!项目中用到的图片格式Firefox支持的不太好,用Chrome和360打开就没有问题。
2) 主要功能及技术点:购物车的增删改查、商品详情页的分页效果、登录注册逻辑的实现、二级菜单、吸顶、首页的楼梯效果、ajax、跨域、轮播图、选项卡、代码封装、css3悬浮效果、放大镜并根据用户习惯去完善细节等;
3)整体构架:对于页面中相同的部分,单独写成一个html文件(仅包括样式css、html、script,去掉头部尾部等多余的部分,然后通过ajax加载进来; PS:关于ajax运行环境像Hbuilder、Webstorm等自带ajax运行环境,也可以自己下载个软件搭建本地服务器;)
实现页面:首页、商品列表、商品详情、购物车、结算页面、注册、登录;
快捷指南:a)点击右上角的“商品列表”“商品详情”“注册”“登录”“购物车”等图标进入相应的页面;b)通过首页直接进图商品详情页点击加载购物车不做任何数据处理 这是我写的初始静态页面。c)从商品列表页面点击进入商品详情页面则是动态加载的数据。原始数据来源是我写的json数据放在项目的data文件夹立,并通过ajax加载动态拼接到商品列表页面结构中。d)
我一般把对应的JS代码放在对应的html结构下面,以方便查找个人习惯;
4)页面传值:采用cookie方式实现不同页面间数据的传递。
一个cookie存所有注册账号、
一个cookie存当前登录账号、
并根据当前登录账号拼接购物车cookie 这样就可以实现不同账号同时访问而不产生冲突了。
PS:对于没有登录的情况统一设置一个名字为mycartadmin的cookie进行存储。
这里有个梗就是多人在同一台电脑上浏览而且都没有登录情况下数据存储的矛盾。
解决方法一点击购物车的时候必须登录,显然这个不太合理;
解决方法二此时再根据ip地址和网站停留时间综合判断下;
还有个cookie用来弥补解决商品详情间的情况。
也可以使用localStorage,上限为5M 而cookie为4KB作为页面间的数据存取的媒介。
6)ajax:对于页面中相同的部分,单独写成一个html文件(仅包括样式css、html、script,去掉头部尾部等多余的部分,然后通过ajax加载进来; PS:关于ajax运行环境像Hbuilder、Webstorm等自带ajax运行环境,也可以自己下载个软件搭建本地服务器。
采用的ajax 是我自己封装的。主要就初始时写下兼容、然后封装个get 、post 方法及各自成功是的回调函数,喜欢的话 可以自己写个。
虽然是PC端项目,但是也可以通过手机扫描二维码打开奥!(二维码生成网站:草料二位码)
1471534810.png