欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Easyui项目之加入购物车

程序员文章站 2022-03-13 17:52:20
Easyui项目之加入购物车前言1.加入购物车2.显示结果3.总结前言接之前的easyui项目，将商品加入购物车1.加入购物车代码块实现过程将商品存到服务器，对其进行下单以及其他操作<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/js...

Easyui项目之加入购物车

前言

接之前的easyui项目，将商品加入购物车

1.加入购物车

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>&nbsp;&nbsp;
									<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;
	}
}

2.显示结果

Easyui项目之加入购物车

3.总结

  1. 理清思路，在进行编码
  2. 谢谢观看！有不足欢迎指出！

本文地址：https://blog.csdn.net/Smootht/article/details/107291278

上一篇： 委托与lambda关系

下一篇： NET 泛型，详细介绍

推荐阅读