良仓商城项目总结

这一周我们组队进行了良仓商城项目，通过老师提供的商城api接口，我们完成了注册页，登录页，首页，各分类页，商品详情页，搜索页，购物车和结算页等十几个页面，页面内容都是动态的，利用ajax从后端获取的数据。另外，上线的功能我们也做得比较完善。
这几天，我们从了解甚少到现在的比较熟练，技能成长得还是比较完善的，页面的排版，jquery的应用，ajax请求数据的处理，这些能力都得到了较大的增强。
这里是我们项目上线的地址：firehoo.top/web1708/hz-liangcang/index.html。
以下是部分截图

image.png

image.png

image.png

image.png

image.png

良仓商城项目主要是电商这方面的，跟用户的互动是比较多的，而且里面的数据是非常灵活的，更新也是很自由。
整个项目中，ajax的应用比较重要，get和post用到的地方各有不同。注册页面通过正则表达式和验证码的结合，符合要求的账号密码会发到后端数据库。然后通过登录进入到首页，另外每个分类页都是有用户是否登录的检测的，这里的检测我们是用localstorage来保存用户名和密码的，如果存在这样的本地存储，那么头部就显示用户名，表示已登录状态。
我们项目的分类页还是比较完整的，不过由于虚拟的商城接口数据比较少，所以商品的选择比较少，但是这不影响我们的制作。
其实分类页就是用ajax来请求商品数据然后进行排版，主要方式是get和post，项目中我们直接引用jquery中get和post函数，举个例子：

$.get("http://h6.duchengjiu.top/shop/api_goods.php",{pagesize:18,page:3},function(obj){
        var brandArr=["Burj Al-Arab","Rolex","Chanel","Tiffany","Louis Vuitton","Hennessy","Ralph Lauren"]
        var oUl=document.createElement("ul");
        $("#GoodShow").append(oUl);
        for(i=0;i

上面就是通过get来获取后端数据库里面的商并按照顺序用li标签排列。
这样就形成了上面低张图的效果。
ajax获取数据和页面排版还是比较容易的，这次我做出了购物车的效果，这个还是有点难度的。代码如下：

if(localStorage.getItem("username")!=""&&localStorage.getItem("password")!=""){
    $.post("http://h6.duchengjiu.top/shop/api_user.php",{status:"login",username:localStorage.getItem("username"),password:localStorage.getItem("password")},function(obj1){
        $.post("http://h6.duchengjiu.top/shop/api_cart.php?token="+obj1.data.token,function(obj){
            if(obj.code==0){
                var oUl=document.createElement("ul");
                var priceArr=[]; //每个商品小计数组
                var inputArr=[];//每个商品选中框。
                var aa=[];//因为每个商品有不同的购买数量和单价，所以防止for循环异步事件绑定问题，申明几个数组来储存这些数据。

                $("#goods").append(oUl);//添加ul；

                for(i=0;i

购物车的计算逻辑比较简单，不过如何让计算总价的效果如我们所想的一样，就比较难了，因为每个商品的单价、数量和小计都是不同的，还要检测这个商品是否被勾选，所以理清这其中的关键才能让计算变得准确。
我的思路是将所有的单价，购买数量、小计以及勾选框保存在几个数组里面，这样就能知道每个商品的状态，比如各商品小计=购买数量x它的单价，然后判断是否被勾选，如果勾选，就将其小计算入总价，如果没有，就让其小计字面量为单价x数量，不过累加到总价里的小计值为0，这样就能准确地算出总计，以及完成购物车了。
总之，良仓项目告一段落，自我感觉提升还是蛮大的，ajax的应用也比较熟练了，页面的排版也得到了回顾，jquery的应用也很灵活了，任务虽然较重，不过收获确实很大。
由于项目较大，一些项目的编写重复工作很多，所以这里就不能介绍完全了。希望大家喜欢。