品优购Ⅷ—网页静态化解决方案Freemarker


阅读数: 次   

EverydayOneCat

睡过头！！！

img

一、网页静态化技术Freemarker

1.为什么要使用网页静态化技术

网页静态化解决方案在实际开发中运用比较多，例如新闻网站，门户网站中的新闻频道或者是文章类的频道。

对于电商网站的商品详细页来说，至少几百万个商品，每个商品又有大量的信息，这样的情况同样也适用于使用网页静态化来解决。

网页静态化技术和缓存技术的共同点都是为了减轻数据库的访问压力，但是具体的应用场景不同，缓存比较适合小规模的数据，而网页静态化比较适合大规模且相对变化不太频繁的数据。另外网页静态化还有利于SEO。

另外我们如果将网页以纯静态化的形式展现，就可以使用Nginx这样的高性能的web服务器来部署。Nginx可以承载5万的并发，而 Tomcat只有几百。

2.什么是Freemarker

FreeMarker 是一个用 Java 语言编写的模板引擎，它基于模板来生成文本输出。FreeMarker与 Web 容器无关，即在 Web 运行时，它并不知道 Servlet 或 HTTP。它不仅可以用作表现层的实现技术，而且还可以用于生成 XML，JSP 或 Java 等。

image-20200818105632730

2.1创建模板文件

模板文件中四种元素

1、文本，直接输出的部分
2、注释，即<#—…—>格式不会输出
3、插值（Interpolation）：即${..}部分,将使用数据模型中的部分替代输出
4、FTL指令：FreeMarker指令，和HTML标记类似，名字前加#予以区分，不会输出。

我们现在就创建一个简单的创建模板文件test.ftl

1
2
3
4
5
6
7
8
9
10
<html>
<head>
	<meta charset="utf-8">
	<title>Freemarker入门小DEMO </title>
</head>
<body>
<#--我只是一个注释，我不会有任何输出  -->
${name},你好。${message}
</body>
</html>

2.2生成文件

第一步：创建一个 Configuration 对象，直接 new 一个对象。构造方法的参数就是 freemarker的版本号。
第二步：设置模板文件所在的路径。
第三步：设置模板文件使用的字符集。一般就是 utf-8.
第四步：加载一个模板，创建一个模板对象。
第五步：创建一个模板使用的数据集，可以是 pojo 也可以是 map。一般是 Map。
第六步：创建一个 Writer 对象，一般创建一 FileWriter 对象，指定生成的文件名。
第七步：调用模板对象的 process 方法输出文件。
第八步：关闭流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//1.创建配置类
Configuration configuration=new Configuration(Configuration.getVersion());
//2.设置模板所在的目录 
configuration.setDirectoryForTemplateLoading(new File("D:/pinyougou_work/freemarkerDemo/src/main/resources/"));
//3.设置字符集
configuration.setDefaultEncoding("utf-8");
//4.加载模板
Template template = configuration.getTemplate("test.ftl");
//5.创建数据模型
Map map=new HashMap();
map.put("name", "张三 ");
map.put("message", "欢迎来到神奇的品优购世界！");
//6.创建Writer对象
Writer out =new FileWriter(new File("d:\\test.html"));
//7.输出
template.process(map, out);
//8.关闭Writer对象
out.close();

image-20200818110836418

2.3FTL指令

1、assign指令——此指令用于在页面上定义一个变量

（1）定义简单类型：

1
2
<#assign linkman="周先生">
联系人：${linkman}

（2）定义对象类型：

1
2
<#assign info={"mobile":"13301231212",'address':'北京市昌平区王府街'} >
电话：${info.mobile}  地址：${info.address}

2、include指令——此指令用于模板文件的嵌套

创建模板文件head.ftl

1
<h1>黑马信息网</h1>

我们修改test.ftl，在模板文件中使用include指令引入刚才我们建立的模板

1
<#include  "head.ftl">

3、if指令

1
2
3
4
5
<#if success=true>
  你已通过实名认证
<#else>  
  你未通过实名认证
</#if>

在代码中对str变量赋值

1
map.put("success", true);

在freemarker的判断中，可以使用= 也可以使用==

4、list指令

（1）代码中对变量goodsList赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);

（2）在模板文件上添加

1
2
3
4
----商品价格表----<br>
<#list goodsList as goods>
  ${goods_index+1} 商品名称： ${goods.name} 价格：${goods.price}<br>
</#list>

如果想在循环中得到索引，使用循环变量+_index就可以得到。

2.4内建函数

内建函数语法格式： 变量+?+函数名称

1、获取集合大小

我们通常要得到某个集合的大小，使用size函数来实现，代码如下：

1
共  ${goodsList?size}  条记录

2、转换JSON字符串为对象

1
2
3
<#assign text="{'bank':'工商银行','account':'10101920201920212'}" />
<#assign data=text?eval />
开户行：${data.bank}  账号：${data.account}

3、日期格式化

代码中对变量赋值：

1
dataModel.put("today", new Date());

在模板文件中加入

1
2
3
4
当前日期：${today?date} <br>
当前时间：${today?time} <br>   
当前日期+时间：${today?datetime} <br>        
日期格式化：  ${today?string("yyyy年MM月")}

4、数字转换为字符串

代码中对变量赋值：

1
map.put("point", 102920122);

修改模板：

1
累计积分：${point}

页面显示：image-20200818112335736

我们会发现数字会以每三位一个分隔符显示，有些时候我们不需要这个分隔符，就需要将数字转换为字符串,使用内建函数c

1
累计积分：${point?c}

页面显示效果如下：image-20200818112408049

2.5空值处理运算符

如果你在模板中使用了变量但是在代码中没有对变量赋值，那么运行生成时会抛出异常。但是有些时候，有的变量确实是null，怎么解决这个问题呢？

1、判断某变量是否存在:“??”

用法为:variable??,如果该变量存在,返回true,否则返回false 

1
2
3
4
5
<#if aaa??>
  aaa变量存在
<#else>
  aaa变量不存在
</#if>

2、缺失变量默认值:“!”

我们除了可以判断是否为空值，也可以使用!对null值做转换处理

在模板文件中加入

1
${aaa!'-'}

在代码中不对aaa赋值，也不会报错了 ，当aaa为null则返回！后边的内容-

2.6运算符

FreeMarker表达式中完全支持算术运算,FreeMarker支持的算术运算符包括:+, - , * , / , %

逻辑运算符有如下几个:
逻辑与:&&
逻辑或:||
逻辑非:!
逻辑运算符只能作用于布尔值,否则将产生错误

表达式中支持的比较运算符有如下几个:
1 =或者==:判断两个值是否相等.
2 !=:判断两个值是否不等.
3 >或者gt:判断左边值是否大于右边值
4 >=或者gte:判断左边值是否大于等于右边值
5 <或者lt:判断左边值是否小于右边值
6 <=或者lte:判断左边值是否小于等于右边值

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

二、商品详情页

1.搭建工程

1.1服务接口层

创建pinyougou-page-interface工程，创建com.pinyougou.page.service包,包下创建接口

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 商品详细页接口
 * @author Administrator
 *
 */
public interface ItemPageService {
	/**
	 * 生成商品详细页
	 * @param goodsId
	 */
	public boolean genItemHtml(Long goodsId);
}

1.2服务实现层

（1）创建war工程pinyougou-page-service

（2）pom.xml引入依赖 参见其它服务工程, 另外添加freemarker依赖

1
2
3
4
<dependency>
		<groupId>org.freemarker</groupId>
		<artifactId>freemarker</artifactId>
</dependency>

spring配置文件需另外配置：

1
2
3
4
<bean id="freemarkerConfig"	class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
    <property name="templateLoaderPath" value="/WEB-INF/ftl/" />
    <property name="defaultEncoding" value="UTF-8" />
</bean>

创建属性文件，用于配置网页生成目录

1
pagedir=d:\\item\\

建立com.pinyougou.page.service.impl包，包下建立类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@Service(timeout=5000)
public class ItemPageServiceImpl implements ItemPageService {

	@Autowired
	private FreeMarkerConfig freeMarkerConfig;
	@Autowired
	private TbGoodsMapper goodsMapper;
	@Autowired
	private TbGoodsDescMapper goodsDescMapper;
	@Autowired
	private TbItemCatMapper itemCatMapper;
	@Autowired
	private TbItemMapper itemMapper;

	
	@Value("${pagedir}")
	private String pagedir;

	
	@Override
	public boolean genItemHtml(Long goodsId) {
		try {
			Configuration configuration = freeMarkerConfig.getConfiguration();
			Template template = configuration.getTemplate("item.ftl");
			Map dataModel = new HashMap();
			//1.加载商品表数据
			TbGoods goods = goodsMapper.selectByPrimaryKey(goodsId);
			dataModel.put("goods", goods);
			//2.加载商品扩展表数据			
			TbGoodsDesc goodsDesc = goodsDescMapper.selectByPrimaryKey(goodsId);
			dataModel.put("goodsDesc", goodsDesc);	
			//3.商品分类
			String itemCat1 = itemCatMapper.selectByPrimaryKey(goods.getCategory1Id()).getName();
			String itemCat2 = itemCatMapper.selectByPrimaryKey(goods.getCategory2Id()).getName();
			String itemCat3 = itemCatMapper.selectByPrimaryKey(goods.getCategory3Id()).getName();
			dataModel.put("itemCat1", itemCat1);
			dataModel.put("itemCat2", itemCat2);
			dataModel.put("itemCat3", itemCat3);
			//4.读取SKU数据
			TbItemExample example = new TbItemExample();
			Criteria criteria = example.createCriteria();
			criteria.andStatusEqualTo("1");//状态为有效
			criteria.andGoodsIdEqualTo(goodsId);//指定SPU ID
			example.setOrderByClause("is_default desc");//按照状态降序，保证第一个为默认			
			List<TbItem> itemList = itemMapper.selectByExample(example);		
			dataModel.put("itemList", itemList);

			
			Writer out = new FileWriter(pagedir+goodsId+".html");
			String dir=pagedir + goodsId + ".html";
			 OutputStreamWriter writer = new OutputStreamWriter(new FileOutputStream(dir), "UTF-8");
			 PrintWriter printWriter = new PrintWriter(writer);
			template.process(dataModel, printWriter);
			out.close();
			return true;
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return false;
	}

}

1.3运营商管理后台

（1）pinyougou-manager-web引入依赖pinyougou-page-interface

（2）在GoodsController.java中新增方法

1
2
3
4
5
6
7
8
9
10
@Reference(timeout=40000)
private ItemPageService itemPageService;
/**
	 * 生成静态页（测试）
	 * @param goodsId
	 */
@RequestMapping("/genHtml")
public void genHtml(Long goodsId){
    itemPageService.genItemHtml(goodsId);	
}

2.前端逻辑

数据显示同前面介绍过的Freemarker指令函数能轻松表示出来，这里就不过多赘述。这里主要介绍前端页面如何通过AngularJS动态变化。

2.1购买数量加减操作

在js目录下构建controller文件夹，创建itemController.js

1
2
3
4
5
6
7
8
9
10
//商品详细页（控制层）
app.controller('itemController',function($scope){
	//数量操作
	$scope.addNum=function(x){
		$scope.num=$scope.num+x;
		if($scope.num<1){
			$scope.num=1;
		}
	}		
});

2.2规格选择

修改itemController.js

1
2
3
4
5
6
7
8
9
10
11
12
13
$scope.specificationItems={};//记录用户选择的规格
//用户选择规格
$scope.selectSpecification=function(name,value){	
    $scope.specificationItems[name]=value;
}	
//判断某规格选项是否被用户选中
$scope.isSelected=function(name,value){
    if($scope.specificationItems[name]==value){
        return true;
    }else{
        return false;
    }		
}

页面调用控制器的方法

1
2
3
4
5
6
7
<dd>
    <a  class="{{isSelected('${specification.attributeName}','${item}')?'selected':''}}" 
       ng-click="selectSpecification('${specification.attributeName}','${item}')">
        ${item}								   			
        <span title="点击取消选择">&nbsp;</span>
    </a>
</dd>

2.3读取SKU信息

需求：当我们选择规格后，应该在页面上更新商品名称为SKU的商品标题，价格也应该为SKU的商品价格。

修改模板：

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
       //SKU商品列表
	   var skuList=[    	    
	    	    <#list itemList as item>  	    	    	
		    		{
		    		"id":${item.id?c},
		    		"title":"${item.title!''}",
		    		"price":${item.price?c},		    		
		    		"spec": ${item.spec}	
		    		} ,     		
	    		</#list>
	   ];  
</script>

测试生成，发现页面源代码中生成了变量

image-20200916163214051

2.4加载默认SKU信息

修改itemController.js

1
2
3
4
5
//加载默认SKU
$scope.loadSku=function(){
    $scope.sku=skuList[0];		
    $scope.specificationItems= JSON.parse(JSON.stringify($scope.sku.spec)) ;
}

修改模板item.ftl

1
<body ng-app="pinyougou" ng-controller="itemController" ng-init="num=1;loadSku()">

2.5选择规格更新SKU

修改itemController.js , 编写匹配对象的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//匹配两个对象
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;		
}

编写方法，在SKU列表中查询当前用户选择的SKU

1
2
3
4
5
6
7
8
9
10
//查询SKU
searchSku=function(){
    for(var i=0;i<skuList.length;i++ ){
        if( matchObject(skuList[i].spec ,$scope.specificationItems ) ){
            $scope.sku=skuList[i];
            return ;
        }			
    }	
    $scope.sku={id:0,title:'--------',price:0};//如果没有匹配的		
}

在用户选择规格后触发读取方法

1
2
3
4
5
//用户选择规格
$scope.selectSpecification=function(name,value){	
		$scope.specificationItems[name]=value;
		searchSku();//读取sku
}

结语

回归了各位！这篇算是一半一个多月之前写的一半现在写的，后半段因为很久没写了，逻辑挺不顺的。

慢慢会回归状态的😄

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家