java初探（1）之静态页面化—

利用服务端缓存技术，将页面和对象缓存在redis中，可以减少时间浪费，内存开销。但在每次请求的过程中，仍然会有大量静态资源的请求和返回。

使用静态页面技术，页面不必要使用页面交互技术，比如thymeleaf，jsp等。而是写一个纯的html静态页面，然后在页面端通过js的ajax请求，获得数据，并通过配置，将静态页面直接缓存到客户端，等下次请求的时候，如果页面没有发生变化，则可以不用对静态资源进行提交和返回。

当进入商品列表页面时，详情的点击不在通过controller类来将缓存的html返回，而是直接跳转到商品详情的页面，并给一个商品id的参数

<td><a th:href="'/goods_detail.htm?goodsId='+${goods.id}">详情</a></td>

商品详情页纯html页面

<!DOCTYPE HTML>

<html >

<head>

    <title>商品详情</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- jquery -->

    <script type="text/javascript" src="/js/jquery.min.js"></script>

    <!-- bootstrap -->

    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" />

    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>

    <!-- jquery-validator -->

    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script>

    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>

    <!-- layer -->

    <script type="text/javascript" src="/layer/layer.js"></script>

    <!-- md5.js -->

    <script type="text/javascript" src="/js/md5.min.js"></script>

    <!-- common.js -->

    <script type="text/javascript" src="/js/common.js"></script>

</head>

<body>

<div class="panel panel-default">

    <div class="panel-heading">秒杀商品详情</div>

    <div class="panel-body">

        <span id="userTip"> 您还没有登录，请登陆后再操作<br/></span>

        <span>没有收货地址的提示。。。</span>

    </div>

    <table class="table" id="goodslist">

        <tr>

            <td>商品名称</td>

            <td colspan="3" id="goodsName"></td>

        </tr>

        <tr>

            <td>商品图片</td>

            <td colspan="3"><img  id="goodsImg" width="200" height="200" /></td>

        </tr>

        <tr>

            <td>秒杀开始时间</td>

            <td id="startTime"></td>

            <td >

                <input type="hidden" id="remainSeconds" />

                <span id="miaoshaTip"></span>

            </td>

            <td>

                <!--

                    <form id="miaoshaForm" method="post" action="/miaosha/do_miaosha">

                        <button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒杀</button>

                        <input type="hidden" name="goodsId"  id="goodsId" />

                    </form>-->

                <button class="btn btn-primary btn-block" type="button" id="buyButton"onclick="doMiaosha()">立即秒杀</button>

                <input type="hidden" name="goodsId"  id="goodsId" />

            </td>

        </tr>

        <tr>

            <td>商品原价</td>

            <td colspan="3" id="goodsPrice"></td>

        </tr>

        <tr>

            <td>秒杀价</td>

            <td colspan="3"  id="miaoshaPrice"></td>

        </tr>

        <tr>

            <td>库存数量</td>

            <td colspan="3"  id="stockCount"></td>

        </tr>

    </table>

</div>

</body>

</html>

删去所有与thymeleaf相关的标签，将需要展示变量的地方，设置id属性

然后提供一个入口函数

$(function () {

        getDetail();

    });

    function getDetail() {

        //获取goodsId

        var goodsId=g_getQueryString("goodsId");

        //设置ajax请求，得到数据

        $.ajax({

            url:"/goods/detail/"+goodsId,

            type:"GET",

            success:function (data) {

                if(data.code==0){

                    //展示数据

                }else{

                    //展示错误信息

                    layer.msg(data.msg);

                }

            },

            error:function () {

                //未请求成功信息

                layer.msg("客户端请求有误")

            }

        });

    }

修改controller类，向页面发送所需要的数据

detail方法

@RequestMapping(value = "/to_detail/{goodsId}")

    @ResponseBody

    public Result<GoodsDetailVo> detail( MiaoshaUser user,

                                        @PathVariable("goodsId") long goodsId){

        //得到商品信息

        GoodsVo goods = goodsService.getGoodsVoByGoodsId(goodsId);

        //得到秒杀的开始时间、结束时间、以及当前时间

        long startAt = goods.getStartDate().getTime();

        long endAt = goods.getEndDate().getTime();

        long now = System.currentTimeMillis();

        //设置剩余时间

        int remainSeconds=0;

        //设置秒杀状态

        int miaoshaStatus=0;

        //判断

        if(now<startAt){

            //秒杀还没开始

            miaoshaStatus=0;

            remainSeconds= (int) ((startAt-now)/1000);

        }else if(now>endAt){

            //秒杀已经结束

            miaoshaStatus=2;

            remainSeconds=-1;

        }else {

            //秒杀正在进行

            miaoshaStatus=1;

            remainSeconds=0;

        }

        //创建商品详情的类

        GoodsDetailVo vo=new GoodsDetailVo();

        vo.setGoods(goods);

        vo.setRemainSeconds(remainSeconds);

        vo.setUser(user);

        vo.setMiaoshaStatus(miaoshaStatus);

        //返回页面需要的信息

        return Result.success(vo);

    }

当入口函数得到数据之后，就可以编写展示数据的js代码，一般这些代码是使用前端框架进行编写的。

function render(detail) {

        //取到vo传过来的四个属性

        var miaoshaStatus = detail.miaoshaStatus;

        var  remainSeconds = detail.remainSeconds;

        var goods = detail.goods;

        var user = detail.user;

        //逻辑判断

        //如果用户存在，则隐藏需要登录的提醒

        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);

        $("#miaoshaPrice").text(goods.miaoshaPrice);

        $("#stockCount").text(goods.stockCount);

        //引入倒计时

        countDown();

    }

    function countDown() {

        //获取剩余时间

        var remainSeconds = $("#remainSeconds").val();

        //定义超时变量

        var timeout;

        if(remainSeconds>0){

            //秒杀还没有开始

            //隐藏秒杀的按钮，展示倒计时提醒

            $("#buyButton").attr("disabled", true);

            $("#miaoshaTip").html("秒杀倒计时："+remainSeconds+"秒");

            //利用setTimeout进行时间控制

            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);

            }

            $("#miaoshaTip").html("秒杀进行中");

        }else {

            //秒杀已经结束

            $("#buyButton").attr("disabled", true);

            $("#miaoshaTip").html("秒杀已经结束");

        }

    }

以上就将详情页静态化了

秒杀的静态化

点击立即秒杀按钮，将执行doMiaosha()的js代码，又是一个ajax请求，但这次不是跳转到静态页面，而是通过Controller类来做一定的秒杀逻辑，然后返回值，如果秒杀成功，则跳转到静态页面。而静态页面也将静态化。

function doMiaosha() {

        $.ajax({

            url:"/miaosha/do_miaosha",

            type:"POST",

            data:{

                goodsId:$("#goodsId").val(),

            },

            success:function(data){

                if(data.code == 0){

                    window.location.href="/order_detail.htm?orderId="+data.data.id;

                }else{

                    layer.msg(data.msg);

                }

            },

            error:function(){

                layer.msg("客户端请求有误");

            }

        });

    }

修改controller类的"/miaosha/do_miaosha"请求，将直接返回页面，到现在将结果返回来判断是否跳转到另一个静态页面。

@RequestMapping(value = "/do_miaosha",method = RequestMethod.POST)

    @ResponseBody

    public Result<OrderInfo> list(Model model, MiaoshaUser user,

                       @RequestParam("goodsId") long goodsId){

        model.addAttribute("user",user);

        if(user==null){

            //如果没有获取到user值，报异常

            return Result.error(CodeMsg.SESSION_ERROR);

        }

        //判断库存

        GoodsVo goods = goodsService.getGoodsVoByGoodsId(goodsId);

        Integer stock= goods.getStockCount();

        if(stock<=0){

            model.addAttribute("errmsg", CodeMsg.MIAO_SHA_OVER.getMsg());

            return Result.error(CodeMsg.MIAO_SHA_OVER);

        }

        //判断是否已经秒杀到了

        MiaoshaOrder order=orderService.getMiaoshaOrderByUserIdGoodsId(user.getId(), goodsId);

        if(order!=null){

            return Result.error(CodeMsg.REPEATE_MIAOSHA);

        }

        //进行秒杀逻辑

        //减库存，下订单，写入秒杀订单

        OrderInfo orderInfo=miaoshaService.miaosha(user, goods);

        return Result.success(orderInfo);

    }

当秒杀成功，将返回一个订单信息的类，然后将订单id拿到作为参数跳转到订单页面

当然，订单页面也将是一个纯html的静态页面，并将通过入口函数，得到所有需要的数据。

订单的html页面

<!DOCTYPE HTML>

<html>

<head>

    <title>订单详情</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- jquery -->

    <script type="text/javascript" src="/js/jquery.min.js"></script>

    <!-- bootstrap -->

    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" />

    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>

    <!-- jquery-validator -->

    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script>

    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>

    <!-- layer -->

    <script type="text/javascript" src="/layer/layer.js"></script>

    <!-- md5.js -->

    <script type="text/javascript" src="/js/md5.min.js"></script>

    <!-- common.js -->

    <script type="text/javascript" src="/js/common.js"></script>

</head>

<body>

<div class="panel panel-default">

    <div class="panel-heading">秒杀订单详情</div>

    <table class="table" id="goodslist">

        <tr>

            <td>商品名称</td>

            <td colspan="3" id="goodsName"></td>

        </tr>

        <tr>

            <td>商品图片</td>

            <td colspan="2"><img  id="goodsImg" width="200" height="200" /></td>

        </tr>

        <tr>

            <td>订单价格</td>

            <td colspan="2"  id="orderPrice"></td>

        </tr>

        <tr>

            <td>下单时间</td>

            <td id="createDate" colspan="2"></td>

        </tr>

        <tr>

            <td>订单状态</td>

            <td id="orderStatus">

            </td>

            <td>

                <button class="btn btn-primary btn-block" type="submit" id="payButton">立即支付</button>

            </td>

        </tr>

        <tr>

            <td>收货人</td>

            <td colspan="2">玉皇大帝</td>

        </tr>

        <tr>

            <td>收货地址</td>

            <td colspan="2">天宫一号</td>

        </tr>

    </table>

</div>

</body>

入口函数，请求数据的逻辑

 //入口函数

    $(function () {

        getOrderDetail();

    })

    function getOrderDetail() {

        //一个ajax请求

        var orderId = g_getQueryString("orderId");

        $.ajax({

            url:"/order/detail",

            type:"GET",

            data:{

                orderId:orderId

            },

            success:function(data){

                if(data.code == 0){

                    //展示数据

                    render(data.data);

                }else{

                    layer.msg(data.msg);

                }

            },

            error:function(){

                layer.msg("客户端请求有误");

            }

        });

    }

控制器代码

@Controller

@RequestMapping("/order")

public class OrderController {

    @Autowired

    private OrderService orderService;

    @Autowired

    private GoodsService goodsService;

    @RequestMapping("/detail")

    @ResponseBody

    public Result<OrderDetailVo> info(Model model, MiaoshaUser user,

                                      @RequestParam("orderId") long orderId){

        //判断用户是否存在

        if(user==null){

            return Result.error(CodeMsg.SESSION_ERROR);

        }

        //获取order

        OrderInfo order = orderService.getOrderById(orderId);

        if(order==null){

            Result.error(CodeMsg.ORDER_NOT_EXIST);

        }

        //得到订单页面需要的参数

        long goodsId = order.getGoodsId();

        GoodsVo goods = goodsService.getGoodsVoByGoodsId(goodsId);

        OrderDetailVo vo = new OrderDetailVo();

        vo.setOrder(order);

        vo.setGoods(goods);

        return Result.success(vo);

    }

}

订单页面内js的数据展示代码

function render(detail) {

    //获取商品和订单信息

    var goods = detail.goods;

    var order = detail.order;

    //对数据进行展示

    $("#goodsName").text(goods.goodsName);

    $("#goodsImg").attr("src", goods.goodsImg);

    $("#orderPrice").text(order.goodsPrice);

    $("#createDate").text(new Date(order.createDate).format("yyyy-MM-dd hh:mm:ss"));

    //对订单的状态进行判断

    var status = "";

    if(order.status == 0){

        status = "未支付"

    }else if(order.status == 1){

        status = "待发货";

        $("payButton").hide();

    }

    $("#orderStatus").text(status);

}

到此，页面的静态化就完成了

java初探（1）之静态页面化——客户端缓存的更多相关文章

使用Varnish+ESI实现静态页面的局部缓存（思路篇）
使用Varnish+ESI实现静态页面的局部缓存(思路篇) 页面静态化是搭建高性能网站必用的招式之一,页面静态化可以有效提升系统响应速度,同时也有利于搜索引擎优化.但在页面静态化后,静态页面之间包含( ...
Nginx设置静态页面压缩和缓存过期时间的方法
使用nginx服务器的朋友可能都知道需要设置html静态页面缓存与页面压缩与过期时间的设置了,下面我来给各位同学介绍一下配置方法,包括对ico,gif,bmp,jpg,jpeg,swf,js,css, ...
Nginx设置静态页面压缩和缓存过期时间的方法（转）
使用nginx服务器的朋友可能都知道需要设置html静态页面缓存与页面压缩与过期时间的设置了,下面我来给各位同学介绍一下配置方法,包括对ico,gif,bmp,jpg,jpeg,swf,js,css, ...
实战派 | Java项目中玩转Redis6.0客户端缓存！
原创:微信公众号码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是Hydra. 在前面的文章中,我们介绍了Redis6.0中的新特性客户端缓存client-side caching,通过tel ...
「Java Web」主页静态化的实现
一个站点的主页一般不会频繁变动,而大多数用户在訪问站点时不过浏览一下主页(未登陆).然后就离开了.对于这类訪问请求.假设每次都要通过查询数据库来显示主页的话,显然会给server带来多余的压力. 这时 ...
阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_09-课程详情页面静态化-静态页面测试
4 课程详情页面静态化 4.1 静态页面测试 4.1.1 页面内容组成我们在编写一个页面时需要知道哪些信息是静态信息,哪些信息为动态信息,下图是页面的设计图: 打开静态页面,观察每部分的内容. 红色 ...
JavaWeb页面静态化之使用freemarker模板生成一个html静态页面
题外话: 页面静态化(展示数据从JSP页面变成HTML页面)实现方式-->模板技术从本质上来讲,模板技术是一个占位符动态替换技术.一个完整的模板技术需要四个元素:①模板语言(使 ...
Java项目生成静态页面
第一次做项目需要生成静态页面,网上很多大牛对将网页生成静态页面有很多异议.说一下我的看法. 不外乎有以下因素: 1.从页面加载时间来看:静态页面不需要与数据库建立连接,尤其是访问数据量较大的页面,这种 ...
`＜jsp:getProperty＞`动作和`＜jsp:setProperty＞`动作的使用在一个静态页面填写图书的基本信息，页面信息提交给其他页面，并且在其页面显示。要去将表单元素的值赋值给Java
<jsp:getProperty>动作和<jsp:setProperty>动作的使用 1.<jsp:getProperty>动作语法格式: <jsp:get ...

随机推荐

【可视化-2】将图像当作DSM进行三维显示
上一篇文章中,已经跳出颜色或者亮度的局限,将图像视作一般化的栅格数据,并提供了四种利用颜色和亮度来直观表示栅格间取值差异的可视化方法. 栅格数据的四种可视化方式这一回,我们又要从一般化走向特殊化.栅 ...
Spring Security学习笔记一
一.使用Spring Security 1.在pom 文件中添加Spring Security的依赖. <dependency> <groupId>org.springfram ...
033_go语言中的打点器
代码演示 package main import "fmt" import "time" func main() { ticker := time.NewTic ...
U盘数据泄露，用不到30行的Python代码就能盗走
今天跟大家分享下一段简单的代码,希望能给经常用U盘的人警戒,提高信息安全意识. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做 ...
2020-07-06：一个6亿的表a，一个3亿的表b，通过外间tid关联，你如何最快的查询出满足条件的第50000到第50200中的这200条数据记录
福哥答案2020-07-06:表a和表b的字段都是id和tid,数据类型都是int.查询结果顺序上以表a 为准.1.JOIN.SELECT * FROM a JOIN b ON a.tid = b. ...
Centos系统安装Python3.7
服务器安装Python3.7,实测可用原博客地址首先要先安装依赖包: yum install zlib-devel bzip2-devel openssl-devel ncurses-devel ...
Python 用DataFrame读存 excel
读代码: import pandas as pd e = r'D:\pywork\12\excel信息表.xlsx' df = pd.DataFrame(pd.read_excel(e)) 存 D. ...
python 01 print input int
学过c语言与c语言的数据结构与算法后再来学习python,感觉编程的核心内容没有变,但每个编程语言都有自己的特点.本次学习的目标是理解python的特点与用法,把学过的bif(内置函数)用法记录下来, ...
springboot 读取resources下的文件然后下载
记录下代码 /** * 下载模板 * * @param response * @param request */ @RequestMapping(value = "downloadTemp& ...
vant官网无法打开,这里教你解决
是否大家和我一样,vant-weapp官网突然打不开了像这样: 但我发现在码云上有一个国内的版本 https://vant-contrib.gitee.io/vant/#/zh-CN/home, ...

java初探（1）之静态页面化——客户端缓存

商品详情页纯html页面

秒杀的静态化

订单的html页面

java初探（1）之静态页面化——客户端缓存的更多相关文章

随机推荐

热门专题

商品详情页纯html页面　　