练手项目1笔记 day12

最新推荐文章于 2024-04-26 23:48:39 发布

慢慢慢时光

最新推荐文章于 2024-04-26 23:48:39 发布

阅读量260

点赞数

分类专栏：项目文章标签： freemarker

本文链接：https://blog.csdn.net/wjl31802/article/details/90524473

版权

项目专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章目录

目标

掌握Freemarker常用的指令与内建函数
完成商品详情页的数据显示
完成商品详情页的动态效果
完成商品详情页读取SKU信息的业务逻辑
完成商品审核调用功能

1. 网页静态化技术Freemaarker

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

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

对于电商网站的商品详情页，也很适合使用网页静态化。

优点

减轻数据库的访问压力
有利于SEO
可以使用nginx来部署

应用场景

适合大规模且相对变化不太频繁的数据

2. 什么是Freemarker

是一个用java语言编写的模板引擎。基于模板生成文本输出。Freemarker和web容器无关，即在web运行时，它并不知道Servlet或http。不仅可以用作表现层的实现技术，而且还可以用于生成xml，jsp或java等。

在这里插入图片描述

3. Freemarker入门demo

1. 引入依赖

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

2. 创建模板文件

模板文件四种元素

文本，直接输出的部分
注释，即<#--...-->
插值（Interpolation）：即${...}部分，将使用数据模型中的部分替代输出
FTL指令：Freemarker指令，和HTML标记类似，名字前加#予以区分，不会输出

创建一个简单的创建模板文件test.ftl

<html>
<head>
    <title>demo</title>
    <meta charset="utf-8">
</head>
<body>
<#-- 我就是一个注释，不会输出的 -->

${name},你好。${message}

</body>
</html>

这里有文本、插值和注释

3. 生成文件

步骤：

第一步：创建一个 Configuration 对象，直接 new 一个对象。构造方法的参数就是 freemarker的版本号。

第二步：设置模板文件所在的路径。

第三步：设置模板文件使用的字符集。一般就是 utf-8.

第四步：加载一个模板，创建一个模板对象。

第五步：创建一个模板使用的数据集，可以是 pojo 也可以是 map。一般是 Map。

第六步：创建一个 Writer 对象，一般创建一FileWriter 对象，指定生成的文件名。

第七步：调用模板对象的 process 方法输出文件。

第八步：关闭流

代码

public class Test {
  public static void main(String[] args) throws IOException, TemplateException {

    // 1. 创建一个配置对象
    Configuration configuration = new Configuration(Configuration.getVersion());
    // 2. 设置模板所在的目录
    configuration.setDirectoryForTemplateLoading(new File("D:\\java_work\\FreemarkerDemo\\src\\main\\resources"));
    // 3. 设置字符集
    configuration.setDefaultEncoding("utf-8");
    // 4. 获取模板对象
    Template template = configuration.getTemplate("test.ftl");
    // 5. 创建数据模型（可以是对象，也可以是map）
    Map map = new HashMap();
    map.put("name","张三");
    map.put("message","欢迎来到神器的品优购世界");

    // 6. 创建一个输出流对象
    Writer out = new FileWriter("e:\\test.html");
    // 7. 输出
    template.process(map,out);
    // 8. 关闭out
    out.close();
  }
}

4. FTL指令

1. assign指令

此指令用于在页面上定义一个变量

定义简单类型

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

定义对象类型

<#assign info={"mobile":"13333333333","address":"北京动物园"}>
电话：${info.mobile} 地址：${info.address}<br>

2. include指令

用于模板文件的嵌套，如嵌套头尾部分

创建模板文件head.ftl

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

修改test.ftl，在模板文件中用include指令引入模板

<#include "head.ftl">

3. if 指令

在模板文件中添加

<#if success=true>
    你已经通过实名认证
<#else>
    你未通过实名认证

</#if>

在代码中对str变量赋值

map.put("success",true);

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

4. list指令

需求：实现商品价格表，如图

在这里插入图片描述

代码中对变量goodsList赋值

List goodsList = new ArrayList();
Map goods1 = new HashMap();
goods1.put("name","苹果");
goods1.put("price",5);
Map goods2 = new HashMap();
goods2.put("name","香蕉");
goods2.put("price",8);
goodsList.add(goods1);
goodsList.add(goods2);
map.put("goodsList",goodsList);

在模板文件上添加

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

索引为：使用循环变量+_index得到

5. 内建函数

就是内置函数，语法格式：变量+?+函数名称

1. 获取集合大小

如上个案例，goodsList有多少个记录

使用size函数来实现。代码

一共${goodsList?size}条记录<br>

2. 转换JSON字符串为对象

通常需要将json字符串转换为对象，如何处理？

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

3. 日期格式化

代码中对变量赋值

map.put("today",new Date());

在模板文件中加入

当前日期：${today?date}<br>
当前时间：${today?time}<br>
当前日期加时间：${today?datetime}<br>
日期格式化：${today?string('yyyy年MM月')}<br>

4. 数字转换为字符串

代码中对变量赋值

map.put("point",199922929);

修改模板

 当前积分：${point}// 显示效果为 102,020,122
  当前积分：${point?c}// 显示效果为 102020122

6. 空值处理运算符

如果在模板中使用了变量但是在代码中没有对变量赋值，那么在运行时会抛出异常

但是有时候，有的变量确实是null，如何解决？

1. 判断某变量是否存在

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

<#if aaa??>
    aaa变量存在${aaa}
    <#else>
    aaa变量不存在
</#if>

2. 缺失变量默认值

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

在模板文件中加入${bbb!''}<br>

在代码中不对其赋值，也不会报错，null的时候返回!后边的内容

7. 运算符

1. 算数运算符

+ - * / %

2. 逻辑运算符

&& || !

只能用于布尔值

3. 比较运算符

=或者==：判断两个值是否相等
!=：判断两个值是否不等
>或者gt
>=或者gte
<或者lt
<=或者lte

注意：=和!=可以用于字符串，数值和日期比较是否相等，但是=和!=两边必须是相同类型的值，否则会产生错误，而且Freemarker是精确比较，大部分情况下，使用gt等字母替换>会更好，也可以使用括号避免这种情况，如<#if (x>y)>

2. 商品详情页-数据显示

1. 需求分析

运用Freemarker技术实现商品详情页的静态化

2. 工程搭建

1. 服务接口层

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

// 生成商品详情页
public boolean genItemHtml(Long goodsId);

2. 服务实现层

创建war工程page-service
pom.xml引入依赖，参见其他服务工程，另外添加freemarker的依赖
添加web.xml，同其他服务工程
spring配置文件，同其他，另外配置

<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>

创建属性文件

在这里插入图片描述

内容为pagedir=d:\\item\\

用于配置网页生成目录

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

@Service
public class ItemPageServiceImpl implements ItemPageService {

  @Autowired
  private FreeMarkerConfigurer freeMarkerConfigurer;

  @Autowired
  private TbGoodsMapper goodsMapper;

  @Autowired
  private TbGoodsDescMapper goodsDescMapper;

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

  @Override
  public boolean genItemHtml(Long goodsId) {

    try {
      Configuration configuration = freeMarkerConfigurer.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);

      Writer out = new FileWriter(pagedir+goodsId+".html");
      template.process(dataModel,out);
      return true;
    } catch (Exception e) {
      e.printStackTrace();
      return false;
    }

  }
}

将item.html拷贝到WEB-INF/ftl下，修改扩展名为ftl，将商品名称用插值替代

<div class="sku-name">
	<h4>${goods.goodsName}</h4>
</div>

在对应盘符建立文件夹，并将css、js等拷贝，展示效果。

3. 运营商管理后台

manager-web引入依赖page-interface
在GoodsController.java中新增方法

@Reference(timeout = 40000)
private ItemPageService itemPageService;

@RequestMapping("/genHtml")
public void genHtml(Long goodsId){
  itemPageService.genItemHtml(goodsId);
}

4. 测试

将content-service、sellergoods-service、search-service和manager-web启动，测试通过，生成了新的html，标题也修改成功。

3. 商品详情页模板构建

1. 模板模块化引入

此时的item.ftl内容较多，将头部查分到head.ftl，尾部拆分到foot.ftl，用include指令引入

2. 生成基本数据

在模板中找到合适的位置，用插值替换静态文本。

<div class="news"><span>${goods.caption}</span></div>
...
<em>${goods.price}</em>
...
<div class="intro-detail">
  ${goodsDesc.introduction}
</div>
...
<div id="two" class="tab-pane">
  <p>${goodsDesc.packageList}</p>
</div>
<div id="three" class="tab-pane">
  <p>${goodsDesc.saleService}</p>
</div>

运行控制层代码，测试生成效果

3. 生成图片列表

编辑模板文件

<#assign imageList=goodsDesc.itemImages?eval />

这一句是将图片列表的字符串转换为对象

图片部分的代码

<span class="jqzoom">
  <#if (imageList?size>0)>
    <img jqimg="${imageList[0].url}" src="${imageList[0].url}" width="400px" height="400px" />
    </#if>
</span>

<ul>
  <#list imageList as item>
    <li><img src="${item.url}" bimg="${item.url}" onmousemove="preview(this)" /></li>
    </#list>
</ul>

4. 生成扩展属性列表

修改模板，先进行json转换

<#assign customAttributeList=goodsDesc.customAttributeItems?eval />

显示扩展属性数据，如果属性为空不显示此条数据

<ul class="goods-intro unstyled">
  <#list customAttributeList as item>
    <li>${item.text}：${item.value}</li>
    </#list>
</ul>

5. 生成规格列表

修改模板，转换规格列表

    <#--规格-->
    <#assign specificationList=goodsDesc.specificationItems?eval />

需要使用嵌套循环

<div class="clearfix choose">
  <div id="specification" class="summary-wrap clearfix">
    <#list specificationList as spec>
      <dl>
        <dt>
          <div class="fl title">
            <i>${spec.attributeName}</i>
          </div>
        </dt>
        <#list spec.attributeValue as item>
          <dd><a href="javascript:;"
                 class="{{isSelected('${spec.attributeName}','${item}')?'selected':''}}"
                 ng-click="selectSpecification('${spec.attributeName}','${item}')">
            ${item}<span title="点击取消选择">&nbsp;</span>
            </a>
          </dd>
          </#list>
      </dl>
      </#list>
  </div>

6. 生成商品类型面包屑

修改ItemPageServiceImpl，读取三级商品分类名称，加入到数据模型

// 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);

修改模板，显示商品分类面包屑

<li>
  <a href="#">${itemCat1}</a>
</li>
<li>
  <a href="#">${itemCat2}</a>
</li>
<li>
  <a href="#">${itemCat3}</a>
</li>

3. 商品详情页-前端逻辑

1. 购买数量加减操作

1. 加入angularJS库

2. 前端控制层

将base.js拷贝到js目录

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

app.controller("itemController",function ($scope) {

    $scope.specificationItems = {};//存储用户选择的规格
    // 数量加减
    $scope.addNum = function(x){
    	$scope.num += x;
    	if($scope.num<1){
    		$scope.num =1;
    	}
    }

    // 用户选择规格
    $scope.selectSpecification = function(key,value){
    	$scope.specificationItems[key] = value;
    }

    // 判断某规格是否被选中
    $scope.isSelected = function(key,value){
    	if($scope.specificationItems[key]==value){
    		return true;
    	}else{
    		return false;
    	}
    }
});

在方法中控制数量不小于1

3. 模板

引入js

<script type="text/javascript" src="plugins/angularjs/angular.min.js">  </script>
<script type="text/javascript" src="js/base.js">  </script>
<script type="text/javascript" src="js/controller/itemController.js">  </script>

添加指令

<body ng-app="pinyougou" ng-controller="itemController" ng-init="num=1">

调用操作数量的方法

<div class="controls">
  <input autocomplete="off" ng-model="num" type="text" value="1" minnum="1" class="itxt" />
  <a href="javascript:void(0)" ng-click="addNum(1)" class="increment plus">+</a>
  <a href="javascript:void(0)" ng-click="addNum(-1)" class="increment mins">-</a>
</div>

2. 规格选择

最终实现效果

在这里插入图片描述

1.思路

创建一个对象 {'网络':'移动4G','机身内存':'32G'}用于存储用户选择的规格

点击标签的时候，更改此对象

前端控制层创建方法，用于判断当前规格与选项是否被选中。

2. 前端控制层

修改itemController.js

规格部分见之前的controller部分代码

3. 模板

页面调用控制器的方法

<div id="specification" class="summary-wrap clearfix">
  <#list specificationList as spec>
    <dl>
      <dt>
        <div class="fl title">
          <i>${spec.attributeName}</i>
        </div>
      </dt>
      <#list spec.attributeValue as item>
        <dd><a href="javascript:;"
               class="{{isSelected('${spec.attributeName}','${item}')?'selected':''}}"
               ng-click="selectSpecification('${spec.attributeName}','${item}')">
          ${item}<span title="点击取消选择">&nbsp;</span>
          </a>
        </dd>
        </#list>
    </dl>
    </#list>
</div>

4. 商品详情页-读取SKU信息

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

1. 页面生成SKU列表变量

1. 后端服务层

修改page-service的ItemPageServiceImpl.java

// SKU列表
TbItemExample example = new TbItemExample();
TbItemExample.Criteria criteria = example.createCriteria();
criteria.andGoodsIdEqualTo(goodsId);
criteria.andStatusEqualTo("1");//状态有效
example.setOrderByClause("is_default desc");//排序，按照状态降序，保证默认的在第一个
List<TbItem> itemList = itemMapper.selectByExample(example);
dataModel.put("itemList",itemList);

2. 模板

修改模板

<script>
  // 1. SKU商品列表
  var skuList = [
    <#list itemList as item>
    {
    "id":${item.id?c},
    "title":"${item.title!''}",
    "price":${item.price?c},
    "spec":${item.spec}
    },
  </#list>
  ];
</script>

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

在这里插入图片描述

2. 显示SKU标题和价格

1. 加载默认SKU信息

修改itemController.js

$scope.sku = {};//当前选择的SKU

// 加载默认的SKU
$scope.loadSku = function(){
  $scope.sku = skuList[0]; //skuList为全局变量
  $scope.specificationItems = JSON.parse(JSON.stringify($scope.sku.spec));//两个对象，不能浅克隆
}

修改模板

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

修改模板，显示title

<div class="sku-name"><h4>{{sku.title}}</h4></div>

显示价格

<div class="fl price">
  <i>¥</i>
  <em>{{sku.price}}</em>
  <span>降价通知</span>
</div>

2. 选择规格更新SKU

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

// 匹配两个对象
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;
}

为什么要这样写？eg. map1 {"网络":"移动3G","机身内存":"32G"}，map2 {"网络":"移动3G","机身内存":"32G","颜色":"土豪金"}，只用map1和map2比较，就会返回true了。

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

// 查询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};//没有匹配的话
}

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

//用户选择规格
$scope.selectSpecification=function(key,value){
  $scope.specificationItems[key]=value;		
  searchSku();//查询SKU
}

3. 添加商品到购物车

修改itemController.js

// 添加商品到购物车
$scope.addToCart = function(){
  alert("skuid"+$scope.sku.id);
}

修改模板

<a href="#" ng-click="addToCart()" class="sui-btn  btn-danger addshopcar">加入购物车</a>

慢慢慢时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录