页面静态化技术

最新推荐文章于 2024-03-22 13:52:21 发布

秦雩

最新推荐文章于 2024-03-22 13:52:21 发布

阅读量1.2k

点赞数

分类专栏： Java 文章标签： freemarker

本文链接：https://blog.csdn.net/m0_46351336/article/details/105901838

版权

Java 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

页面静态化

1动态页面：

通过执行asp、php、jsp和.net等程序生成客户端网页代码的网页。通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能。也是我们常见的。常见的扩展名有：.asp、php、jsp、cgi和aspx 等。注意：动态页面的“动态”是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面。

A．交互性好。

B．动态网页的信息都需要从数据库中读取，每打开一个一面就需要去获取一次数据库，如果访问人数很多，也就会对服务器增加很大的荷载，从而影响这个网站的运行速度。

2静态页面：

最早的时候，网站内容是通过在主机空间中放置大量的静态网页实现的。为了方便对这些分散在不同目录的静态网页的管理，（一般是通过FTP)，象frontpage/dreamweaver这样软件甚至直接提供了向主页空间以FTP方式直接访问文件的功能。以静态网页为主的网站最大的困难在于对网页的管理，在这种框架里，网页框架和网页中的内容混杂在一起，很大程度地加大了内容管理的难度。为了减轻这种管理的成本，发展出了一系列的技术，甚至连css本身，原本也是针对这种乱七八糟的网页维护而设计的，目的就是把网页表达的框架和内容本身抽象分离出来。

A．静态网页的内容稳定，页面加载速度快。

B．静态网页的没有数据库支持，在网站制作和维护方面的工作量较大。

C．静态网页的交互性差，有很大的局限性。

3为什么需要动态页面静态化：

搜索引擎的优化

尽管搜索机器人有点讨厌，各个网站不但不会再象从前一样把它封起来，反而热情无比地搞SEO，所谓的面向搜索引擎的优化，其中就包括访问地址的改写，令动态网页看上去是静态网页，以便更多更大量地被搜索引擎收录，从而最大限度地提高自已的内容被目标接收的机会。但是，在完全以动态技术开发的网站，转眼中要求变换成静态网页提供，同时，无论如何，动态网页的内容管理功能也是必须保留的；就如同一辆飞驶的奔驰忽然要求180度转弯，要付出的成本代价是非常大的，是否真的值得，也确实让人怀疑。

提高程序性能

很多大型网站，进去的时候看它很复杂的页面，但是加载也没有耗费多长时间，除了其它必要原因以外，静态化也是其中必需考虑的技术之一。

先于用户获取资源或数据库数据进而通过静态化处理，生成静态页面，所有人都访问这一个静态页面，而静态化处理的页面本身的访问速度要较动态页面快很多倍，因此程序性能会有大大的提升。

静态化在页面上的体现为：访问速度加快，用户体验性明显提升；在后台体现为：访问脱离数据库，减轻了数据库访问压力。

4、FreeMarker原理

基于Java的开发包和类库的一种将模板和数据进行整合并输出文本的通用工具，FreeMarker实现页面静态化的原理是：将页面中所需要的样式写入到 FreeMarker模板文件中，然后将页面所需要的数据进行动态绑定并放入到Map中，然后通过FreeMarker的模板解析类process()方法完成静态页面的生成。

模板 + 数据模型 = 输出,

注: 这里将省略freemarker的语法, 因为很多都是类似EL表达式的, 这里只提供几种情况的讲解, 其中包括: list, map, list和map混合 FMDemo.java:

public class FMDemo {

    //Freemarker
    public static void main(String[] args) throws Exception {
        
        Configuration conf = new Configuration();
        //模板+数据模型 = 输出
        //ftl: freemarker template
        //第一步: 读取html模板
        String dir = "C:\\workspace\\freemarker\\ftl\\";
        conf.setDirectoryForTemplateLoading(new File(dir));
        Template template = conf.getTemplate("freemarker.html");
        
        //第二步: 加载数据模型
        Map root = new HashMap();
        root.put("world", "世界你好");
        
        //List集合
        List<String> persons = new ArrayList<String>();
        persons.add("范冰冰");
        persons.add("李冰冰");
        persons.add("何炅");
        root.put("persons", persons);
        
        //Map集合
        Map map = new HashMap();
        map.put("fbb", "范冰冰");
        map.put("lbb", "李冰冰");
        root.put("map", map);
        
        //list和map混合
        List<Map> maps = new ArrayList<Map>();
        Map pms1 = new HashMap();
        pms1.put("id1", "范冰冰");
        pms1.put("id2", "李冰冰");
        Map pms2 = new HashMap();
        pms2.put("id1", "曾志伟");
        pms2.put("id2", "何炅");
        maps.add(pms1);
        maps.add(pms2);
        root.put("maps", maps);
        
        Writer out = new FileWriter(new File(dir + "hello.html"));
        template.process(root, out);
        System.out.println("生成完成");
    }
}

freemarker.html: 模板文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
${world}
<br/>

<#list persons as person>
    <#if person_index == 2>
        ${person}---红色
    <#else>
        ${person}---绿色
    </#if>
</#list><br/>

<#list map?keys as key>
    ${map[key]}
</#list>
${map.fbb}/${map.lbb}<br/>

<#list maps as map>
    <#list map?keys as key>
        ${map[key]}
    </#list>
</#list>
<#list maps as map>
    ${map.id1}///${map.id2}
</#list>
</body>
</html>

5、静态化页面在项目中的使用

当一个商品上架的时候, 通过发送消息来通知babasport-cms 来将对应的页面静态化. 在这里我们只写接收消息的方法,

CustomMessageListener.java:接收MQ中的消息

public class CustomMessageListener implements MessageListener{
    @Autowired
    private StaticPageService staticPageService;
    @Autowired
    private CMSService cmsService;
    
    @Override
    public void onMessage(Message message) {
        //先将接收到的消息强转为ActiveMQ类型的消息
        //因为在消息发送方那边传递的是Text类型的消息对象, 所以需要转成ActiveMQTextMessage
        ActiveMQTextMessage amtm = (ActiveMQTextMessage)message;
        try {
            String id = amtm.getText();
            System.out.println("CMS接收到的ID:"+id);
            Map<String, Object> root = new HashMap<String, Object>();
            
            Product product = cmsService.selectProductById(Long.parseLong(id));
            List<Sku> skus = cmsService.selectSkuListByProductIdWithStock(Long.parseLong(id));
            //去掉重复的颜色
            Set<Color> colors = new HashSet<Color>();
            for (Sku sku : skus) {
                colors.add(sku.getColor());
            }
            root.put("colors", colors);
            root.put("product", product);
            root.put("skus", skus);
            
            staticPageService.index(root, id);
        } catch (JMSException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}

StaticPageServiceImpl.java:

public class StaticPageServiceImpl implements StaticPageService, ServletContextAware{
    //SpringMvc 管理 conf
    private Configuration conf;
    public void setFreeMarkerConfig(FreeMarkerConfig freeMarkerConfig) {
        this.conf = freeMarkerConfig.getConfiguration();
    }

    //静态化页面的方法
    public void index(Map<String, Object> root, String id){
        //输出目录: 通过getPath方法获取的是绝对路径
        String path = getPath("/html/product/" + id +".html");
        File f = new File(path);
        File parentFile = f.getParentFile();
        if(!parentFile.exists()){
            parentFile.mkdirs();
        }
        
        //spring中已经设置了模板路径:<property name="templateLoaderPath" value="/WEB-INF/ftl/" />
        Writer out = null;
        
        try {
            //读
            Template template = conf.getTemplate("product.html");
            
            //设置输出的位置
            //写
            out = new OutputStreamWriter(new FileOutputStream(f), "UTF-8");
            template.process(root, out);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally {
            if (out != null)
            {
                try {
                    out.close();
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
            
        }
        
    }

    //获取webapp下的html文件夹所在的位置
    //将相对路径转换为绝对路径
    public String getPath(String path){
        return servletContext.getRealPath(path);
    }
    
    private ServletContext servletContext;
    @Override
    public void setServletContext(ServletContext servletContext) {
        this.servletContext = servletContext;
    }
}

使用Spring管理Freemarker配置文件:

<!-- 配置freemarker 实现类 -->    
        <bean class="cn.itcast.core.service.StaticPageServiceImpl">
            <property name="freeMarkerConfig">
                <bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
                    <!-- 设置模板所在目录或文件夹的位置, 相对路径  -->
                    <property name="templateLoaderPath" value="/WEB-INF/ftl/" />
                    <!-- 设置默认编码集 -->
                    <property name="defaultEncoding" value="UTF-8"></property>
                </bean>
            </property>
        </bean>

模板页面: product.html 中的改动:

引入其他页面:

<#include “commons/header.html” />

<div class="dd" id="colors">
    <#list colors as color>
    <div class="item" onclick="colorToRed(this,'${color.id}')">
        <b></b>
        <a href="javascript:;" title="${color.name }" >
        <img data-img="1"
            src="/images/53f44cc2N0b714cb2_002.jpg"
            alt="灰色三件套" height="25" width="25"><i>${color.name }</i></a>
    </div>
    </#list>
</div>

循环遍历imgUrls, 并且使用if…else 进行判断:

<div class="spec-items">
    <ul class="lh">
        <#list product.imgUrls as pic>
                <#if pic_index == 0>
                    <li><img data-img="1" class="img-hover"
                        alt="${product.name}" src="${pic}" width="50" height="50"></li>
                <#else>
                    <li><img data-img="1" alt="${product.name}" src="${pic}"
                        width="50" height="50" ></li>
                </#if>
        </#list>
    </ul>
</div>

秦雩

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面静态化技术

页面静态化1动态页面：通过执行asp、php、jsp和.net等程序生成客户端网页代码的网页。通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能。也是我们常见的。常见的扩展名有：.asp、php、jsp、cgi和aspx 等。注意：动态页面的“动态”是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面。...
复制链接

扫一扫