Java+SSM框架实现web商城项目 笔记（第三天）实现前后端互通

2021.11.04

项目布置的第3天。

任务目标：商品页的完善、点击商品跳转到相应的详情页

1.1将获取的信息传递到详情页：

//进入商品详情页 ① 根据id 查到商品
@RequestMapping("/choicePro")
public String choiceProduct(Integer pid,Model model,HttpSession session){
    Product product = productService.selectProById(pid);
    model.addAttribute("product",product);
    User user = (User) session.getAttribute("user");
    model.addAttribute("user",user);
    return "productDetial";
}

1.2做美工，把信息展示

库存一共存在三种情况，等于0，小于10，大于10。 从商品列表中获取库存信息。

在JavaScript的页面初始化window.onload中设置相应的效果显示在地址后面

window.onload = function () {
    let stock = ${product.stock};//库存信息
    let count = document.getElementById("count"); //获取显示信息的span的id
    let buy_btn = document.getElementById("buy_btn");//获取提交订单的按钮

    if (stock == 0){//判断 库存为0时
        count.style.color = "red";
        count.innerText = "您要的宝贝已卖光~";
        //库存为0时 不让点击
        buy_btn.className +="disabled";
    }else if (stock <=10){//判断 库存小于10时 变成黑色
        count.style.color = "#000000";
        count.innerText = "库存紧张";
    }else{					//其他情况则显示库存充足
        count.style.color = "#999999";
        count.innerText = "库存充足";
    }
}

在设计提交订单左边的效果时，使用了javascript脚本进行调控

首先 给出默认值为1，点击

点击加号时，框中的值就加一，点击减一的时候就减一，最后设置了最大的上限为商品的库存

代码如下：

function addAmount() {
    let amount = document.getElementById("proAmount");
    if (amount.value >= ${product.stock}){//当值大于>=库存时，值变为库存的值
        amount.value  = ${product.stock};
    }else if(amount.value==''){
        amount.value = 1;
    }else {//如果直接写 amount.value +=1 只是在框中的值后面拼接'1' 而不是加1 所以这里进行转整
        amount.value = parseInt(amount.value)+1;
    }
}
function minusAmount() {
    let minus = document.getElementById("minus");
    let amount = document.getElementById("proAmount");
    if (amount.value==1 || amount.value=='' || amount.value<=0){
        //这里的情况表示，值为1 或用户自己输入负数，或不输入时 默认把值改为1
        amount.value = 1;
    }else{
        //其他情况则为正常的-1
        amount.value -= 1;
    }
}

1.3 在Mapper接口中创建相应的方法

提交订单会进行两个操作，一个是向订单表中插入一条信息，第二个就是下单成功后，购买的数量在商品表中减去相应的库存，于是分别在 mapper接口中创建方法：

//对应用户下单 减去响应的库存
int changeProAmount(Map<String,Object> map);
//另一个接口的方法，写在这里方便查看
//添加订单
int insertRecord(Map<String,Object> map);

接口完成后，在对应的映射xml文件中分别进行数据库的操作：

<!--  用户添加订单-->
  <insert id="insertRecord" parameterType="java.util.Map">
    insert into record
    <trim prefix="(" suffix=")" suffixOverrides=",">
      <if test="uid != null">
        uid,
      </if>
      <if test="pid != null">
        pid,
      </if>
      <if test="amount != null">
        amount,
      </if>
      <if test="pname != null">
        pname,
      </if>
      <if test="uname != null">
        uname,
      </if>
      <if test="uphone != null">
        uphone,
      </if>
      <if test="address != null">
        address
      </if>
    </trim>
    <trim prefix="values (" suffix=")" suffixOverrides=",">
      <if test="uid != null">
        #{uid,jdbcType=INTEGER},
      </if>
      <if test="pid != null">
        #{pid,jdbcType=INTEGER},
      </if>
      <if test="amount != null">
        #{amount,jdbcType=INTEGER},
      </if>
      <if test="pname != null">
        #{pname,jdbcType=VARCHAR},
      </if>
      <if test="uname != null">
        #{uname,jdbcType=VARCHAR},
      </if>
      <if test="uphone != null">
        #{uphone,jdbcType=VARCHAR},
      </if>
      <if test="address != null">
        #{address,jdbcType=VARCHAR}
      </if>
    </trim>
  </insert>

商品表中库存减去订单购买的数量：

<!--  对应用户下订单 减去相应的库存-->
  <update id="changeProAmount" parameterType="java.util.Map">
    update product set stock  = stock - #{amount} where pid = #{pid}
  </update>

然后通过对应的Service层调用接口Mapper中的方法，最后交给Controller（控制层）进行交互

//用户添加新订单
@RequestMapping("/insertRecord")
public String insertRecord(String uid,String pid,String amount,String pname,
                           String uname,String uphone,String address){
    Map<String,Object> map = new HashMap<>();
    map.put("uid",uid);
    map.put("pid",pid);
    map.put("amount",amount);
    map.put("pname",pname);
    map.put("uname",uname);
    map.put("uphone",uphone);
    map.put("address",address);
    recordService.insertRecord(map);
    //这里对应着商品表中 减去相应的库存
    productService.changeProAmount(map);
    return "redirect:/pro/list";
}

提交完订单后会自动回到商城页面

我们在数据库中查看记录表(订单表)：

最后一个字段为status（订单的状态）

由用户发起的订单，默认状态为0 代表未发货的状态，管理员可以通过修改订单状态为1 即是模拟发货的流程