【分享】自己写了PC端电商B2C项目，可在线打开奥

一曰：“温故而知新，可以为师矣”，故用原生面向dom的方式，写了个东西，对web初学者还是很有学习意义的奥！

1. 仿360商城写的demo，完成度较高。欢迎大神路过抛砖！ 可通过BAE在线链接直接打开： http://qianweiproject.duapp.com/html/index.html 在线发布版本已经gulp压缩打包，喜欢的话可以通过我的github下载源码看看： https://github.com/WesleyQ5233/360Mall.git 记得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作为页面间的数据存取的媒介。

5）跨域：首页楼梯十一楼的div所用数据是通过jsonp加载进来的。所用到的PHP文件我已经放在BAE云端，大家也可以看看我写的接口数据，链接: http://qianweiproject.duapp.com/data/kuayu.php ;

6）ajax：对于页面中相同的部分，单独写成一个html文件（仅包括样式css、html、script，去掉头部尾部等多余的部分，然后通过ajax加载进来； PS：关于ajax运行环境像Hbuilder、Webstorm等自带ajax运行环境，也可以自己下载个软件搭建本地服务器。
采用的ajax 是我自己封装的。主要就初始时写下兼容、然后封装个get 、post 方法及各自成功是的回调函数，喜欢的话 可以自己写个。

7）其他：商品列表的分页采用了插件，主要是模拟省略号的功能，自己写的话没有省略号，
插件简洁易用；点击具体某分页按钮时 有个滚动到页面顶端的逻辑，不要忘记吆；并增加了个点击飞入购物车的效果，（虽然右边侧栏并没有购物车，哈哈）增加交互性。
对于布局一样但是数据内容不一样的页面结构统一采用动态拼接字符串的方式生成，也可以通过插件百度template http://tangram.baidu.com/BaiduTemplate/ 实现，这样可避免自己拼接易产生错误的缺陷，喜欢的话可以去自己研究下 很简单的 跟angular的数据处理方式不谋而合。

  虽然是PC端项目，但是也可以通过手机扫描二维码打开奥！（二维码生成网站:草料二位码）

1471534810.png