二、实现商品详情页静态化
1、搭建pinyougou-fremarker-web工程
（1）、创建web工程maven module
（2）、pom.xml中引入jar包坐标
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>com.pinyougou</groupId> <artifactId>pinyougou-parent</artifactId> <version>0.0.1-SNAPSHOT</version> </parent> <artifactId>pinyougou-freemarker-web</artifactId> <packaging>war</packaging> <dependencies> <!-- Spring --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aspects</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jms</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> </dependency> <!-- dubbo相关 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>dubbo</artifactId> </dependency> <dependency> <groupId>org.apache.zookeeper</groupId> <artifactId>zookeeper</artifactId> </dependency> <dependency> <groupId>com.github.sgroschupf</groupId> <artifactId>zkclient</artifactId> </dependency> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> </dependency> <dependency> <groupId>javassist</groupId> <artifactId>javassist</artifactId> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <scope>provided</scope> </dependency> <!-- 分页插件相关 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> </dependency> <!-- redis --> <dependency> <groupId>redis.clients</groupId> <artifactId>jedis</artifactId> </dependency> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redis</artifactId> </dependency> <!-- freemarker相关jar包 --> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> </dependency> <!-- 依赖其他项目模块 --> <dependency> <groupId>com.pinyougou</groupId> <artifactId>pinyougou-sellergoods-interface</artifactId> <version>0.0.1-SNAPSHOT</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.2</version> <configuration> <!-- 指定端口 --> <port>8082</port> <!-- 请求路径 --> <path>/</path> </configuration> </plugin> </plugins> </build> </project>
（3）、配置spring配置文件
<?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">
<context:property-placeholder location="classpath:config/application.properties" />
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<bean
class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
<property name="supportedMediaTypes" value="application/json" />
<property name="features">
<array>
<value>WriteMapNullValue</value>
<value>WriteDateUseDateFormat</value>
</array>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
<!-- 引用dubbo 服务 -->
<dubbo:application name="pinyougou-freemarker-web" />
<dubbo:registry address="zookeeper://192.168.25.128:2181" />
<dubbo:annotation package="com.pinyougou.freemarker.controller" />
<!-- freemarker配置 -->
<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>
（4）、配置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"> <display-name>pinyougou-freemarker-web</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <!-- 解决post乱码 --> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 指定加载的配置文件 ，通过参数contextConfigLocation加载 --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/*.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> </web-app>
（5）、将静态资源文件item.html导入项目中改名拆分并修改相关标签
2、通过freemarker实现根据id生成对应的商品详情页
（1）、pinyougou-pojo中创建用于存放商品数据的组合类
package com.groupentity;
import java.io.Serializable;
import com.pinyougou.pojo.TbItem;
/**
* 用于freemarker生成静态页面的组合类
* @author wingz
*
*/
public class HtmlItem implements Serializable {
private Goods goods;
private TbItem item;
public Goods getGoods() {
return goods;
}
public void setGoods(Goods goods) {
this.goods = goods;
}
public TbItem getItem() {
return item;
}
public void setItem(TbItem item) {
this.item = item;
}
}
（2）、在pinyougou-pojo中Goods实体类中添加属性
（3）、修改item.ftl模板以及所有引入的模板中的动态数据
head.ftl
item.ftl
（4）、将前台静态页面js文件以导入freemarker项目中
（5）、编写jsController层代码
base.js
//定义模块
var app = angular.module("pinyougou", []);
itemController.js
//定义控制器
app.controller("itemController", function($scope) {
//初始化商品数量
$scope.num = 1;
//定义修改商品数量的方法
$scope.updNum = function(num){
if($scope.num - num < 1){
$scope.num = 1;
}else{
$scope.num = $scope.num - num;
}
}
//判断规格项是否匹配的方法
$scope.isSelected = function(key, value){
if(spec[key] == value){
return true;
}else{
return false;
}
}
//定义修改SKU属性时要执行的方法
$scope.changeSku = function(key, value){
spec[key] = value;
//当前的sku的spec属性发生变化时，需要找到现在的spec能匹配上itemList中的哪一个对象，找到则直接跳转到对应的页面
for (var i = 0; i < itemList.length; i++) {
//比较两个map是否相同
var isMat = matchMap(spec, itemList[i].spec);
if(isMat){
location.href = itemList[i].id + ".html";
}
}
}
//定义比较两个Map是否相同的方法
function matchMap(map1, map2){
for(var key in map1){
if(map1[key] != map2[key]){
return false;
}
}
return true;
}
});
（6）、GoodsHtmlController.java
package com.pinyougou.freemarker.controller;
import java.io.File;
import java.io.FileWriter;
import java.io.Writer;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.view.freemarker.FreeMarkerConfig;
import com.alibaba.dubbo.config.annotation.Reference;
import com.groupentity.Goods;
import com.groupentity.HtmlItem;
import com.pinyougou.pojo.TbItem;
import com.pinyougou.sellergoods.service.GoodsService;
import freemarker.template.Configuration;
import freemarker.template.Template;
@RestController
@RequestMapping("goodsHtmlController")
public class GoodsHtmlController {
@Autowired
private FreeMarkerConfig freeMarkerConfig;
@Reference
private GoodsService goodsService;
@RequestMapping("/createGoodsHtml")
public String createHtmlById(Long id) throws Exception {
Configuration configuration = freeMarkerConfig.getConfiguration();
Template template = configuration.getTemplate("item.ftl");
//根据id获取组合类goods
Goods goods = goodsService.findOne(id);
//遍历获取SKU
List<TbItem> itemList = goods.getItemList();
for (TbItem item : itemList) {
//创建组合类
HtmlItem htmlItem = new HtmlItem();
htmlItem.setGoods(goods);
htmlItem.setItem(item);
Writer out = new FileWriter(new File("D:\\JavaEE\\Nginx\\pinyougou\\" + item.getId() + ".html"));
template.process(htmlItem, out);
out.close();
}
return "success";
}
}
（7）、GoodsServiceImpl.java
/**
* 根据ID获取实体
*
* @param id
* @return
*/
@Override
public Goods findOne(Long id) {
Goods goods = new Goods();
//查询商品信息
TbGoods tbGoods = goodsMapper.selectByPrimaryKey(id);
goods.setTbGoods(tbGoods);
//获取商品对应的三级分类的名称
String category1Name = itemCatMapper.selectByPrimaryKey(tbGoods.getCategory1Id()).getName();
String category2Name = itemCatMapper.selectByPrimaryKey(tbGoods.getCategory2Id()).getName();
String category3Name = itemCatMapper.selectByPrimaryKey(tbGoods.getCategory3Id()).getName();
Map<String, String> categoryMap = new HashMap<String, String>();
categoryMap.put("category1Name", category1Name);
categoryMap.put("category2Name", category2Name);
categoryMap.put("category3Name", category3Name);
goods.setCategoryMap(categoryMap);
//查询商品描述
TbGoodsDesc tbGoodsDesc = goodsDescMapper.selectByPrimaryKey(id);
goods.setTbGoodsDesc(tbGoodsDesc);
//查询SKU表数据
TbItemExample example = new TbItemExample();
example.createCriteria().andGoodsIdEqualTo(id);
List<TbItem> itemList = itemMapper.selectByExample(example);
goods.setItemList(itemList);
return goods;
}
（8）、将freemarker-web项目中的webapps下的静态文件导入生成的html文件夹中
3、实现从搜索页面跳转到商品详情页功能