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

  • 加入购物车模块——实时更新数据库, 进行实时访问
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值设置自动加一
    在这里插入图片描述3. com.demo.po中新建Cart.java添加Cart属性(名称与数据库相同)并添加 get、set、tostring方法
    注意: 导包时导util包.在这里插入图片描述
  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 (通常不写)

  • 普通请求的种类:

直接改变地址

链接点击,跳转页面

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

发布了192 篇原创文章 · 获赞 204 · 访问量 42万+

猜你喜欢

转载自blog.csdn.net/qq_37486501/article/details/93964981