在开发完通用模块和用户管理之后，就是主页面、列表页、详情页、购物车页的开发了。
主页面主要是静态页面，主要的实现有一个轮播图比较难，采用的是jQuery的一个插件做的，叫unslider。
然后是各个分类栏，点击进去就到了列表页，列表页里面的数据是根据后台传的参数通过html模版渲染出来的。根据点击各个分类传进去的参数（href=’./list.html？keyword=？||category=？’）提交后台提取相应列表。列表页里面有个比较复杂的实现是分页，上一页 1 2 3 下一页 2/3 有难度。
点击商品就到了商品详情页，点击之后也是传参到后台（href=’./detail.html？productId=？），后台再把详细信息返回来，用html模版渲染。
商品里面有加入购物车，点击之后跳到结果页，通过结果页可以进入购物车页。里面有已添加的商品，功能也比较多，有全选，删除单个商品，删除选中商品，加减数量。
一个一个来吧。
一、主页面
这个hexo-admin真是有问题，早上写了一大段再打开又没，真是醉了。算了算了，再写一遍吧。这个页面主要都是静态的东西，跟后台也没什么交互，主要就是一些a标签的href，要带参数，比如手机的href就是’./list.html?keyword=手机’。下个页面是要根据这个参数来决定显示什么东西的，所以这个很重要。
布局啥的就不说了，主要是一个轮播图的展现，使用的是jquery的一个插件叫unslider，我们并没有直接用外部链接的方式引入它，而是将它内嵌到我们的工具（util）中以提高性能，在工具文件夹中我们建了一个文件夹用来存放unslider的代码，里面有三个文件，源码、index.js和index.css，其中index.js用来把其他两个部分require到一起，这样我们引用的时候就只需要引用index.js即可。
官方文档对于unslider的用法也很明确，按着官方文档走就行。注意的是，这个插件的html我们是用的渲染的方式插入到index页面中的。然后这个插件还有底下的点点点和左右移动的功能，官方文档都有教如何使用，只是css样式需要自己动一下。
二、列表页
从index页面可以直接点击商品或分类或直接搜索即可进入列表页，列表页需要渲染的就是下面的商品，按价格排序或默认排序是固定在页面中的。这个页面的业务逻辑是什么呢？1、接口调用渲染。2、点击排序。3、分页逻辑。
1、渲染。首先要在一开始定义一个data对象（接口需要的参数），用来调用接口，也方便更改其中的数据。接口传回来的数据用模版渲染出来。
2、排序是点击之后加class或去除class，显示active或没有，然后把传给接口的数据orderBy改成相应的值，再重新渲染，后台返回相应排序后的数据。
3、分页逻辑挺难的，，，，以后补
三、详情页
点击产品就进入了产品详情页，根据a标签的参数调给后台接口决定返回哪些参数。再用模版渲染出来。业务逻辑有
1、鼠标移动到缩略图，将其在大图中显示出来，这个比较简单，找到缩略图的src，找到大图的src，替换即可。
2、点击数量加减，也比较简单，点击带有plus类的，加一，但注意不能大于库存；点击minus类减一，但不能小于1。
3、加入购物车
调用接口，把productId和count传给后台，定向到result页。
四、购物车页
购物车页的功能点也挺多的，渲染是肯定的，还有1、全选，单选，2、选定删，单删，3、数量加减，4、点击结算。
首先渲染，调用接口，渲染主页面并同时将导航栏中的购物车数量方法重新调用。同时还要把接口返回的数据缓存到data对象中。
1、全选单选。
首先是单选按钮：这个是需要调用后台接口的，如果点击的复选框已选中，则调用select接口取消选中并重新渲染页面一次，反之调用unselect接口。只要点复选框就需要重新渲染页面一次。
然后是全选按钮：同上。不过接口调用的是selectAll和unselectall。
2、选定删除。
也是一个接口，传给接口的参数是productId，可以是多个，使用‘，’分隔，所以只要得到点击删除按钮所对应的productId即可。
3、数量加减。
点击加减，并记录数量，将productId和count传给接口并渲染即可。
4、点击结算。
点击按钮，如果有价格即定向到确认页。
