二、实现商品详情页静态化
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、实现从搜索页面跳转到商品详情页功能