Web项目实战 | 购物系统v1.0 | 开发记录（五） | 模拟网站埋点实现用户浏览记录的统计与显示

以往课设记录

---

• Web期末课程设计v1.0（一） | 大学生闲置物品交易系统 | 选择页面模板（附资源），使用 JQuery AJAX实现注册、登陆

• Web期末课程设计v1.0（二） | 闲优购 | 使用Bootstrap5各组件优化页面，使用AJAX请求实现用户修改信息功能

• Web期末课程设计v1.0（三） | 闲优购系统 | 基于Bootstrap设计商品页面、使用JQuery实现上传文件并显示到图片组件、使用JSTL标签显示数据库的内容到无序列表

• Web期末课程设计v1.0（四） | 闲优购系统 | 实现JQuery图片上传 | 使用JQ插件提交AJAX请求实现发布商品并保存到数据库 | 商品分类分页显示

运行环境

---

• windows10
• IDEA专业版
• JDK8
• HTML5、CSS3、JavaScript
• JQuery
• Bootstrap5

1. 页面效果展示

---

1.1 显示当前位置

1.2 购买商品时候的询问窗口

确认购买后

1.3 显示浏览记录

2. 功能实现

2.1 使用Boostrap5框架的Modal实现确认购买后的弹出的窗口

Bootstrap5 modal 官方文档

关于modal组件的使用：

• 一个button按钮组件负责启动一个modal模态框
  在按钮中需要设置这几个参数

参数名称	描述
data-bs-toggle=modal	用于指定按钮的目标为一个modal模态框
data-bs-target = #…	用于指定当前按钮绑定的模态框组件的ID

• 一个div负责显示modal模态框的内容，模态框所需的参数参考官方代码，除了id外，笔者未作修改

jsp

    <!-- Button trigger modal -->

    <button id="bt-buy" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop" hidden>
        modal组件
    </button>
    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger" id="staticBackdropLabel">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        温馨提示
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    是否确认购买？
                </div>
                <div class="modal-footer">
                    <button id="btn-buy-cancel" type="button" class="btn btn-danger" data-bs-dismiss="modal">我再想想</button>
                    <button id="btn-buy-ok" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-buy-ok">确认购买</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modal-buy-ok" tabindex