接之前的easyui项目，将商品加入购物车
代码块实现过程
将商品存到服务器，对其进行下单以及其他操作
我要评论<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="z" uri="/tanle" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>搜索页</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/fg.css" />
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/search.js"></script>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<div class="container">
<!-- 横幅 -->
<div class="row">
<div class="col-sm-4">
您好，欢迎来到网上书城！
</div>
<div class="col-sm-4 col-sm-offset-4">
<a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i>
</div>
</div>
<!-- 搜索栏 -->
<div class="row">
<div class="col-sm-12 search-parent">
<!-- 本来这里应该放一张背景图的 -->
<div class="search"></div>
<input type="text" id="book_name" name="name" value="" />
<button type="button" class="btn btn-primary">搜索</button>
</div>
</div>
<!-- 主内容区 -->
<div class="row content">
<div class="col-sm-3 l-content">
<ul class="list-group c-category ">
<li class="list-group-item" style="color: white;">书籍分类</li>
</ul>
</div>
<c:forEach items="${cidbook }" var="i">
<div class="col-sm-9">
<div class="media">
<img src="${pageContext.request.contextPath }${i.image }" class="align-self-center mr-3" alt="...">
<div class="media-body">
<p>书名：${i.name }</p>
<p>作者：${i.author }</p>
<p>价格：￥${i.price }</p>
<p>出版社：${i.publishing }</p>
<p>简介：${i.description }</p>
<p>
<a href="${pageContext.request.contextPath }/shopping.action?methodName=shopping&name=${i.name }&price=${i.price }" class="btn btn-danger" style="width: 150px;">加入购物车</a>
<!-- <button class="btn btn-danger" style="width: 150px;" onclick="addShopCar(this);">加入购物车</button> -->
<button class="btn btn-danger" style="width: 150px;">去结算</button>
</p>
</div>
</div>
</c:forEach>
</div>
<z:page pageBean="${pageBean }"></z:page>
</div>
<!-- 底部版权 -->
<div class="row">
<div class="col-sm-12 text-center">
Copyright 2020 教育，版权所有
</div>
</div>
</div>
</body>
</html>
点击跳转加入购物车
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/fg.css" />
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/shopping.js"></script>
</head>
<body>
<div class="container">
<!-- 横幅 -->
<div class="row">
<div class="col-sm-4">
您好，欢迎来到网上书城！
</div>
<div class="col-sm-4 col-sm-offset-4">
<a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i>
</div>
</div>
<!-- 搜索栏 -->
<div class="row">
<div class="col-sm-12 search-parent">
<!-- 本来这里应该放一张背景图的 -->
<div class="search"></div>
<input type="text" id="book_name" name="name" value="" />
<button type="button" class="btn btn-primary">搜索</button>
</div>
</div>
<!-- 主内容区 -->
<div class="row content">
<div class="col-sm-3 l-content">
<ul class="list-group c-category ">
<li class="list-group-item" style="color: white;">书籍分类</li>
</ul>
</div>
<div class="col-sm-9">
<table class="table">
<thead class="thead-dark">
<tr style="background-color: papayawhip;">
<th scope="col">书名</th>
<th scope="col">单价</th>
<th scope="col">数量</th>
<th scope="col">小计</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${shopping }" var="i">
<tr>
<td>${i.name }</td>
<td>${i.price }</td>
<td><input type="text" value="${i.num }"/></td>
<td>${i.total }</td>
<td>
<a href="#">删除</a>
<a href="#">更新</a>
</td>
</tr>
</c:forEach>
<tr>
<td colspan="5">
<div class="btn btn-danger" style="width: 200px;">清空购物车</div>
<div class="btn btn-danger shop-table-tab" style="width: 200px;">继续购物</div>
<div class="btn btn-danger" style="width: 200px;">去结算</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 底部版权 -->
<div class="row">
<div class="col-sm-12 text-center">
Copyright 2020 教育，版权所有
</div>
</div>
</div>
</body>
</html>
后台代码块实现操作
package com.tanle.web;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.tanle.entrty.User;
import com.tanle.framework.ActionSupport;
import com.tanle.framework.ModelDriven;
import com.tanle.vo.ShoppingVo;
public class ShoppingAction extends ActionSupport implements ModelDriven<ShoppingVo>{
private ShoppingVo shoppingVo=new ShoppingVo();
@Override
public ShoppingVo getModel() {
// TODO Auto-generated method stub
return shoppingVo;
}
public String shopping(HttpServletRequest req,HttpServletResponse resp) throws UnsupportedEncodingException {
//给用户定义一个唯一的编号
String shopcar="shopcars_";
User user = (User) req.getSession().getAttribute("User");
String name=java.net.URLDecoder.decode(req.getParameter("name"),"utf-8");
shoppingVo.setName(name);
//上下文
ServletContext ctx = req.getServletContext();
//加用户id
//List<ShoppingVo> shopping=(List<ShoppingVo>) ctx.getAttribute(shopcar+user.getId());
List<ShoppingVo> shopping=(List<ShoppingVo>) ctx.getAttribute("shopping");
if(shopping == null || shopping.size() == 0) {
//第一次添加购物的时候，购物车是没有商品的
//shopping.add(shoppingVo);
//ctx.setAttribute("shopping", shopping);
shopping=new ArrayList<ShoppingVo>();
}else {
//第二次添加商品的时候，购物车中是有商品的
//shopping.add(shoppingVo);
}
//获取传输的值
try {
shopping.add(shoppingVo);
ctx.setAttribute("shopping", shopping);
req.getRequestDispatcher("/jsp/shopping.jsp").forward(req, resp);
} catch (ServletException | IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}
本文地址：https://blog.csdn.net/Smootht/article/details/107291278
如对本文有疑问， 点击进行留言回复！！
Postgresql结合postgis使用java的JDBC连接
网友评论