EasyUI项目之门户添加查询与清空购物车

本文介绍了如何使用EasyUI在项目中实现购物车的查询和清空功能。详细讲述了通过session保存购物车信息,包括创建ShoppingVo类、配置XML文件以及前台JS代码的实现步骤。同时,也涵盖了清空购物车的后端和前端实现。
摘要由CSDN通过智能技术生成

目标效果:
在这里插入图片描述
目标:

1,添加查询购物车

2,清空购物车

一,添加查询购物车

三种实现方法

0.1 session 保存购物车信息到session服务端

0.2 cookie保存购物车到本地(效率更高 客户端 不安全)

0.3 数据库

1.1 我们采用第一种方法 建立ShoppingVo类

package com.zking.vo;
 
public class ShoppingVo {
//  购物车列表订单项所需数据
  private String name;
  private float price;
  private int num;
  private float total;
//  提交订单所需数据
  private String consignee;
  private String phone;
  private String postalcode;
  private String address;
  private int sendType;
//  页面的所有传参字符串
  private String pageStr;
 
public String getName() {
	return name;
}
public void setName(String name) {
	this.name = name;
}
public float getPrice() {
	return price;
}
public void setPrice(float price) {
	this.price = price;
}
public int getNum() {
	return num;
}
public void setNum(int num) {
	this.num = num;
}
public float getTotal() {
	return total;
}
public void setTotal(float total) {
	this.total = total;
}
public String getConsignee() {
	return consignee;
}
public void setConsignee(String consignee) {
	this.consignee = consignee;
}
public String getPhone() {
	return phone;
}
public void setPhone(String phone) {
	this.phone = phone;
}
public String getPostalcode() {
	return postalcode;
}
public void setPostalcode(String postalcode) {
	this.postalcode = postalcode;
}
public String getAddress() {
	return address;
}
public void setAddress(String address) {
	this.address = address;
}
public int getSendType() {
	return sendType;
}
public void setSendType(int sendType) {
	this.sendType = sendType;
}
public String getPageStr() {
	return pageStr;
}
public void setPageStr(String pageStr) {
	this.pageStr = pageStr;
}
 
@Override
public String toString() {
	return "ShoppingVo [name=" + name + ", price=" + price + ", num=" + num + ", total=" + total + ", consignee="
			+ consignee + ", phone=" + phone + ", postalcode=" + postalcode + ", address=" + address + ", sendType="
			+ sendType + ", pageStr=" + pageStr + "]";
}
}

1.2 ShoppingVoAction

package com.zking.web;
 
import java.util.ArrayList;
import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.StringUtils;
import com.zking.vo.ShoppingVo;
 
public class ShoppingVoAction extends ActionSupport implements ModelDriver<ShoppingVo>{
 
	private ShoppingVo shoppingVo = new ShoppingVo();
	
	public ShoppingVo getModel() {
		return shoppingVo;
	}
	
//	添加购物车
	public String add(HttpServletRequest req, HttpServletResponse resp) {
		HttpSession session=req.getSession();
		User cuser = (User)session.getAttribute("cuser");
		ObjectMapper om=new ObjectMapper();
		
		try {
		if(cuser!=null) {
//			点击添加购物车传递到后台的是一个对象,购物车需要的是一个list集合来显示。
//			第一次添加购物车集合是个空的,把我们的shoppingVo放入list集合shoppingInfo中,传递到前台。
//			第二次添加,购物车集合是有东西的,我们要把原有的购物车list集合取出来,将本次添加的shoppingVo放入原有的购物车list集合中。
			long uid = cuser.getId();
			List<ShoppingVo> shopGoodsVos=null;
//			从session取出当前用户对应的购物车信息
			String shoppingInfo = (String) session.getAttribute("shopping_"+uid);
			if(StringUtils.isNotBlank(shoppingInfo)) {
//				第2~N次
				shopGoodsVos=om.readValue(shoppingInfo, List.class);
			}else {
//				第1次
				shopGoodsVos=new ArrayList<ShoppingVo>();
			}
//			shoppingVo指前台点击购物车具体商品的内容
			shopGoodsVos.add(shoppingVo);
			session.setAttribute("shopping_"+uid, om.writeValueAsString(shopGoodsVos));
			req.setAttribute("shopGoodsVos", shopGoodsVos);
		}
		
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "shoppingCar";
	}
 
}

1.3 配置xml文件

	<action path="/shopping" type="com.zking.web.ShoppingVoAction">
       <forward name="shoppingCar" path="/fg/shoppingCar.jsp" redirect="false" />
    </action>

1.4 前台js文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/js/easyui/themes/default/easyui.css">
    <link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/js/easyui/jquery.easyui.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/index.js"></script>
</head>
<body class="text-center">
<div class="container">
 
    <!-- 购物车新增模态框 -->
    <div class="shop-modal modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">订单信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="shop-form" method="post">
                        <div class="row">
                            <!-- <div class="col-md-3">收货人:</div> -->
                            <div class="col-md-12"><input type="text" name="consignee" id="consignee" placeholder="收货人"
                                                          value=""/></div>
                        </div>
                        <div class="row">
                            <!-- <div class="col-md-3">手机号:</div> -->
                            <div class="col-md-12"><input type="text" name="phone" placeholder="收货人手机号" id="phone"
                                                          value=""/></div>
                        </div>
                        <div class="row">
                            <!-- <div class="col-md-3">收货人邮编:</div> -->
                            <div class="col-md-12"><input type="text" name="postalcode" placeholder="收货人邮编"
                                                          id="postalcode" value=""/></div>
                        </div>
                        <div class="row">
                            <!-- <div class="col-md-3">收货地址:</div> -->
                            <div class="col-md-12"><input type="text" name="address" placeholder="收货地址" id="address"
                                                          value=""/></div>
                        </div>
                        <div class="row">
                            <!-- <div class="col-md-3">发货方式</div> -->
                            <div class="col-md-12">
                                <select class="form-control" name="sendType" id="sendType">
                                    <option value="1">平邮</option>
                                    <option value="2">快递</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary order_Create">确定</button>
                </div>
            </div>
        </div>
    </div>
 
    <div class="row head">
        <div class="col-md-12">
            <i>
                您好,欢迎来到飞凡网上书店!
            </i>
            <b>
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/login.jsp">登录</a> |
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/register.jsp">注册</a> |
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/shopping.action?methodName=list">我的购物车</a> |
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/">网站首页</a>
            </b>
        </div>
    </div>
    <!-- 横幅搜索栏 start -->
    <div class="row banner">
        <div class="img1"></div>
        <div class="col-md-12">
            <form class="form" action="${pageContext.request.contextPath}/book.action?methodName=findByName" method="post">
                <%--<input type="hidden" name="methodName" value="findByName">--%>
                <input type="text" name="name" value="" id="input" class="search">
                <input type="submit" class="btn btn-primary" value="查询">
            </form>
        </div>
    </div>
    <!-- 横幅搜索栏 end -->
    <!-- 页面主体内容 start -->
    <div class="row content">
        <div class="col-md-3 float-left c-left">
            <ul class="list-group">
                <li class="list-group-item">书籍分类</li>
            </ul>
        </div>
        <%--${books}--%>
        <div class="col-md-9 float-right c-right">
 
            <table class="table table-striped">
                <thead class="list-group-item-hover">
                <tr>
                    <%--<th>编号</th>--%>
                    <th>书名</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="s" items="${shopGoodsVos}" varStatus="index">
                    <tr>
                            <%--<th>${index.index}</th>--%>
                        <th>${s.name}</th>
                        <td>${s.price}</td>
                        <td>
                            <input type="text" class="text-center item_num" name="num" value="${s.num}"/>
                        </td>
                        <td>${s.total}</td>
                        <td>
                                <%--<a href="#" class="text-primary" onclick="shopingDel(${s.name},${s.price},${s.num},${s.total})">删除</a>--%>
                            <a href="${pageContext.request.contextPath}/shopping.action?methodName=del&pageStr=${index.index}"
                               class="text-primary">删除</a>
                            <a href="#" class="text-primary" onclick="sshopUpdate(this);">更新</a>
                        </td>
                    </tr>
                </c:forEach>
 
                <tr class="bg-white">
                    <td colspan="5" class="text-center">
                        <button type="button" onclick="clearCar();" class="btn bg-orange2">清空购物车</button>
                        <button type="button" class="btn bg-orange2 continue-buy">继续购买</button>
                        <button type="button" class="btn btn-danger car_pay">去结算</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <%--<xl:page pageBean="${pageBean}"></xl:page>--%>
        </div>
    </div>
    <!-- 页面主体内容 end -->
    <!-- 网站版权 start -->
    <div class="row footer">
        <div class="col-md-12">
            Copyright ©2014 飞凡教育,版权所有
        </div>
    </div>
    <!-- 网站版权 end -->
</div>
<script type="text/javascript">
    <%--跟新购物车--%>
 
    function sshopUpdate(ele) {
        // console.log($(ele).parent().parent());
        var $parent = $(ele).parent().parent();
        var $price_td = $parent.children().eq(1);
        var $num_td = $parent.children().eq(2);
        var $total_td = $parent.children().eq(3);
 
        var price = $price_td.html();
        var num = $num_td.find(":input").val();
        var total = parseInt(num) * parseFloat(price);
        $total_td.html(parseFloat(total).toFixed(1));
    }
 
    <%--书籍搜索功能--%>
 
    function searchByType(cid) {
        location.href = '${pageContext.request.contextPath}/book.action?methodName=findByType&cid=' + cid;
    };
 
    //清除购物车
    function clearCar() {
        $.messager.confirm('确认', '您确认想要清空购物车吗?', function (r) {
            if (r) {
                $.ajax({
                    url: '${pageContext.request.contextPath}/shopping.action?methodName=clear',
                    success: function (data) {
                        location.href = '${pageContext.request.contextPath}/shopping.action?methodName=list';
                    }
                });
            }
        })
    }
 
    $(function () {
        // 给模态框添加关闭事件
        $('.close span,.modal-footer .btn-secondary').click(function () {
            $('.shop-modal').addClass('modal');
        })
        // 购物车结算
        $(".car_pay").click(function () {
            $('.shop-modal').removeClass('modal');
        })
 
        $(".order_Create").click(function () {
            var consignee = $("#consignee").val();
            var phone = $("#phone").val();
            var postalcode = $("#postalcode").val();
            var address = $("#address").val();
            var sendType = $("#sendType").val();
            var single_tr = "";
            $(".table tr:gt(0)").not(":last").each(function (index, node) {
                console.log(index);
                single_tr = single_tr + "," + $(this).find("th").eq(0).html() + "-" + $(this).find("td").eq(0).html() + "-"
                    + $(this).find("td").eq(1).find("input").val() + "-" + $(this).find("td").eq(2).html();
            })
            console.log(single_tr.substring(1));
 
            var param = "consignee=" + consignee + "&phone=" + phone + "&postalcode=" + postalcode + "&address=" + address + "&sendType=" + sendType + "&pageStr=" + single_tr;
 
            $.ajax({
                url: '${pageContext.request.contextPath}/shopping.action?methodName=createOrder',
                type: "POST",
                data: param,
                success: function (data) {
                    var consignee = $("#consignee").val("");
                    var phone = $("#phone").val("");
                    var postalcode = $("#postalcode").val("");
                    var address = $("#address").val("");
                    var sendType = $("#sendType").val("");
                    $('.shop-modal').addClass('modal');
                    $(".table tr:gt(0)").not(":last").remove();
                    $.ajax({
                        url: '${pageContext.request.contextPath}/shopping.action?methodName=clear',
                        success: function (data) {
                            <%--location.href = '${pageContext.request.contextPath}/shopping.action?methodName=list';--%>
                        }
                    });
                }
            });
        });
 
    })
</script>
 
</body>
</html>

效果展示:
在这里插入图片描述

二,清空购物车

2.1 ShoppingVoAction

package com.zking.web;
 
import java.util.ArrayList;
import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.StringUtils;
import com.zking.vo.ShoppingVo;
 
public class ShoppingVoAction extends ActionSupport implements ModelDriver<ShoppingVo>{
 
	private ShoppingVo shoppingVo = new ShoppingVo();
	
	public ShoppingVo getModel() {
		return shoppingVo;
	}
	
//	查询购物车
	public String list(HttpServletRequest req, HttpServletResponse resp) {
		HttpSession session=req.getSession();
		User cuser = (User)session.getAttribute("cuser");
		ObjectMapper om=new ObjectMapper();
		String shoppingInfo = (String) session.getAttribute("shopping_"+cuser.getId());
		
		try {
			List<ShoppingVo> shopGoodsVos=om.readValue(shoppingInfo, List.class);
			req.setAttribute("shopGoodsVos", shopGoodsVos);
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return "shoppingCar";
	}
	
//	清空购物车
	public void clear(HttpServletRequest req, HttpServletResponse resp) {
		HttpSession session=req.getSession();
		User cuser = (User)session.getAttribute("cuser");
		session.removeAttribute("shopping_"+cuser.getId());
		try {
			ResponseUtil.writeJson(resp, 1);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
 
}

2.2 前台js代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/js/easyui/themes/default/easyui.css">
    <link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/js/easyui/jquery.easyui.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/index.js"></script>
</head>
<body class="text-center">
<div class="container">
 
    <!-- 购物车新增模态框 -->
    <div class="shop-modal modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">订单信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="shop-form" method="post">
                        <div class="row">
                            <!-- <div class="col-md-3">收货人:</div> -->
                            <div class="col-md-12"><input type="text" name="consignee" id="consignee" placeholder="收货人"
                                                          value=""/></div>
                        </div>
                        <div class="row">
                            <!-- <div class="col-md-3">手机号:</div> -->
                            <div class="col-md-12"><input type="text" name="phone" placeholder="收货人手机号" id="phone"
                                                          value=""/></div>
                        </div>
                        <div class="row">
                            <!-- <div class="col-md-3">收货人邮编:</div> -->
                            <div class="col-md-12"><input type="text" name="postalcode" placeholder="收货人邮编"
                                                          id="postalcode" value=""/></div>
                        </div>
                        <div class="row">
                            <!-- <div class="col-md-3">收货地址:</div> -->
                            <div class="col-md-12"><input type="text" name="address" placeholder="收货地址" id="address"
                                                          value=""/></div>
                        </div>
                        <div class="row">
                            <!-- <div class="col-md-3">发货方式</div> -->
                            <div class="col-md-12">
                                <select class="form-control" name="sendType" id="sendType">
                                    <option value="1">平邮</option>
                                    <option value="2">快递</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary order_Create">确定</button>
                </div>
            </div>
        </div>
    </div>
 
    <div class="row head">
        <div class="col-md-12">
            <i>
                您好,欢迎来到飞凡网上书店!
            </i>
            <b>
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/login.jsp">登录</a> |
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/register.jsp">注册</a> |
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/shopping.action?methodName=list">我的购物车</a> |
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/">网站首页</a>
            </b>
        </div>
    </div>
    <!-- 横幅搜索栏 start -->
    <div class="row banner">
        <div class="img1"></div>
        <div class="col-md-12">
            <form class="form" action="${pageContext.request.contextPath}/book.action?methodName=findByName" method="post">
                <%--<input type="hidden" name="methodName" value="findByName">--%>
                <input type="text" name="name" value="" id="input" class="search">
                <input type="submit" class="btn btn-primary" value="查询">
            </form>
        </div>
    </div>
    <!-- 横幅搜索栏 end -->
    <!-- 页面主体内容 start -->
    <div class="row content">
        <div class="col-md-3 float-left c-left">
            <ul class="list-group">
                <li class="list-group-item">书籍分类</li>
            </ul>
        </div>
        <%--${books}--%>
        <div class="col-md-9 float-right c-right">
 
            <table class="table table-striped">
                <thead class="list-group-item-hover">
                <tr>
                    <%--<th>编号</th>--%>
                    <th>书名</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="s" items="${shopGoodsVos}" varStatus="index">
                    <tr>
                            <%--<th>${index.index}</th>--%>
                        <th>${s.name}</th>
                        <td>${s.price}</td>
                        <td>
                            <input type="text" class="text-center item_num" name="num" value="${s.num}"/>
                        </td>
                        <td>${s.total}</td>
                        <td>
                                <%--<a href="#" class="text-primary" onclick="shopingDel(${s.name},${s.price},${s.num},${s.total})">删除</a>--%>
                            <a href="${pageContext.request.contextPath}/shopping.action?methodName=del&pageStr=${index.index}"
                               class="text-primary">删除</a>
                            <a href="#" class="text-primary" onclick="sshopUpdate(this);">更新</a>
                        </td>
                    </tr>
                </c:forEach>
 
                <tr class="bg-white">
                    <td colspan="5" class="text-center">
                        <button type="button" onclick="clearCar();" class="btn bg-orange2">清空购物车</button>
                        <button type="button" class="btn bg-orange2 continue-buy">继续购买</button>
                        <button type="button" class="btn btn-danger car_pay">去结算</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <%--<xl:page pageBean="${pageBean}"></xl:page>--%>
        </div>
    </div>
    <!-- 页面主体内容 end -->
    <!-- 网站版权 start -->
    <div class="row footer">
        <div class="col-md-12">
            Copyright ©2014 飞凡教育,版权所有
        </div>
    </div>
    <!-- 网站版权 end -->
</div>
<script type="text/javascript">
    <%--跟新购物车--%>
 
    function sshopUpdate(ele) {
        // console.log($(ele).parent().parent());
        var $parent = $(ele).parent().parent();
        var $price_td = $parent.children().eq(1);
        var $num_td = $parent.children().eq(2);
        var $total_td = $parent.children().eq(3);
 
        var price = $price_td.html();
        var num = $num_td.find(":input").val();
        var total = parseInt(num) * parseFloat(price);
        $total_td.html(parseFloat(total).toFixed(1));
    }
 
    <%--书籍搜索功能--%>
 
    function searchByType(cid) {
        location.href = '${pageContext.request.contextPath}/book.action?methodName=findByType&cid=' + cid;
    };
 
    //清除购物车
    function clearCar() {
        $.messager.confirm('确认', '您确认想要清空购物车吗?', function (r) {
            if (r) {
                $.ajax({
                    url: '${pageContext.request.contextPath}/shopping.action?methodName=clear',
                    success: function (data) {
                        location.href = '${pageContext.request.contextPath}/shopping.action?methodName=list';
                    }
                });
            }
        })
    }
 
    $(function () {
        // 给模态框添加关闭事件
        $('.close span,.modal-footer .btn-secondary').click(function () {
            $('.shop-modal').addClass('modal');
        })
        // 购物车结算
        $(".car_pay").click(function () {
            $('.shop-modal').removeClass('modal');
        })
 
        $(".order_Create").click(function () {
            var consignee = $("#consignee").val();
            var phone = $("#phone").val();
            var postalcode = $("#postalcode").val();
            var address = $("#address").val();
            var sendType = $("#sendType").val();
            var single_tr = "";
            $(".table tr:gt(0)").not(":last").each(function (index, node) {
                console.log(index);
                single_tr = single_tr + "," + $(this).find("th").eq(0).html() + "-" + $(this).find("td").eq(0).html() + "-"
                    + $(this).find("td").eq(1).find("input").val() + "-" + $(this).find("td").eq(2).html();
            })
            console.log(single_tr.substring(1));
 
            var param = "consignee=" + consignee + "&phone=" + phone + "&postalcode=" + postalcode + "&address=" + address + "&sendType=" + sendType + "&pageStr=" + single_tr;
 
            $.ajax({
                url: '${pageContext.request.contextPath}/shopping.action?methodName=createOrder',
                type: "POST",
                data: param,
                success: function (data) {
                    var consignee = $("#consignee").val("");
                    var phone = $("#phone").val("");
                    var postalcode = $("#postalcode").val("");
                    var address = $("#address").val("");
                    var sendType = $("#sendType").val("");
                    $('.shop-modal').addClass('modal');
                    $(".table tr:gt(0)").not(":last").remove();
                    $.ajax({
                        url: '${pageContext.request.contextPath}/shopping.action?methodName=clear',
                        success: function (data) {
                            <%--location.href = '${pageContext.request.contextPath}/shopping.action?methodName=list';--%>
                        }
                    });
                }
            });
        });
 
    })
</script>
 
</body>
</html>

效果展示:
在这里插入图片描述
到这里就结束了,有不对或补充的地方欢迎大家评论,谢谢!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值