Java进阶-案例训练（十九）(商城项目（4））

Daniel521-Spark

已于 2022-07-21 09:40:16 修改

阅读量614

点赞数

分类专栏： # 计算机（Java进阶）初级进阶阶段文章标签： java 开发语言 ajax servlet json

于 2022-07-10 23:23:38 首次发布

本文链接：https://blog.csdn.net/weixin_42171159/article/details/125701441

版权

计算机（Java进阶）初级进阶阶段专栏收录该内容

21 篇文章 1 订阅

订阅专栏

文章目录

一、前台首页--购物车模块
二、前台首页--订单模块及支付宝支付

一、前台首页–购物车模块

1.1 购物车业务分析

在这里插入图片描述

由上述分析可知，购物车页面就是由购物车和购物项组成

1.2 封装购物车实体类

创建购物项和购物车两个实体类 CartItem.java 😐 Cart.java

在这里插入图片描述

CartItem.java


package com.zql.pojo;

import java.io.Serializable;

/**
 * 	购物项

* author:Daniel

* version:1.0

*/

public class CartItem implements Serializable{
	
	
	private Product product;//商品： 图片  价格   名称
	private  int count;//数量
	private double subCount;//总价格
	public CartItem() {
		super();
		// TODO Auto-generated constructor stub
	}
	public CartItem(Product product, int count, double subCount) {
		super();
		this.product = product;
		this.count = count;
		this.subCount = subCount;
	}
	public Product getProduct() {
		return product;
	}
	public void setProduct(Product product) {
		this.product = product;
	}
	public int getCount() {
		return count;
	}
	public void setCount(int count) {
		this.count = count;
	}
	public double getSubCount() {
		
		//购物项 总价格 = 单价* 数量
		return subCount = (getProduct().getPrice()*getCount());
	}
	public void setSubCount(double subCount) {
		this.subCount = subCount;
	}
	@Override
	public String toString() {
		return "CartItem [product=" + product + ", count=" + count + ", subCount=" + subCount + "]";
	}
}

Cart.java


package com.zql.pojo;

import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.Map;

/**

* author:Daniel

* version:1.0
* 
* 	购物车

*/

public class Cart implements Serializable{
	/**
	 * 	要求： 
	 * 		1.购物车每次添加商品都会叠加上面，所以是有顺序的
	 * 		2.购物车 删除简单
	 * 		只有linkedHashMap  是有序  删除且简单的
	 * 
	 */
	
	
	//key   商品的id
	//value   购物项
	 private Map<String,CartItem>  cartMap = new LinkedHashMap();  //一个个的购物项
	 private double totalCount; //总价格（所有购物项价格之和）
	public Cart() {
		super();
		// TODO Auto-generated constructor stub
	}
	public Cart(Map<String, CartItem> cartMap, double totalCount) {
		super();
		this.cartMap = cartMap;
		this.totalCount = totalCount;
	}
	public Map<String, CartItem> getCartMap() {
		return cartMap;
	}
	public void setCartMap(Map<String, CartItem> cartMap) {
		this.cartMap = cartMap;
	}
	public double getTotalCount() {
		
		totalCount = 0.0; //当购物车全部删掉时，就会变成默认值0.0
		for(String key : cartMap.keySet()) { //遍历出key  即id
						
			CartItem cartItem = cartMap.get(key); //由key得到value的值即购物项的值
			
			totalCount += cartItem.getSubCount();  //购物总价格=小计 的综合
				 
		}
		return totalCount;
	}
	public void setTotalCount(double totalCount) {
		this.totalCount = totalCount;
	}
	@Override
	public String toString() {
		return "Cart [cartMap=" + cartMap + ", totalCount=" + totalCount + "]";
	} 
}

1.3 购物车实现（分两步走）

1.3.1 第一步：详情页到购物车

（1）在详情页 product_detail.jsp 中添加入口方法

在这里插入图片描述

<!-- 跳转到购物车页面 -->
    <script type="text/javascript">
    
		    function addCart(){
		        
		       /* 商品pid */
		      // var pid = ${p.pid} 
		      // alert(pid); //测试看是不是pid
		      var count = $("#count").val();
		      //alert(count);//测试看是不是能拿到数量
		      
		      location.href="${pageContext.request.contextPath}/order?method=order&pid=${p.pid}&count="+count;
		      
		    }

    </script>

（2）分别创建

OderServlet.java、OderService.java、OrderServiceImpl.java、OrderDao.java、OrderDaoImpl.java

(3) OrderServlet.java


package com.zql.web.servlet;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zql.pojo.Cart;
import com.zql.pojo.CartItem;
import com.zql.pojo.Product;
import com.zql.service.OrderService;
import com.zql.service.ProductService;
import com.zql.service.impl.OrderServiceImpl;
import com.zql.service.impl.ProductServiceImpl;

/**

* author:Daniel

* version:1.0

*/

@WebServlet("/order")
public class OrderServlet extends BaseServlet{
	
	
	public String order(HttpServletRequest request, HttpServletResponse response)throws Exception {
		
		//创建购物项
		//1.获取商品pid
		String pid = request.getParameter("pid");
		//获得购物数量
		String count = request.getParameter("count");
		
		//创建商品对象  获得商品名称  价格等
		//商品业务
		ProductService ps = new ProductServiceImpl();
		
		Product product = ps.findProductdetailByPid(pid);
		
		//2.购物项
		CartItem cartItem = new CartItem();
		
		cartItem.setProduct(product);
		cartItem.setCount(Integer.parseInt(count));
		
		//创建购物车
		 Cart cart = getCart(request);
		 
		 //业务处理  将购物项添加到购物车中
		 OrderService os = new OrderServiceImpl();
		 
		os.addCart(cart,cartItem);
		
		//现在购物车有了那就跳转到购物车页面
		return "/cart.jsp";
	}
	
	public Cart getCart(HttpServletRequest request) {
		
		//获得域中的购物车
		Cart cart = (Cart) request.getSession().getAttribute("cart");
		//判断受否有购物车
		if(cart == null) {
			//为空则创建购物车并且存入到域中
			cart = new Cart();
			
			request.getSession().setAttribute("cart", cart);
			
		}
		//如果有的话，那就叠加呗
		
		return cart;
		
	}
}

(4) OrderService.java

void addCart(Cart cart, CartItem cartItem) throws Exception;

(5)OrderServiceImpl.java


package com.zql.service.impl;

import com.zql.pojo.Cart;
import com.zql.pojo.CartItem;
import com.zql.service.OrderService;

/**

* author:Daniel

* version:1.0

*/

public class OrderServiceImpl implements OrderService{

	@Override
	public void addCart(Cart cart, CartItem cartItem) {
		
		//判断是否存在该商品  存在则叠加(老商品+新商品)   不存在则添加
		
		//获得购物项商品的pid
		
		int pid = cartItem.getProduct().getPid();
		
		CartItem old = cart.getCartMap().get(pid+"");//获得老商品
		
		//进行判断是否有老商品
		
		if(old != null) {
			
			//数量叠加
			old.setCount(old.getCount()+cartItem.getCount());
			
			
		}else {
			
			//直接添加
			
			cart.getCartMap().put(pid+"", cartItem);
			return;
		}
		
	}

}

(6) 导入文件五 cart.jsp页面

(7) 最终显示：http://localhost:8080/xiaomi/login.jsp

在这里插入图片描述

1.3.2 第二步：购物车页面显示数据

（1）前端 cart.jsp 页面实现显示

在这里插入图片描述

（2） cart.jsp 完整代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="css/index.css">
<script type="text/javascript">	
</script>
</head>
<body>
	<%-- <%@ include file="header.jsp" %>   --%><!--是引如导航头的，可注掉  -->
    <div class="order_head">
        <div class="head_background">
            <div class="head_box">
                <a href="index.html" class="head_left_a"><img src="img/logo.jpg" alt="" class="head_left_p"></a>
                <h1 class="head_h1">我的购物车</h1>
                <div class="head_right">
                    <span class="head_right_in">清空购物车 </span>
                </div>

            </div>
        </div>
    </div>
    <div class="trolley_background">
        <div class="trolley_background_in">
            <div class="tro_tab_h">
                <div class="col tro_tab_check">
                    <h1 class="tro_tab_check_p">√</h1>
                    <span class="tro_tab_check_sp">全选</span>

                </div>
                <div class="col tro_tab_img">
                </div>
                <p class="col tro_tab_name">商品名称</p>
                <div class="col tro_tab_price">单价</div>
                <div class="col tro_tab_num">数量</div>
                <div class="col tro_tab_total">小计</div>
                <div class="col tro_tab_action">操作</div>
            </div>
            
            <c:forEach items="${cart.cartMap }" var="entry">
	            <div class="tro_tab_h1">
		                <div class="col tro_tab_check">
		                    <h1 class="tro_tab_check_p" style="background-color: #fff">
								<input type="checkbox" name="ids">
							</h1>
		                    <span class="tro_tab_check_sp"></span>
		                </div>
		                <div class="col tro_tab_img">
		                </div>
	                	<div class="col tro_tab_name">
	                	<!--<h2 tro_tab_name_h2>小米电视4A 32英寸 黑色 32英寸</h2>-->
	              		 <li class="tro_tab_name_li1" style="font-size: 16px;">${entry.value.product.pname }</li>
	               		</div>
	                <div class="col tro_tab_price">
	                    <span  id="price"></span><span>${entry.value.product.price }元</span>
	                </div>
	                <div class="col tro_tab_num">
	                    <input type="count" value="${entry.value.count }" id="num">
	                </div>
	                <div class="col tro_tab_total ">
	                	<c:set var="sum_money" value=""></c:set>
	                	<span class="tro_tab_total_value" id="prices">${entry.value.subCount }</span>元
	                </div>
	                <div class="col tro_tab_action" style="cursor: pointer;width: 40px;height: 40px;" onclick="">删除</div>
	            </div>
	        </c:forEach>
        </div> 
        <div class="tro_close_bot ">
            <!--<p class="tro_bot_ppp">+</p>-->
            <p class="tro_close_p "> <a href="">继续购物 </a></p>
            <p class="tro_close_p_c">合计:<span id="close">${cart.totalCount }</span>元</p>
            
            <p class="tro_close_p_r" style="cursor: pointer;">去结算</p>
        </div>

    </div>
</body>
</html>

（3）最终显示：http://localhost:8080/xiaomi/login.jsp

在这里插入图片描述

1.4 删除和清空购物车

1.4.1 实现继续购物

在这里插入图片描述

java${pageContext.request.contextPath}/toIndex?method=toIndex

Bug的存在（到时候中级或高级中再慢慢总结这点）：

在这里插入图片描述

1.4.2 删除购物车

（1）记得一定要引入js

(2) cart.jsp

在这里插入图片描述

<script type="text/javascript">
		/* 删除购物车 */
		function del(pid){
			
			//alert(pid)
			if(confirm("首付，您确定要删除么？")){
				
				location.href = "${pageContext.request.contextPath}/order?method=del&pid="+pid;
			}
		}
	
</script>

OrderServlet.java

//根据pid删除购物项
	public String del(HttpServletRequest request, HttpServletResponse response)throws Exception {
		
		String pid = request.getParameter("pid");
		
		//获取购物车项
		Cart cart = getCart(request);
		
		cart.getCartMap().remove(pid);
	
		return "/cart.jsp";
	
	}

1.4.3 清除购物车

(1) cart.jsp

在这里插入图片描述

/* 清空购物车 */
$(function(){
	
	$("#clear").click(function(){
		
		if(confirm("确定要删除么，土老板！")){
			
			//alert(22);
			
			location.href="${pageContext.request.contextPath}/order?method=clearCart";
			
		}
		
	})

(2) OrderServlet.java

	//清空购物车
	public String clearCart(HttpServletRequest request, HttpServletResponse response)throws Exception {
		
		//获取购物车
		//Cart cart = (Cart) request.getSession().getAttribute("cart");
		Cart cart = getCart(request);
		
		//cart.getCartMap().clear();//第一种方法
		
		request.getSession().removeAttribute("cart"); //第二种方法
		
		
		return "/cart.jsp";
		
		
	}

(3) 最终显示（点击”确定“就会清除）

在这里插入图片描述

二、前台首页–订单模块及支付宝支付

支付宝沙箱:(详情请看文件五中详细文档)
类似于沙盘, 模拟真实环境下进行支付(缺失是部分商户的申请,证件缺少无法申请)

在这里插入图片描述

数据库设计
在这里插入图片描述

2.1 支付宝沙箱测试

2.2 保存订单（后端实现）

（1）导入sql:

CREATE TABLE orders (
  oid VARCHAR(32) NOT NULL,
  ordertime DATETIME DEFAULT NULL,
  total DOUBLE DEFAULT NULL,
  state INT(11) DEFAULT NULL,
  uid INT DEFAULT NULL,
  PRIMARY KEY (oid),
  KEY fk_0003 (uid),
  CONSTRAINT fk_0003 FOREIGN KEY (uid) REFERENCES USER (uid)
) ENGINE=INNODB DEFAULT CHARSET=utf8;

CREATE TABLE orderitem (
  itemid VARCHAR(32) NOT NULL,
  COUNT INT(11) DEFAULT NULL,
  subtotal DOUBLE DEFAULT NULL,
  pid INT(32) DEFAULT NULL,
  oid VARCHAR(32) DEFAULT NULL,
  PRIMARY KEY (itemid),
  KEY fk_0001 (pid),
  KEY fk_0002 (oid),
  CONSTRAINT fk_0001 FOREIGN KEY (pid) REFERENCES product (pid),
  CONSTRAINT fk_0002 FOREIGN KEY (oid) REFERENCES orders (oid)
) ENGINE=INNODB DEFAULT CHARSET=utf8;

(2) 编写两个表对应的javabean😁

Orders.java


package com.zql.pojo;

import java.io.Serializable;
import java.util.List;

/**

* author:Daniel

* version:1.0
* 
* 	订单实体

*/

public class Orders implements Serializable{
	
	private String oid;  //订单主键
	private String ordertime; //订单时间
	private double total; //订单数量
	private int state; //订单状态
	private int uid; //外键
	private User user; //用户
	private List<OrderItem> olist;  //订单项
	public Orders() {
		super();
		// TODO Auto-generated constructor stub
	}
	public Orders(String oid, String ordertime, double total, int state, int uid, User user, List<OrderItem> olist) {
		super();
		this.oid = oid;
		this.ordertime = ordertime;
		this.total = total;
		this.state = state;
		this.uid = uid;
		this.user = user;
		this.olist = olist;
	}
	public String getOid() {
		return oid;
	}
	public void setOid(String oid) {
		this.oid = oid;
	}
	public String getOrdertime() {
		return ordertime;
	}
	public void setOrdertime(String ordertime) {
		this.ordertime = ordertime;
	}
	public double getTotal() {
		return total;
	}
	public void setTotal(double total) {
		this.total = total;
	}
	public int getState() {
		return state;
	}
	public void setState(int state) {
		this.state = state;
	}
	public int getUid() {
		return uid;
	}
	public void setUid(int uid) {
		this.uid = uid;
	}
	public User getUser() {
		return user;
	}
	public void setUser(User user) {
		this.user = user;
	}
	public List<OrderItem> getOlist() {
		return olist;
	}
	public void setOlist(List<OrderItem> olist) {
		this.olist = olist;
	}
	@Override
	public String toString() {
		return "Orders [oid=" + oid + ", ordertime=" + ordertime + ", total=" + total + ", state=" + state + ", uid="
				+ uid + ", user=" + user + ", olist=" + olist + "]";
	}
}

OrderItem.java


package com.zql.pojo;

import java.io.Serializable;

/**

* author:Daniel

* version:1.0
* 
* 	订单项实体

*/

public class OrderItem implements Serializable{
	
		private String itemid;//主键
		private int count;
		private double subtotal;//订单总额
		private int pid;//外键  商品主键
		private String oid;//外键  订单主键
		private Product product;//商品
		private Orders orders;//订单
		public OrderItem() {
			super();
			// TODO Auto-generated constructor stub
		}
		public OrderItem(String itemid, int count, double subtotal, int pid, String oid, Product product,
				Orders orders) {
			super();
			this.itemid = itemid;
			this.count = count;
			this.subtotal = subtotal;
			this.pid = pid;
			this.oid = oid;
			this.product = product;
			this.orders = orders;
		}
		public String getItemid() {
			return itemid;
		}
		public void setItemid(String itemid) {
			this.itemid = itemid;
		}
		public int getCount() {
			return count;
		}
		public void setCount(int count) {
			this.count = count;
		}
		public double getSubtotal() {
			return subtotal;
		}
		public void setSubtotal(double subtotal) {
			this.subtotal = subtotal;
		}
		public int getPid() {
			return pid;
		}
		public void setPid(int pid) {
			this.pid = pid;
		}
		public String getOid() {
			return oid;
		}
		public void setOid(String oid) {
			this.oid = oid;
		}
		public Product getProduct() {
			return product;
		}
		public void setProduct(Product product) {
			this.product = product;
		}
		public Orders getOrders() {
			return orders;
		}
		public void setOrders(Orders orders) {
			this.orders = orders;
		}
		@Override
		public String toString() {
			return "OrderItem [itemid=" + itemid + ", count=" + count + ", subtotal=" + subtotal + ", pid=" + pid
					+ ", oid=" + oid + ", product=" + product + ", orders=" + orders + "]";
		}		
}

（2）在cart.jsp中添加id
在这里插入图片描述
cart.jsp

//去结算（生成订单）
$("#addOrders").click(function(){
	
	location.href="${pageContext.request.contextPath}/order?method=addOrders";
	
})

（3） OrderServlet.java

	//去结算(生成订单)addOrders
	public String addOrders(HttpServletRequest request, HttpServletResponse response)throws Exception {
			
		User user = (User) request.getSession().getAttribute("user");
		//判断是否登录
		if(user == null) {
			
			request.setAttribute("msg", "请先登录😂（￣︶￣）↗　");
			
			return "msg.jsp";  //在此刻创建一个msg.jsp页面
		}
		
		//查看购物车是否为空 ,为空则也返回msg.jsp
		Cart cart = getCart(request);
		if(cart == null) {
			
			request.setAttribute("msg", "请先登录😂（￣︶￣）↗　");
			
			return "msg.jsp";  
		}
		
		//通过上面两个条件，则创建订单
		Orders orders = new Orders();
		
		orders.setOid(UUIDUtils.getUUID());
		orders.setOrdertime(new Date().toLocaleString());
		orders.setTotal(cart.getTotalCount());
		orders.setState(0);//默认值为 0
		orders.setUid(user.getUid());
		orders.setUser(user);
		//orders.setOlist(olist);
		
		//创建集合将orderItem添加到orders中
		List<OrderItem> oilist = new ArrayList();
		//遍历
		for (String key : cart.getCartMap().keySet()) {
			
			CartItem cartItem = cart.getCartMap().get(key);
			//设置赋值
			//创建订单项
			OrderItem orderItem = new OrderItem();
			
			orderItem.setItemid(UUIDUtils.getUUID());
			orderItem.setCount(cartItem.getCount());
			orderItem.setSubtotal(cartItem.getSubCount());
			orderItem.setPid(cartItem.getProduct().getPid());
			orderItem.setOid(orders.getOid());
			orderItem.setProduct(cartItem.getProduct());
			orderItem.setOrders(orders);
			//添加到集合中
			oilist.add(orderItem);
				
		}
		//将订单项添加到订单集合中
		orders.setOlist(oilist);
		//业务处理
		OrderService os = new OrderServiceImpl();
		os.addOrders(orders);
		
		//清空购物车
		cart.getCartMap().clear();
		
		//TODO
		return null;
	}

（4）创建msg.jsp 页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
		${msg }
</body>
</html>

（5） OrderService.java


package com.zql.service;

import com.zql.pojo.Cart;
import com.zql.pojo.CartItem;
import com.zql.pojo.Orders;

/**

* author:Daniel

* version:1.0

*/

public interface OrderService {

	void addCart(Cart cart, CartItem cartItem) throws Exception;

	//保存订单（生成订单）
	void addOrders(Orders orders) throws Exception;

}

(6)OrderServiceImpl.java

	//保存订单（生成订单）
	@Override
	public void addOrders(Orders orders) throws Exception {
		
		//保存订单
		OrderDao od = new OrderDaoImpl();
		od.addOrders(orders);
		
		//保存订单项
		for (OrderItem oi : orders.getOlist()) {
			
			od.addOrderItem(oi);
		}
	}

(7)OrderDao.java


package com.zql.dao;

import java.sql.SQLException;

import com.zql.pojo.OrderItem;
import com.zql.pojo.Orders;

/**

* author:Daniel

* version:1.0

*/

public interface OrderDao {

	//保存订单
	void addOrders(Orders orders) throws SQLException;

	//保存订单项
	void addOrderItem(OrderItem oi) throws SQLException;	
}

(8)OrderDaoImpl.java


package com.zql.dao.impl;

import java.sql.SQLException;

import org.apache.commons.dbutils.QueryRunner;

import com.zql.dao.OrderDao;
import com.zql.pojo.OrderItem;
import com.zql.pojo.Orders;
import com.zql.utils.C3P0Utils;

/**

* author:Daniel

* version:1.0

*/

public class OrderDaoImpl implements OrderDao{

	QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
	//保存订单
	@Override
	public void addOrders(Orders orders) throws SQLException {
		
		String sql = "insert into orders values(?,?,?,?,?)";
		
		Object[] param = {orders.getOid(),orders.getOrdertime(),
				orders.getTotal(),orders.getState(),orders.getUid()};
		
		qr.update(sql,param);
	}
	
	
	//保存订单项
	@Override
	public void addOrderItem(OrderItem oi)  throws SQLException{
		
		String sql = "insert into orderItem values(?,?,?,?,?)";
		
		Object[] param = {oi.getItemid(),oi.getCount(),oi.getSubtotal(),oi.getPid(),oi.getOid()};
		
		qr.update(sql, param);
	}

}

（9）最终检验：http://localhost:8080/xiaomi/login.jsp

（9.1）没有点击“去结算”数据库为空

在这里插入图片描述

（9.2）添加购物车两条并且“去结算”

在这里插入图片描述

（9.3）点击结算数据库显示：
在这里插入图片描述

在这里插入图片描述

2.3 支付宝对接

2.3.1 引入支付宝环境

（1）引入支付宝（文件五——>对接小米文件）出现报红解决，如下：

在这里插入图片描述

（2）修改相关配置（2.1 应该配置好了，没有则看本文2.1）
（3）修改项目名,如下
在这里插入图片描述

2.3.2 编写后端 //TODO

OrderServlet.java
在这里插入图片描述

2.3.3 编写前端

pay/index.jsp
在这里插入图片描述
完整代码 pay/index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>支付宝电脑网站支付</title>
<style>
* {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
		sans-serif;
}

.tab-head {
	margin-left: 120px;
	margin-bottom: 10px;
}

.tab-content {
	clear: left;
	display: none;
}

h2 {
	border-bottom: solid #02aaf1 2px;
	width: 200px;
	height: 25px;
	margin: 0;
	float: left;
	text-align: center;
	font-size: 16px;
}

.selected {
	color: #FFFFFF;
	background-color: #02aaf1;
}

.show {
	clear: left;
	display: block;
}

.hidden {
	display: none;
}

.new-btn-login-sp {
	padding: 1px;
	display: inline-block;
	width: 75%;
}

.new-btn-login {
	background-color: #02aaf1;
	color: #FFFFFF;
	font-weight: bold;
	border: none;
	width: 100%;
	height: 30px;
	border-radius: 5px;
	font-size: 16px;
}

#main {
	width: 100%;
	margin: 0 auto;
	font-size: 14px;
}

.red-star {
	color: #f00;
	width: 10px;
	display: inline-block;
}

.null-star {
	color: #fff;
}

.content {
	margin-top: 5px;
}

.content dt {
	width: 100px;
	display: inline-block;
	float: left;
	margin-left: 20px;
	color: #666;
	font-size: 13px;
	margin-top: 8px;
}

.content dd {
	margin-left: 120px;
	margin-bottom: 5px;
}

.content dd input {
	width: 85%;
	height: 28px;
	border: 0;
	-webkit-border-radius: 0;
	-webkit-appearance: none;
}

#foot {
	margin-top: 10px;
	position: absolute;
	bottom: 15px;
	width: 100%;
}

.foot-ul {
	width: 100%;
}

.foot-ul li {
	width: 100%;
	text-align: center;
	color: #666;
}

.note-help {
	color: #999999;
	font-size: 12px;
	line-height: 130%;
	margin-top: 5px;
	width: 100%;
	display: block;
}

#btn-dd {
	margin: 20px;
	text-align: center;
}

.foot-ul {
	width: 100%;
}

.one_line {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #eeeeee;
	width: 100%;
	margin-left: 20px;
}

.am-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: box;
	width: 100%;
	position: relative;
	padding: 7px 0;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background: #1D222D;
	height: 50px;
	text-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	box-pack: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	box-align: center;
}

.am-header h1 {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	box-flex: 1;
	line-height: 18px;
	text-align: center;
	font-size: 18px;
	font-weight: 300;
	color: #fff;
}
</style>
</head>
<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
	<header class="am-header">
	<h1>支付宝电脑网站支付体验入口页</h1>
	</header>
	<div id="main">
		<div id="tabhead" class="tab-head">
			<h2 id="tab1" class="selected" name="tab">付 款</h2>
			<h2 id="tab2" name="tab">交 易 查 询</h2>
			<h2 id="tab3" name="tab">退 款</h2>
			<h2 id="tab4" name="tab">退 款 查 询</h2>
			<h2 id="tab5" name="tab">交 易 关 闭</h2>
		</div>
		<form name="alipayment" action="pay/alipay.trade.page.pay.jsp" method="post"
			target="_blank">
			<div id="body1" class="show" name="divcontent">
				<dl class="content">
					<dt>商户订单号 ：</dt>
					<dd>
						<input id="WIDout_trade_no" value="${orders.oid }" name="WIDout_trade_no" />
					</dd>
					<hr class="one_line">
					<dt>订单姓名 ：</dt>
					<dd>
						<input id="WIDsubject" value="${orders.user.name }" name="WIDsubject" />
					</dd>
					<hr class="one_line">
					<dt>付款金额 ：</dt>
					<dd>
						<input id="WIDtotal_amount" value="${orders.total }" name="WIDtotal_amount" />
					</dd>
					<hr class="one_line">
					<dt>订单时间：</dt>
					<dd>
						<input id="WIDbody" value="${orders.ordertime }" name="WIDbody" />
					</dd>
					<hr class="one_line">
					<dt></dt>
					<dd id="btn-dd">
						<span class="new-btn-login-sp">
							<button class="new-btn-login" type="submit"
								style="text-align: center;">付 款</button>
						</span> <span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>
					</dd>
				</dl>
			</div>
		</form>
		<form name=tradequery action=pay/alipay.trade.query.jsp method=post
			target="_blank">
			<div id="body2" class="tab-content" name="divcontent">
				<dl class="content">
					<dt>商户订单号 ：</dt>
					<dd>
						<input id="WIDTQout_trade_no" name="WIDTQout_trade_no" />
					</dd>
					<hr class="one_line">
					<dt>支付宝交易号 ：</dt>
					<dd>
						<input id="WIDTQtrade_no" name="WIDTQtrade_no" />
					</dd>
					<hr class="one_line">
					<dt></dt>
					<dd id="btn-dd">
						<span class="new-btn-login-sp">
							<button class="new-btn-login" type="submit"
								style="text-align: center;">交 易 查 询</button>
						</span> <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“交易查询”按钮，即表示您同意该次的执行操作。</span>
					</dd>
				</dl>
			</div>
		</form>
		<form name=traderefund action=alipay.trade.refund.jsp method=post
			target="_blank">
			<div id="body3" class="tab-content" name="divcontent">
				<dl class="content">
					<dt>商户订单号 ：</dt>
					<dd>
						<input id="WIDTRout_trade_no" name="WIDTRout_trade_no" />
					</dd>
					<hr class="one_line">
					<dt>支付宝交易号 ：</dt>
					<dd>
						<input id="WIDTRtrade_no" name="WIDTRtrade_no" />
					</dd>
					<hr class="one_line">
					<dt>退款金额 ：</dt>
					<dd>
						<input id="WIDTRrefund_amount" name="WIDTRrefund_amount" />
					</dd>
					<hr class="one_line">
					<dt>退款原因 ：</dt>
					<dd>
						<input id="WIDTRrefund_reason" name="WIDTRrefund_reason" />
					</dd>
					<hr class="one_line">
					<dt>退款请求号 ：</dt>
					<dd>
						<input id="WIDTRout_request_no" name="WIDTRout_request_no" />
					</dd>
					<hr class="one_line">
					<dt></dt>
					<dd id="btn-dd">
						<span class="new-btn-login-sp">
							<button class="new-btn-login" type="submit"
								style="text-align: center;">退 款</button>
						</span> <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“退款”按钮，即表示您同意该次的执行操作。</span>
					</dd>
				</dl>
			</div>
		</form>
		<form name=traderefundquery
			action=alipay.trade.fastpay.refund.query.jsp method=post
			target="_blank">
			<div id="body4" class="tab-content" name="divcontent">
				<dl class="content">
					<dt>商户订单号 ：</dt>
					<dd>
						<input id="WIDRQout_trade_no" name="WIDRQout_trade_no" />
					</dd>
					<hr class="one_line">
					<dt>支付宝交易号 ：</dt>
					<dd>
						<input id="WIDRQtrade_no" name="WIDRQtrade_no" />
					</dd>
					<hr class="one_line">
					<dt>退款请求号 ：</dt>
					<dd>
						<input id="WIDRQout_request_no" name="WIDRQout_request_no" />
					</dd>
					<hr class="one_line">
					<dt></dt>
					<dd id="btn-dd">
						<span class="new-btn-login-sp">
							<button class="new-btn-login" type="submit"
								style="text-align: center;">退 款 查 询</button>
						</span> <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“退款查询”按钮，即表示您同意该次的执行操作。</span>
					</dd>
				</dl>
			</div>
		</form>
		<form name=tradeclose action=alipay.trade.close.jsp method=post
			target="_blank">
			<div id="body5" class="tab-content" name="divcontent">
				<dl class="content">
					<dt>商户订单号 ：</dt>
					<dd>
						<input id="WIDTCout_trade_no" name="WIDTCout_trade_no" />
					</dd>
					<hr class="one_line">
					<dt>支付宝交易号 ：</dt>
					<dd>
						<input id="WIDTCtrade_no" name="WIDTCtrade_no" />
					</dd>
					<hr class="one_line">
					<dt></dt>
					<dd id="btn-dd">
						<span class="new-btn-login-sp">
							<button class="new-btn-login" type="submit"
								style="text-align: center;">交 易 关 闭</button>
						</span> <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“交易关闭”按钮，即表示您同意该次的执行操作。</span>
					</dd>
				</dl>
			</div>
		</form>
		<div id="foot">
			<ul class="foot-ul">
				<li>支付宝版权所有 2015-2018 ALIPAY.COM</li>
			</ul>
		</div>
	</div>
</body>
<script language="javascript">
	var tabs = document.getElementsByName('tab');
	var contents = document.getElementsByName('divcontent');
	
	(function changeTab(tab) {
	    for(var i = 0, len = tabs.length; i < len; i++) {
	        tabs[i].onmouseover = showTab;
	    }
	})();
	
	function showTab() {
	    for(var i = 0, len = tabs.length; i < len; i++) {
	        if(tabs[i] === this) {
	            tabs[i].className = 'selected';
	            contents[i].className = 'show';
	        } else {
	            tabs[i].className = '';
	            contents[i].className = 'tab-content';
	        }
	    }
	}
	
	/* function GetDateNow() {
		var vNow = new Date();
		var sNow = "";
		sNow += String(vNow.getFullYear());
		sNow += String(vNow.getMonth() + 1);
		sNow += String(vNow.getDate());
		sNow += String(vNow.getHours());
		sNow += String(vNow.getMinutes());
		sNow += String(vNow.getSeconds());
		sNow += String(vNow.getMilliseconds());
		document.getElementById("WIDout_trade_no").value =  sNow;
		document.getElementById("WIDsubject").value = "测试";
		document.getElementById("WIDtotal_amount").value = "0.01";
	} */
	GetDateNow();
</script>
</html>

最终显示：http://localhost:8080/xiaomi/login.jsp

第一步
在这里插入图片描述
第二步

第三步

在这里插入图片描述

第四步

在这里插入图片描述
第五步：

交易完成这里可以再次查看

在这里插入图片描述

继续学习点👉🏾👉🏾Java中级

Daniel521-Spark

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Java进阶-案例训练（十九）(商城项目（4））

由上述分析可知，购物车页面就是由购物车和购物项组成创建购物项和购物车两个实体类 😐 CartItem.javaCart.java1.3 购物车实现（分两步走）1.3.1 第一步：详情页到购物车（1）在详情页 product_detail.jsp 中添加入口方法（2）分别创建(3) OrderServlet.java(4) OrderService.java(5)OrderServiceImpl.java(6) 导入文件五 cart.jsp页面(7) .
复制链接

扫一扫