学习品优购总结[十二](网页静态化解决方案-Freemarker)

最新推荐文章于 2020-11-18 19:19:36 发布

ITShg

最新推荐文章于 2020-11-18 19:19:36 发布

阅读量274

点赞数

分类专栏：品优购项目文章标签： Java

本文链接：https://blog.csdn.net/weixin_39720449/article/details/95513881

版权

品优购项目专栏收录该内容

14 篇文章 1 订阅

订阅专栏

Freemarker

网页静态化技术和缓存技术的共同点都是为了减轻数据库的访问压力，但是具体的应用场景不同，缓存比较适合小规模的数据，而网页静态化比较适合大规模且相对变化不太频繁的数据。另外网页静态化还有利于SEO（搜索引擎优化）。如果将网页以纯静态化的形式展现，就可以使用Nginx这样的高性能的web服务器来部署。
FreeMarker 是一个用 Java 语言编写的模板引擎，它基于模板来生成文本输出。FreeMarker与 Web 容器无关，即在 Web 运行时，它并不知道 Servlet 或 HTTP。它不仅可以用作表现层的实现技术，而且还可以用于生成 XML，JSP 或 Java 等。
执行流程：
在这里插入图片描述

Freemarker入门DEMO

1.工程引入依赖

	    <dependency>
	    		<groupId>org.freemarker</groupId>
	    		<artifactId>freemarker</artifactId>
	    		<version>2.3.23</version>
	    </dependency>

2.创建模板文件，板文件中四种元素：
（1）文本，直接输出的部分
（2）注释，即<#–…-->格式不会输出（<!–…-->：会输出到页面的源代码）
（3）插值（Interpolation）：即${…}部分,将使用数据模型中的部分替代输出
（4）FTL指令：FreeMarker指令，和HTML标记类似，名字前加#予以区分，不会输出。

	    <body>
	    \${name},你好。\${message}
	    </body>

3.生成文件

//1.创建配置类
Configuration configuration=new Configuration(Configuration.getVersion());
//2.设置模板所在的目录 
configuration.setDirectoryForTemplateLoading(new File("(模板所在目录)..../src/main/resources/"));
//3.设置字符集
configuration.setDefaultEncoding("utf-8");
//4.加载模板
Template template = configuration.getTemplate("test.ftl");
//5.创建数据模型
Map map=new HashMap();
map.put("name", "张三 "); //name对应页面上{}中的变量名
map.put("message", "欢迎来到神奇的品优购世界！");//同上
//6.创建Writer对象
Writer out =new FileWriter(new File("d:\\test.html"));
//7.输出
template.process(map, out);
//8.关闭Writer对象
out.close();

FTL指令

1.assign指令

<#assign linkman="周先生">
联系人：${linkman}   //页面上的此处将显示周先生

<#assign info={"mobile":"13301231212",'address':'北京市昌平区王府街'} >
电话：${info.mobile}  地址：${info.address}  //页面上将显示电话和地址的值

2.include指令

<#include "head.ftl">  //页面中的此处引入别的模板进行显示

3.if指令

    <#if success=true>  //FTL指令中=为判断，不是赋值，也可以使用==
      你已通过实名认证
    <#else>  
      你未通过实名认证
    </#if>
    
    map.put("success", true);//后台代码中

4.list指令

		List goodsList=new ArrayList();
		Map goods1=new HashMap();
		goods1.put("name", "苹果");
		goods1.put("price", 5.8);
		Map goods2=new HashMap();
		goods2.put("name", "香蕉");
		goods2.put("price", 2.5);
		Map goods3=new HashMap();
		goods3.put("name", "橘子");
		goods3.put("price", 3.2);
		goodsList.add(goods1);
		goodsList.add(goods2);
		goodsList.add(goods3);
		map.put("goodsList", goodsList);
		
	    <#list goodsList as goods> //页面中循环集合
	      ${goods_index+1} 商品名称： ${goods.name} 价格：${goods.price}<br>
	    </#list>				//_index：在循环中获取每一个被遍历的索引

5.内建函数

    <#assign data=text?eval><br/>//？eval是将字符串转化为对象
    ${data.one}+${data.two}<br>
    
    当前日期：${date?date}<br>//?date是获取当前日期
    当前时间：${date?time}<br>//?time是获取当前时间
    当前日期+时间：${date?datetime}<br>//?datatime是获取当前日期+时间
    日期格式化：${date?string('yyyy年MM月dd日 hh:mm:ss')}<br>//获取当前日期格式化
    
    数字未格式化：${number}
    数字格式化：${number?c}//如果不加?c那么数字将三个三个被，分隔

结果：
在这里插入图片描述
6.获取集合大小

 ${goodsList?size} //集合名？size

7.空值处理运算符
（1）aaa?? 判断变量是否为null,需要<#if>使用
（2）${bbb!‘bbb没有被赋值’}：如果变量为null，则设置默认显示的值
（3）${ccc!} ：如果变量为null，不显示

8.比较运算符
注意: =和!=可以用于字符串,数值和日期来比较是否相等,但=和!=两边必须是相同类型的值,否则会产生错误,而且FreeMarker是精确比较,“x”,"x ","X"是不等的.其它的运行符可以作用于数字和日期,但不能作用于字符串,大部分的时候,使用gt等字母运算符代替>会有更好的效果,因为 FreeMarker会把>解释成FTL标签的结束字符,当然,也可以使用括号来避免这种情况,如:<#if (x>y)>

数量增减

    $scope.addNum=function(x){
   		$scope.num=$scope.num+x;
   		if($scope.num<1){
   			$scope.num=1;
   		}
   	}
    	
    <body ng-app="pinyougou" ng-controller="itemController" ng-init="num=1">
    
    <div class="controls">
    	<input autocomplete="off" type="text" value="{{num}}" minnum="1" class="itxt" />
    	<a href="javascript:void(0)" class="increment plus" ng-click="addNum(1)" >+</a>
    	<a href="javascript:void(0)" class="increment mins" ng-click="addNum(-1)">-</a>
    </div>

JS判断对象内容是否相等

如何知道选择的规格对应哪个sku信息
通过spec和specificationItems数据内容对比，一致，就可以找到对应的sku信息。
比较的思路：
在这里插入图片描述

	matchObject=function(map1,map2){		
		for(var k in map1){
			if(map1[k]!=map2[k]){
				return false;
			}			
		}
		for(var k in map2){
			if(map2[k]!=map1[k]){
				return false;
			}			
		}
		return true;		
	}