电商实习项目第四天(6月27日)

た入场券 2021-12-20 14:03 187阅读 0赞

*  加入购物车模块——实时更新数据库, 进行实时访问

Project.jsp  新加JS:
    <script type="text/javascript">
    //全局变量
    //skuId
    var skuId;
    var colorId;
    
    function jianshao() {
    		//页面验证:alert("减少");
    		var num =$("#buy-num").val();
    		if(Number(num)>1){
    			$("#buy-num").val(Number(num)-1);
    		}
    }
    
    function zengjia() {
    	//页面验证:alert("增加");
    		//获取购买上限
    		var upperlimit;
    	<c:forEach items="${skus}" var="sku">
    		//alert("skuid"+skuId+"库存列表id"+${sku.id});
    		if(skuId==${sku.id}  ){
    			upperlimit=Number(${sku.upperLimit});
    			//alert(upperlimit);
    		}
    	</c:forEach>
    		var num =$("#buy-num").val();
    		if(Number(num)<upperlimit){
    			$("#buy-num").val(Number(num)+1);
    		}
    }
    function xianzhi() {
    	var num =Number($("#buy-num").val());//转换为数字
    	//1.输入<=0
    	if(num<=0){
    		$("#buy-num").val(1);
    	}
    	//2.输入>购买限制
    	//获取购买上限
    	var upperlimit;
    <c:forEach items="${skus}" var="sku">
    	//alert("skuid"+skuId+"库存列表id"+${sku.id});
    	if(skuId== ${sku.id} ){
    		upperlimit=Number(${sku.upperLimit});
    		//alert(upperlimit);
    	}
    </c:forEach>
    	if(num >upperlimit){
    		$("#buy-num").val(upperlimit);
    	}
    }
    //加入购物车——发ajax请求,到“/cart/addone”————jquery实现ajax请求
    function addCart(){
    	//AJAX格式:$.post( url,data,function);
    	$.post("<%=basePath%>cart/addone",{ 
    		id:1, 
    		buyerid:1,
    		productid:1,
    		num:100,
    		colorid:9,
    		sizename:'S',
    		babaprice:802, 
    		price:698.81,
    		isdel:0,
    		//createtime: null
    		},function(){
    		//发送AJAX请求成功后的回调函数
    	});
    }
    </script>

*  加入购物车: Product.jsp中需要传到所买商品的id, name/…

1.  新建数据库表bbs\_cart  
    id值设置自动加一  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDg2NTAx_size_16_color_FFFFFF_t_70]3. com.demo.po中新建Cart.java添加Cart属性(名称与数据库相同)并添加 get、set、tostring方法  
    注意: 导包时导util包.![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDg2NTAx_size_16_color_FFFFFF_t_70 1]
2.  com.demo.dao中新建CartDao.java接口

package com.demo.dao;
    import com.demo.po.Cart;
    public interface CartDao {
    //加入购物车——购物车表中添加信息
    	public void addone(Cart c);	
    }

1.  com.demo.mapper中新建CartMapper.xml  
    sql语句

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper SYSTEM "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    <mapper namespace="com.demo.dao.CartDao">
    <insert id="addone" parameterType="com.demo.po.Cart">
    	insert into bbs_cart values(null,#{buyerid},#{productid},#{num},#{colorid},
    	#{sizename},#{babaprice},#{price},#{isdel},#{createtime})
    </insert>
    </mapper>

1.  com.demo.service中新建CartService.java(接口) 和CartServiceImpl.java(类)

CartService.java(接口) 
    package com.demo.service;
    
    import com.demo.po.Cart;
    
    public interface CartService {
    	//加入购物车的方法
    	public  void addone(Cart c);
    }

CartServiceImpl.java(类)
    package com.demo.service;
    
    import org.mybatis.generator.codegen.ibatis2.dao.DAOGenerator;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import com.demo.dao.CartDao;
    import com.demo.po.Cart;
    @Service
    public class CartServiceImpl implements CartService{
    
    	@Autowired
    	CartDao dao;
    	@Override
    	public void addone(Cart c) {
    		// TODO Auto-generated method stub
    		dao.addone(c);
    	}
    }

1.  com.demo.action中新建CartController.java

package com.demo.action;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import com.demo.po.Cart;
    import com.demo.service.CartService;
    
    @Controller
    @RequestMapping("/cart")
    public class CartController {
    
    	@Autowired
    	CartService service;
    	@RequestMapping("/addone")
    	public String addone(Cart c)
    	{
    		//用set, get方法得到c
    		System.out.println(c);
    		service.addone(c);
    		//jsp的名字
    		return "aaa";
    	}
    }

*  JS:主要的标签

html标签——(改内容、文本)对 input和select不好用), 对 div a li / …好用

val标签——获取修改值 用法: `var num =$("#buy-num").val();`

*  Ajax: 页面上的局部刷新, 需要发Ajax请求(通过JS代码实现)——jquery实现ajax请求简便

实现: jsp页面到Controller.java中

运用: post方法 `$.post(url,data,callback,type)`

url: 请求往哪里发——string类型

data: 等待发送的参数——map

callback: 发送成功后,的回调函数 ——function

type: 返回内容的格式——string (通常不写)

*  普通请求的种类:

直接改变地址

链接点击,跳转页面

登陆界面(表单提交) 点登陆

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDg2NTAx_size_16_color_FFFFFF_t_70]: /images/20211220/8a2905be930648e9af89700eca309cc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDg2NTAx_size_16_color_FFFFFF_t_70 1]: /images/20211220/a5507ab574c44baea570ff7342e56139.png