12、Freemarker模板介绍、搭建page模块、生成原始页面、生成静态页面图片列表、模板的拆分、自定义扩展属性、循环规格和选项、三级分类模板显示、购买数量的加减、规格选项勾选、切换显示价格和标题

Freemarker模板介绍

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

搭建page模块

一、前端部分
1、新建page_interface模块（可以不使用模板）
根据dubbo中的包路径生成路径，新建一个接口

2、新建page_service模块（使用webapp模板），实现page_interface接口
①在pom.xml文件中添加build

 <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <!-- 指定端口 -->
                    <port>9005</port>
                    <!-- 请求路径 -->
                    <path>/</path>
                </configuration>
            </plugin>
        </plugins>
    </build>

②在webapp下的WEB-INF中新建一个空文件夹ftl。将静态页面item.html复制进去，后缀改成ftl。

③在web-INF下的web.xml文件中添加如下内容：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	version="2.5">	
	
	<!-- 加载spring容器 -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath*:spring/applicationContext*.xml</param-value>
	</context-param>
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	
	
</web-app>

④在resources文件中添加两个文件夹

在applicationContext-service.xml中配置了FreeMarkerConfigurer，里边配置了模板的路径和字符

⑤根据dubbo中的路径在service中创建实现类ItemPageServiceImpl

page.properties全文如下：（目前没什么用好像）

pagedir=e:\\item\\

applicationContext-service.xml全文如下：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:dubbo="http://code.alibabatech.com/schema/dubbo" xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

    <dubbo:protocol name="dubbo" port="20885"></dubbo:protocol> 
    
	<dubbo:application name="pinyougou-page-service"/>  
    <dubbo:registry address="zookeeper://192.168.25.128:2181"/>
    <dubbo:annotation package="com.myApplication.page.service.impl" />
   
    <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>
   
</beans>

applicationContext-tx.xml全文如下：（今天没用到）

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
  

    <!-- 事务管理器  -->  
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">  
        <property name="dataSource" ref="dataSource" />  
    </bean>  
      
    <!-- 开启事务控制的注解支持 -->  
    <tx:annotation-driven transaction-manager="transactionManager"/>
   
</beans>

二、后端部分
不用动。

生成原始页面

一、前端部分
不用动。
二、后端部分
在shop-web模块的上架操作中根据id进行模板的生成
修改在shop-web模块的GoodsController类中的代码

在更新状态updateStatus方法中修改代码

三、生成到本地e盘下的item文件夹中
但是在这个文件夹中需要先将css样式，angularjs文件，js文件等引入。

四、生成页面操作

打开商家的商品管理页面，选中商品进行上架处理，点击之后会自动在e盘item文件夹中生成一个html页面。

生成静态页面图片列表

一、前端部分
1、在页面将后端传过来的数据转成json数据

2、在对应的位置使用${}的方法进行图片路径的绑定

3、默认大图的处理，有一张默认的大图，直接取图片数组中的第一张即可。但是注意非空判断!

二、后端部分
在生成模板的实现类中，创建一个Map集合。通过goodsId查找goods信息和goodsDesc信息，goodsDesc中包含图片集合，将两个对象存入map中传入到模板中。
1、先导入两个mapper

2、根据goodsId查询goods和goodsDesc，存入map中

3、将map放入模板生成对象中

模板的拆分

一、前端部分
将前端不涉及到数据更改的部分，拆分出来，放到ftl文件夹下的新命名的ftl文件中。然后在页面对应的位置使用<#include “文件名”>的方式引入。


二、后端部分
不涉及。

自定义扩展属性

一、前端部分
1、先在页面将goodsDesc中的customAttributeItems进行json处理。

2、在对应的位置进行循环遍历显示

二、后端部分
上一步传过来的goodsDesc中的customAttributeItems已经包含所需要的数据，所以后端不用动。

循环规格和选项

一、前端部分
1、现在页面将goodsDesc中的specificationItems进行json处理。

2、在对应位置进行两层遍历循环输出

二、后端部分
上一步传过来的goodsDesc中的specificationItems已经包含所需要的数据，所以后端不用动。

三级分类模板显示

一、前端部分
在三层分类位置使用${}的方法进行绑定输出

二、后端部分
在ItemPageServiceImpl实现类中根据goods获取三层分类id，再根据id查询分类名称存入map中。
1、先引入ItemCatMaper

2、根据goods获取三层分类id，再根据id查询分类名称存入map中

购买数量的加减

一、前端部分
在生成模板的目录中的js文件的controller中添加addNum方法，用于控制购买数量。
1、在ftl文件的对应位置绑定addNum方法，传入参数。

2、由于使用了ng-click等angularjs的标签，所以需要引入angular的js文件，并在body中绑定ng标签。


3、注意检查在生成页面的本地磁盘路径中有没有对应的angular文件。在ftl中报黄代表没有找到文件。这是正确的，因为我们把文件放在了本地磁盘的生成路径文件夹中，没有方法编译器中。

二、后端部分
不涉及后端。

规格选项勾选

一、前端部分
1、在页面中绑定一个点击方法，用于将点击的规格和选项存入前端变量specification中。添加一个判断方法，使用三元运算符进行判断是否被选中，选中的选项会有口框对勾的样式。

2、在本地磁盘中的js文件controller中实现向specification中添加规格和选项对象的方法。

注意需要定义变量。

3、在本地磁盘中的js文件controller中实现对选中的规格和规格选项判断的方法。

二、后端部分
不涉及后端。

切换显示价格和标题

一、前端部分
1、在模板中，添加如下方法：

添加这个方法后，在生成的页面中检查元素查看代码，发现产生如下数据：

2、在本地磁盘的js文件controller中，使用前端的深克隆，保存第一组json数据，作为默认数据（默认勾选的依据）。注意这个json数据已经在后台根据是否默认（isDefault=1）完成了排序，第一个就是默认的。

以上代码已经完成了默认的规格和规格选项的勾选

3、在切换规格和规格选项时，判断当前选择的规格和规格选项是skuList中的哪一组。然后将这组数据赋值给sku。在页面显示。

4、在将规格和规格选项保存到specification对象的方法中调用。因为每切换一次就要调用一次判断来更改对应的数据。

5、在页面进行方法的init绑定，和显示参数的修改



二、后端部分