系列文章目录
刚入门Java的硕士宝宝,实验室没什么Java项目,看到网上的秒杀项目,跟着学习并且记录一下,可能错误会很多,欢迎大家指正。
前言
本文介绍页面优化模块,具体详细介绍缓存和页面静态化。
一、缓存
1.页面缓存
-
概念:
页面缓存是指将整个页面的内容缓存起来,以减少页面生成的时间和服务器的负载,从而提高网站的响应速度。 -
特点:
缓存的是完整的 HTML 页面内容;
适用于页面内容变化较少、频繁访问的静态页面;
可以通过设置缓存时间或根据页面内容的变化来更新缓存。 -
应用场景:
适用于静态页面、产品详情页、常规文章页面等内容不经常变化的页面。
2.URL 缓存
- 概念:
URL 缓存是指将特定 URL 对应的内容缓存起来,以加快页面加载速度和降低服务器负载。 - 特点:
缓存的是特定 URL 对应的页面或资源;
可以根据 URL 的路径、查询参数等信息进行缓存;
适用于动态页面中的特定资源、接口等。 - 应用场景:
适用于动态页面中的一些静态资源、动态内容较少的页面等。
3.对象缓存
- 概念:
对象缓存是指将数据库中的数据对象(如用户信息、文章内容等)缓存到内存中,以提高数据的读取速度和降低数据库访问压力。 - 特点:
缓存的是数据对象或实体;
可以根据缓存键(如对象 ID)来存储和获取缓存数据;
适用于频繁访问且不经常变化的数据对象。 - 应用场景:
适用于用户信息、商品信息、文章内容等频繁访问的数据对象。
4.三者的区别
- 页面缓存适用于静态页面或者内容变化不频繁的页面,可以减少服务器负载和提高响应速度;
- URL 缓存适用于动态页面中的一些静态资源或者动态内容较少的页面,可以加快页面加载速度;
- 对象缓存适用于频繁访问的数据对象,可以减少数据库访问次数,提高数据读取速度。
二、页面静态化
前后端分离,就是浏览器将HTML页面存在客户端,通过ajax获取数据拿到客户端在渲染页面。这样就不用下载页面了,只需要下载动态数据就好了。
- 商品详情静态化:
$(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("客户端请求错误");
}
})
}
- 订单详情静态化:
$(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电商秒杀项目。