【秒杀项目4】页面优化模块

系列文章目录

刚入门Java的硕士宝宝，实验室没什么Java项目，看到网上的秒杀项目，跟着学习并且记录一下，可能错误会很多，欢迎大家指正。

---

---

前言

本文介绍页面优化模块，具体详细介绍缓存和页面静态化。

---

一、缓存

1.页面缓存

1. 概念：
   页面缓存是指将整个页面的内容缓存起来，以减少页面生成的时间和服务器的负载，从而提高网站的响应速度。

2. 特点：
   缓存的是完整的 HTML 页面内容；
   适用于页面内容变化较少、频繁访问的静态页面；
   可以通过设置缓存时间或根据页面内容的变化来更新缓存。

3. 应用场景：
   适用于静态页面、产品详情页、常规文章页面等内容不经常变化的页面。

2.URL 缓存

1. 概念：
   URL 缓存是指将特定 URL 对应的内容缓存起来，以加快页面加载速度和降低服务器负载。
2. 特点：
   缓存的是特定 URL 对应的页面或资源；
   可以根据 URL 的路径、查询参数等信息进行缓存；
   适用于动态页面中的特定资源、接口等。
3. 应用场景：
   适用于动态页面中的一些静态资源、动态内容较少的页面等。

3.对象缓存

1. 概念：
   对象缓存是指将数据库中的数据对象（如用户信息、文章内容等）缓存到内存中，以提高数据的读取速度和降低数据库访问压力。
2. 特点：
   缓存的是数据对象或实体；
   可以根据缓存键（如对象 ID）来存储和获取缓存数据；
   适用于频繁访问且不经常变化的数据对象。
3. 应用场景：
   适用于用户信息、商品信息、文章内容等频繁访问的数据对象。

4.三者的区别

1. 页面缓存适用于静态页面或者内容变化不频繁的页面，可以减少服务器负载和提高响应速度；
2. URL 缓存适用于动态页面中的一些静态资源或者动态内容较少的页面，可以加快页面加载速度；
3. 对象缓存适用于频繁访问的数据对象，可以减少数据库访问次数，提高数据读取速度。

二、页面静态化

前后端分离，就是浏览器将HTML页面存在客户端，通过ajax获取数据拿到客户端在渲染页面。这样就不用下载页面了，只需要下载动态数据就好了。

1. 商品详情静态化：

  $(function () {
            // countDown();
            getDetails();
       }
   );
    function getDetails() {
        var goodsId = g_getQueryString("goodsId");
        $.ajax({
            url: "/goods/detail/" + goodsId,
            type: "GET",
            success: function (data) {
                if (data.code == 200) {
                    render(data.obj);
               } else {
                    layer.msg(data.message);
               }
           },
            error: function () {
                layer.msg("客户端请求错误");
           }
       })
   }
    function render(detail) {
        var user = detail.user;
        var goods = detail.goodsVo;
        var remainSeconds = detail.remainSeconds;
        if (user) {
            $("#userTip").hide();
       }
        $("#goodsName").text(goods.goodsName);
        $("#goodsImg").attr("src", goods.goodsImg);
        $("#startTime").text(new Date(goods.startDate).format("yyyy-MM-dd 
HH:mm:ss"));
        $("#remainSeconds").val(remainSeconds);
        $("#goodsId").val(goods.id);
        $("#goodsPrice").text(goods.goodsPrice);
        $("#seckillPrice").text(goods.seckillPrice);
        $("#stockCount").text(goods.stockCount);
        countDown();
   }
    function countDown() {
        var remainSeconds = $("#remainSeconds").val();
        var timeout;
        //秒杀还没开始，倒计时
        if (remainSeconds > 0) {
            $("#buyButton").attr("disabled", true);
            $("#seckillTip").html("秒杀倒计时：" + remainSeconds + "秒");
            timeout = setTimeout(function () {
                    // $("#countDown").text(remainSeconds - 1);
                    $("#remainSeconds").val(remainSeconds - 1);
                    countDown();
               },
                1000
           );
       }
        //秒杀进行中
        else if (remainSeconds == 0) {
            $("#buyButton").attr("disabled", false);
            if (timeout) {
                clearTimeout(timeout);
           }
            $("#seckillTip").html("秒杀进行中");
            //秒杀已经结束
       } else {
            $("#buyButton").attr("disabled", true);
            $("#seckillTip").html("秒杀已经结束");
       }
   }

2.秒杀静态化：

function doSeckill() {
        $.ajax({
            url: "/seckill/doSeckill",
            type: "POST",
            data: {
                goodsId: $("#goodsId").val(),
           },
            success: function (data) {
                if (data.code == 200) {
                    window.location.href = "/orderDetail.htm?orderId=" + data.obj.id;
               } else {
                    layer.msg(data.message);
               }
           },
            error: function () {
                layer.msg("客户端请求错误");
           }
       })
   }

3. 订单详情静态化：

 $(function () {
        getOrderDetail();
   });
    function getOrderDetail() {
        var orderId = g_getQueryString("orderId");
        $.ajax({
            url: "/order/detail",
            type: "GET",
            data: {
                orderId: orderId
           },
            success: function (data) {
                if (data.code == 200) {
                    render(data.obj);
               } else {
                    layer.msg(data.message);
               }
           },
            error: function () {
                layer.msg("客户端请求错误")
           }
       })
   }
    function render(detail) {
        var goods = detail.goodsVo;
        var order = detail.order;
        $("#goodsName").text(goods.goodsName);
        $("#goodsImg").attr("src", goods.goodsImg);
        $("#goodsPrice").text(order.goodsPrice);
        $("#createDate").text(new Date(order.createDate).format("yyyy-MM-dd HH:mm:ss"));
        var status = order.status;
        var statusText = ""
        switch (status) {
            case 0:
                statusText = "未支付";
                break;
            case 1:
                statusText = "待发货";
                break;
            case 2:
                statusText = "已发货";
                break;
            case 3:
                statusText = "已收货";
                break;
            case 4:
                statusText = "已退款";
                break;
            case 5:
                statusText = "已完成";
                break;
       }
        $("#status").text(statusText);
   }

---

总结

以上就是今天要讲的内容，本文简单介绍了页面优化模块，具体参考 乐字节 Java电商秒杀项目。