这一周我们组队进行了良仓商城项目，通过老师提供的商城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<obj.data.length;i++){
(function(){
var oA=document.createElement("a");
oA.href="";
var oLi=document.createElement("li");
var oImg=document.createElement("img");
oImg.src=obj.data[i].goods_thumb;
oLi.appendChild(oImg);
oUl.appendChild(oA);
oA.appendChild(oLi);
if((i+1)%3==0){
$(oLi).css({marginRight:0});
};
//下面是每张图的详情介绍。
var Price=obj.data[i].price;
var oBox=document.createElement("div");
$(oBox).addClass("text");
var oH3=document.createElement("h3");
oH3.innerText="￥"+Price;
$(oBox).append(oH3);
$(oLi).append(oBox);
var name=obj.data[i].goods_name;
var oH4=document.createElement("h4");
oH4.innerText=name;
$(oBox).append(oH4);
var desc=obj.data[i].goods_desc;
var oDesc=document.createElement("div");
oDesc.innerText=desc;
$(oBox).append(oDesc);
$(oBox).mousemove(function(){
$(oBox).css({"opacity":1});
})
$(oBox).mouseout(function(){
$(oBox).css({opacity:0});
})
//加上商家信息，随机数。
var oBrand=document.createElement("div");
$(oBrand).addClass("who");
oLi.appendChild(oBrand);
var Bimg=document.createElement("img");
$(Bimg).addClass("Bimg");
var Bspan=document.createElement("span");
var z=parseInt(Math.random()*7);
Bspan.innerText=brandArr[z];
var x=parseInt(Math.random()*300+500);
var y=parseInt(Math.random()*300+300);
Bimg.src="http://imgs-qn.iliangcang.com/ware/brand/"+x+".jpg";
oBrand.appendChild(Bimg);
oBrand.appendChild(Bspan);
var oStar=document.createElement("div");
$(oStar).addClass("star")
var Simg=document.createElement("img");
var Stext=document.createElement("div");
Stext.innerText=y;
$(Simg).addClass("Simg");
Simg.src="http://imgs-qn.iliangcang.com/images/default/heart_gray20_18.png";
$(oStar).append(Simg);
$(oStar).append(Stext);
oBrand.appendChild(oStar);
})(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<obj.data.length;i++){
(function(){
var id=obj.data[i].goods_id;
var oLi=document.createElement("li");
var oImg=document.createElement("img");
var oInput=document.createElement("input");
$(oInput).css({position:"absolute",top:"0px",left:"20px"})
oInput.type="checkbox";
oInput.name="goods";//让每个复选框name统一，便于后面全选。
oImg.src=obj.data[i].goods_thumb;
$(oLi).append(oInput);
$(oLi).append(oImg);
$(oUl).append(oLi);
inputArr[i]=oInput;
var detail=document.createElement("div");
$(detail).css({width:"300px",height:"100%",fontSize:"13px",color:"#999",marginLeft:"20px"});
detail.innerText=obj.data[i].goods_name;
$(oLi).append(detail);//添加各商品详情。
var shuliang=document.createElement("div");
$(shuliang).css({color:"#444",marginLeft:"60px"});
var plus=document.createElement("span");
plus.innerText="+";//设置加号。
var shu=document.createElement("span");
aa[i]=shu;//将购买数量分别储存起来。
var number=obj.data[i].goods_number;
shu.innerText=number;
var min=document.createElement("span");
min.innerText="-";//设置减号。
$(shuliang).append(min);
$(shuliang).append(shu);
$(shuliang).append(plus);
$(oLi).append(shuliang);
var price=document.createElement("span");
$(price).css({marginLeft:"90px",display:"inline-block",width:"80px"})
price.innerText=obj.data[i].goods_price;
$(oLi).append(price);//添加每个商品的单价。
var tPrice=document.createElement("span");//tPrice代表每行的小计
$(tPrice).css({marginLeft:"70px",display:"inline-block",width:"80px"})
tPrice.innerText=parseInt(obj.data[i].goods_price*number).toFixed(2);//计算商品小计
$(oLi).append(tPrice);
priceArr[i]=tPrice.innerText;//将每个商品小计添加到数组里面。
var del=document.createElement("span");//删除键的设置及排版
del.innerText="删除";
$(del).css({color:"skyBlue",cursor:"pointer",marginLeft:"70px"})
$(oLi).append(del);
$(del).click(function(){
$.post("http://h6.duchengjiu.top/shop/api_cart.php?token="+obj1.data.token,{goods_id:id,number:"0"},function(){
$(oLi).hide();
})
})//远程删除购物车里面所选商品。
var totalPrice=0;//总价格,它的值赋予$("#price"),初始值为0；
//下面要计算总价，要先清楚让总价变化的只有两种：加减号和勾选框。
$(plus).click(function(){
totalPrice=0;//每次点击，让总价为0；
number= parseInt(number)+1;
shu.innerText=number;
tPrice.innerText=parseInt(price.innerText*number).toFixed(2);//更新购买数量。
for(n=0;n<inputArr.length;n++){
if(inputArr[n].checked){
priceArr[n]=parseInt(obj.data[n].goods_price*aa[n].innerText).toFixed(2);//判断某个商品是否勾选，如果勾选了就让这个商品的小计等于单价乘各自的数量。
}else{
priceArr[n]="0";//如果没有勾选，就让此小计为0，这边的小计是放到总计计算的数组里面的，页面显示的字面量还是单价*数量。
}
}
console.log(priceArr);
if(oInput.checked){
for(m=0;m<priceArr.length;m++){
totalPrice+=parseInt(priceArr[m]);
}
$("#price").text(totalPrice); //如果目前的商品是勾选状态，就遍历所有商品的小计，累加到商品总价中；如果没有勾选，它的改变不对总价造成影响。
}
})
//减号同理
$(min).click(function(){
totalPrice=0;
number= parseInt(number)-1;
if(number<1){
number=1;
}
shu.innerText=number;
tPrice.innerText=parseInt(price.innerText*number).toFixed(2);
for(n=0;n<inputArr.length;n++){
if(inputArr[n].checked){
priceArr[n]=priceArr[n]=parseInt(obj.data[n].goods_price*aa[n].innerText).toFixed(2);
}else{
priceArr[n]="0";
}
};
if(oInput.checked){
for(m=0;m<priceArr.length;m++){
totalPrice+=parseInt(priceArr[m]);
}
$("#price").text(totalPrice);
}
})
//这边是勾选框的操作
$(oInput).click(function(){
if(oInput.checked){
totalPrice=parseInt($("#price").text())+parseInt(tPrice.innerText);//如果选中，则添加到总价里面
}else{
totalPrice=parseInt($("#price").text())-parseInt(tPrice.innerText);//如果取消选中，则添加到总价里面。
}
$("#price").text(totalPrice);//更新总价
})
})(i);
//下面是全选功能。
$("#total").click(function(){
var cBox=document.getElementsByName("goods");
if($("#total").is(":checked")){
totalPrice=0;
for(j=0;j<cBox.length;j++){
cBox[j].checked=true;
totalPrice+=parseInt(priceArr[j]);//如果选中，就遍历加上所有商品的小计。
$("#price").text(totalPrice);
}
}else{
for(j=0;j<cBox.length;j++){
cBox[j].checked=false;
$("#price").text("0.00")//如果取消全选，就让总价为0；
}
}
})
$("#liji").click(function(){
localStorage.setItem("money",$("#price").text());//转到结算页面
})
}
}
})
})
}
购物车的计算逻辑比较简单，不过如何让计算总价的效果如我们所想的一样，就比较难了，因为每个商品的单价、数量和小计都是不同的，还要检测这个商品是否被勾选，所以理清这其中的关键才能让计算变得准确。
我的思路是将所有的单价，购买数量、小计以及勾选框保存在几个数组里面，这样就能知道每个商品的状态，比如各商品小计=购买数量x它的单价，然后判断是否被勾选，如果勾选，就将其小计算入总价，如果没有，就让其小计字面量为单价x数量，不过累加到总价里的小计值为0，这样就能准确地算出总计，以及完成购物车了。
总之，良仓项目告一段落，自我感觉提升还是蛮大的，ajax的应用也比较熟练了，页面的排版也得到了回顾，jquery的应用也很灵活了，任务虽然较重，不过收获确实很大。
由于项目较大，一些项目的编写重复工作很多，所以这里就不能介绍完全了。希望大家喜欢。
网友评论