整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
ataGear數(shù)據(jù)可視化分析平臺(tái)提供了導(dǎo)入靜態(tài)HTML模板的功能，使您可以利用已有的任意HTML網(wǎng)頁(yè)資源制作數(shù)據(jù)可視化看板。
首先，您需要準(zhǔn)備一套已設(shè)置好布局的靜態(tài)HTML模板，其中包含的HTML網(wǎng)頁(yè)及相關(guān)資源，例如：
index.html
css/
|---style.css
|---images
|---bg.png
|---bg_head.png
js/
|---index.js
|---common.js它的靜態(tài)效果如下圖所示：
然后，將這套靜態(tài)HTML模板壓縮到一個(gè)ZIP文件中，使用DataGear看板的[導(dǎo)入]功能，將這個(gè)ZIP文件導(dǎo)入為看板。
導(dǎo)入成功后，打開(kāi)看板編輯界面，為HTML模板中的div元素添加dg-chart-widget屬性綁定圖表組件，例如：
...
<div class="panel-content"
dg-chart-widget="圖表組件ID"></div>
...其中，圖表組件ID 是圖表管理列表中的一個(gè)圖表?xiàng)l目ID。
設(shè)置完所有的div元素后，一個(gè)數(shù)據(jù)可視化看板就制作完成了，點(diǎn)擊[保存并展示]按鈕，即可查看展示效果。
等等，默認(rèn)的展示效果差強(qiáng)人意……，沒(méi)關(guān)系，自定義展示效果也很簡(jiǎn)單！
首先，自定義圖表主題，打開(kāi)看板編輯界面，為<body>標(biāo)簽添加dg-chart-theme自定義圖表主題，如下代碼：
...
<body dg-chart-theme="{color:'#F0F0F0',
backgroundColor:'transparent',
actualBackgroundColor:'#050d3c'}">
...
</body>
...然后，自定義圖表設(shè)置項(xiàng)，為<body>標(biāo)簽添加dg-chart-options屬性，定義全局圖表設(shè)置項(xiàng)：
<body ... dg-chart-options="{title:{show:false},
legend:{top:0},grid:{top:25}}">
<!--隱藏標(biāo)題、圖例頂部展示、坐標(biāo)系距頂部25像素，具體參考echarts設(shè)置項(xiàng)-->大功告成！
官網(wǎng)地址：http://www.datagear.tech
源碼地址：
https://gitee.com/datagear/datagear
https://github.com/datageartech/datagear
程目標(biāo)
目標(biāo)1：掌握Freemarker常用的指令與內(nèi)建函數(shù)
目標(biāo)2：完成商品詳細(xì)頁(yè)的數(shù)據(jù)顯示
目標(biāo)3：完成商品詳細(xì)頁(yè)的動(dòng)態(tài)效果
目標(biāo)4：完成商品詳細(xì)頁(yè)讀取SKU信息的業(yè)務(wù)邏輯
目標(biāo)5：完成商品審核調(diào)用功能
1.1為什么要使用網(wǎng)頁(yè)靜態(tài)化技術(shù)
網(wǎng)頁(yè)靜態(tài)化解決方案在實(shí)際開(kāi)發(fā)中運(yùn)用比較多，例如新聞網(wǎng)站，門(mén)戶(hù)網(wǎng)站中的新聞?lì)l道或者是文章類(lèi)的頻道。
對(duì)于電商網(wǎng)站的商品詳細(xì)頁(yè)來(lái)說(shuō)，至少幾百萬(wàn)個(gè)商品，每個(gè)商品又有大量的信息，這樣的情況同樣也適用于使用網(wǎng)頁(yè)靜態(tài)化來(lái)解決。
網(wǎng)頁(yè)靜態(tài)化技術(shù)和緩存技術(shù)的共同點(diǎn)都是為了減輕數(shù)據(jù)庫(kù)的訪問(wèn)壓力，但是具體的應(yīng)用場(chǎng)景不同，緩存比較適合小規(guī)模的數(shù)據(jù)，而網(wǎng)頁(yè)靜態(tài)化比較適合大規(guī)模且相對(duì)變化不太頻繁的數(shù)據(jù)。另外網(wǎng)頁(yè)靜態(tài)化還有利于SEO。
另外我們?nèi)绻麑⒕W(wǎng)頁(yè)以純靜態(tài)化的形式展現(xiàn)，就可以使用Nginx這樣的高性能的web服務(wù)器來(lái)部署。Nginx可以承載5萬(wàn)的并發(fā)，而Tomcat只有幾百。關(guān)于Nginx我們?cè)诤罄m(xù)的課程中會(huì)詳細(xì)講解。
今天我們就研究網(wǎng)頁(yè)靜態(tài)化技術(shù)----Freemarker 。
1.2什么是 Freemarker
FreeMarker 是一個(gè)用 Java 語(yǔ)言編寫(xiě)的模板引擎，它基于模板來(lái)生成文本輸出。FreeMarker與 Web 容器無(wú)關(guān)，即在 Web 運(yùn)行時(shí)，它并不知道 Servlet 或 HTTP。它不僅可以用作表現(xiàn)層的實(shí)現(xiàn)技術(shù)，而且還可以用于生成 XML，JSP 或 Java 等。
1.3 Freemarker入門(mén)小DEMO
1.3.1工程引入依賴(lài)
<dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.23</version> </dependency>
1.3.2創(chuàng)建模板文件
模板文件中四種元素
1、文本，直接輸出的部分
2、注釋?zhuān)?lt;#–…-->格式不會(huì)輸出
3、插值（Interpolation）：即${…}部分,將使用數(shù)據(jù)模型中的部分替代輸出
4、FTL指令：FreeMarker指令，和HTML標(biāo)記類(lèi)似，名字前加#予以區(qū)分，不會(huì)輸出。
我們現(xiàn)在就創(chuàng)建一個(gè)簡(jiǎn)單的創(chuàng)建模板文件test.ftl
<html>
<head>
<meta charset="utf-8">
<title>Freemarker入門(mén)小DEMO </title>
</head>
<body>
<#--我只是一個(gè)注釋?zhuān)也粫?huì)有任何輸出 -->
${name},你好。${message}
</body>
</html>
這里有文本、插值和注釋
1.3.3生成文件
使用步驟：
第一步：創(chuàng)建一個(gè) Configuration 對(duì)象，直接 new 一個(gè)對(duì)象。構(gòu)造方法的參數(shù)就是 freemarker的版本號(hào)。
第二步：設(shè)置模板文件所在的路徑。
第三步：設(shè)置模板文件使用的字符集。一般就是 utf-8.
第四步：加載一個(gè)模板，創(chuàng)建一個(gè)模板對(duì)象。
第五步：創(chuàng)建一個(gè)模板使用的數(shù)據(jù)集，可以是 pojo 也可以是 map。一般是 Map。
第六步：創(chuàng)建一個(gè) Writer 對(duì)象，一般創(chuàng)建一 FileWriter 對(duì)象，指定生成的文件名。
第七步：調(diào)用模板對(duì)象的 process 方法輸出文件。
第八步：關(guān)閉流
代碼：
創(chuàng)建Test類(lèi) main方法如下：
//1.創(chuàng)建配置類(lèi)
Configuration configuration=new Configuration(Configuration.getVersion());
//2.設(shè)置模板所在的目錄
configuration.setDirectoryForTemplateLoading(new File("D:/pinyougou_work/freemarkerDemo/src/main/resources/"));
//3.設(shè)置字符集
configuration.setDefaultEncoding("utf-8");
//4.加載模板
Template template = configuration.getTemplate("test.ftl");
//5.創(chuàng)建數(shù)據(jù)模型
Map map=new HashMap();
map.put("name", "張三 ");
map.put("message", "歡迎來(lái)到神奇的品優(yōu)購(gòu)世界！");
//6.創(chuàng)建Writer對(duì)象
Writer out =new FileWriter(new File("d:\\test.html"));
//7.輸出
template.process(map, out);
//8.關(guān)閉Writer對(duì)象
out.close();
執(zhí)行后，在D盤(pán)根目錄即可看到生成的test.html ，打開(kāi)看看
是不是有些小激動(dòng)呢？
1.4.1 assign指令
此指令用于在頁(yè)面上定義一個(gè)變量
（1）定義簡(jiǎn)單類(lèi)型：
<#assign linkman="周先生">
聯(lián)系人：${linkman}
（2）定義對(duì)象類(lèi)型：
<#assign info={"mobile":"13301231212",'address':'北京市昌平區(qū)王府街'} >
電話：${info.mobile} 地址：${info.address}
運(yùn)行效果：
1.4.2 include指令
此指令用于模板文件的嵌套
創(chuàng)建模板文件head.ftl
<h1>黑馬信息網(wǎng)</h1>
我們修改test.ftl，在模板文件中使用include指令引入剛才我們建立的模板
<#include "head.ftl">
1.4.3 if指令
在模板文件上添加
<#if success=true> 你已通過(guò)實(shí)名認(rèn)證 <#else> 你未通過(guò)實(shí)名認(rèn)證 </#if>
在代碼中對(duì)str變量賦值
map.put("success", true);
在freemarker的判斷中，可以使用= 也可以使用==
1.4.4 list指令
需求，實(shí)現(xiàn)商品價(jià)格表，如下圖：
（1）代碼中對(duì)變量goodsList賦值
List goodsList=new ArrayList();
Map goods1=new HashMap();
goods1.put("name", "蘋(píng)果");
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）在模板文件上添加
----商品價(jià)格表----<br>
<#list goodsList as goods>
${goods_index+1} 商品名稱(chēng)： ${goods.name} 價(jià)格：${goods.price}<br>
</#list>
如果想在循環(huán)中得到索引，使用循環(huán)變量+_index就可以得到。
1.5 內(nèi)建函數(shù)
內(nèi)建函數(shù)語(yǔ)法格式： 變量+?+函數(shù)名稱(chēng)
1.5.1獲取集合大小
我們通常要得到某個(gè)集合的大小，如下圖：
我們使用size函數(shù)來(lái)實(shí)現(xiàn)，代碼如下：
共 ${goodsList?size} 條記錄
1.5.2轉(zhuǎn)換JSON字符串為對(duì)象
我們通常需要將json字符串轉(zhuǎn)換為對(duì)象，那如何處理呢？看代碼
<#assign text="{'bank':'工商銀行','account':'10101920201920212'}" />
<#assign data=text?eval />
開(kāi)戶(hù)行：${data.bank} 賬號(hào)：${data.account}
1.5.3日期格式化
代碼中對(duì)變量賦值：
dataModel.put("today", new Date());
在模板文件中加入
當(dāng)前日期：${today?date} <br>
當(dāng)前時(shí)間：${today?time} <br>
當(dāng)前日期+時(shí)間：${today?datetime} <br>
日期格式化： ${today?string("yyyy年MM月")}
運(yùn)行效果如下：
1.5.4數(shù)字轉(zhuǎn)換為字符串
代碼中對(duì)變量賦值：
map.put("point", 102920122);
修改模板：
累計(jì)積分：${point}
頁(yè)面顯示：
我們會(huì)發(fā)現(xiàn)數(shù)字會(huì)以每三位一個(gè)分隔符顯示，有些時(shí)候我們不需要這個(gè)分隔符，就需要將數(shù)字轉(zhuǎn)換為字符串,使用內(nèi)建函數(shù)c
累計(jì)積分：${point?c}
頁(yè)面顯示效果如下：
累計(jì)積分:102920122
1.6空值處理運(yùn)算符
如果你在模板中使用了變量但是在代碼中沒(méi)有對(duì)變量賦值，那么運(yùn)行生成時(shí)會(huì)拋出異常。但是有些時(shí)候，有的變量確實(shí)是null，怎么解決這個(gè)問(wèn)題呢？
1.6.1判斷某變量是否存在:“??”
用法為:variable??,如果該變量存在,返回true,否則返回false
<#if aaa??> aaa變量存在 <#else> aaa變量不存在 </#if>
1.6.2缺失變量默認(rèn)值:“!”
我們除了可以判斷是否為空值，也可以使用!對(duì)null值做轉(zhuǎn)換處理
在模板文件中加入
${aaa!'-'}
在代碼中不對(duì)aaa賦值，也不會(huì)報(bào)錯(cuò)了 ，當(dāng)aaa為null則返回！后邊的內(nèi)容-
1.7.1算數(shù)運(yùn)算符
FreeMarker表達(dá)式中完全支持算術(shù)運(yùn)算,FreeMarker支持的算術(shù)運(yùn)算符包括:+, - , * , / , %
1.7.2邏輯運(yùn)算符
邏輯運(yùn)算符有如下幾個(gè):
邏輯與:&&
邏輯或:||
邏輯非:!
邏輯運(yùn)算符只能作用于布爾值,否則將產(chǎn)生錯(cuò)誤
1.7.3比較運(yùn)算符
表達(dá)式中支持的比較運(yùn)算符有如下幾個(gè):
1 =或者==:判斷兩個(gè)值是否相等.
2 !=:判斷兩個(gè)值是否不等.
3 >或者gt:判斷左邊值是否大于右邊值
4 >=或者gte:判斷左邊值是否大于等于右邊值
5 <或者lt:判斷左邊值是否小于右邊值
6 <=或者lte:判斷左邊值是否小于等于右邊值
注意: =和!=可以用于字符串,數(shù)值和日期來(lái)比較是否相等,但=和!=兩邊必須是相同類(lèi)型的值,否則會(huì)產(chǎn)生錯(cuò)誤,而且FreeMarker是精確比較,“x”,"x ","X"是不等的.其它的運(yùn)行符可以作用于數(shù)字和日期,但不能作用于字符串,大部分的時(shí)候,使用gt等字母運(yùn)算符代替>會(huì)有更好的效果,因?yàn)?FreeMarker會(huì)把>解釋成FTL標(biāo)簽的結(jié)束字符,當(dāng)然,也可以使用括號(hào)來(lái)避免這種情況,如:<#if (x>y)>
2.1需求分析
運(yùn)用Freemarker技術(shù)來(lái)實(shí)現(xiàn)商品詳細(xì)頁(yè)的靜態(tài)化。通過(guò)地址欄輸入某地址，如下形式
http://localhost:9101/gen_item.do?goodsId=149187842867952
能在本地電腦某目錄生成商品詳細(xì)頁(yè)，頁(yè)面的名稱(chēng)為商品id.html
2.2工程搭建
2.2.1服務(wù)接口層
創(chuàng)建pinyougou-page-interface工程，創(chuàng)建com.pinyougou.page.service包,包下創(chuàng)建接口
/**
* 商品詳細(xì)頁(yè)接口
* @author Administrator
*
*/
public interface ItemPageService {
/**
* 生成商品詳細(xì)頁(yè)
* @param goodsId
*/
public boolean genItemHtml(Long goodsId);
}
2.2.2服務(wù)實(shí)現(xiàn)層
（1）創(chuàng)建war工程pinyougou-page-service
（2）pom.xml引入依賴(lài) 參見(jiàn)其它服務(wù)工程, 另外添加freemarker依賴(lài)
<dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> </dependency>
（3）添加web.xml 參見(jiàn)其它服務(wù)工程
（4）spring配置文件 參見(jiàn)其它服務(wù)工程 ，另外配置：
<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>
（5）創(chuàng)建屬性文件
內(nèi)容為：
pagedir=d:\\item\\
用于配置網(wǎng)頁(yè)生成目錄
（6）建立com.pinyougou.page.service.impl包，包下建立類(lèi)
@Service
public class ItemPageServiceImpl implements ItemPageService {
@Value("${pagedir}")
private String pagedir;
@Autowired
private FreeMarkerConfig freeMarkerConfig;
@Autowired
private TbGoodsMapper goodsMapper;
@Autowired
private TbGoodsDescMapper goodsDescMapper;
@Override
public boolean genItemHtml(Long goodsId){
try {
Configuration configuration = freeMarkerConfig.getConfiguration();
Template template = configuration.getTemplate("item.ftl");
Map dataModel=new HashMap<>();
//1.加載商品表數(shù)據(jù)
TbGoods goods = goodsMapper.selectByPrimaryKey(goodsId);
dataModel.put("goods", goods);
//2.加載商品擴(kuò)展表數(shù)據(jù)
TbGoodsDesc goodsDesc = goodsDescMapper.selectByPrimaryKey(goodsId);
dataModel.put("goodsDesc", goodsDesc);
Writer out=new FileWriter(pagedir+goodsId+".html");
template.process(dataModel, out);
out.close();
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
}
（7）將item.html拷貝至web-inf/ftl下 ，修改擴(kuò)展名為ftl ,將商品名稱(chēng)用插值代替
<div class="sku-name">
<h4>${goods.goodsName}</h4>
</div>
（8）在D盤(pán)建立文件夾item,將必要的樣式表和Js拷貝到此目錄下，此目錄為生成的目錄
2.2.3運(yùn)營(yíng)商管理后臺(tái)
（1）pinyougou-manager-web引入依賴(lài)pinyougou-page-interface
（2）在GoodsController.java中新增方法
@Reference(timeout=40000)
private ItemPageService itemPageService;
/**
* 生成靜態(tài)頁(yè)（測(cè)試）
* @param goodsId
*/
@RequestMapping("/genHtml")
public void genHtml(Long goodsId){
itemPageService.genItemHtml(goodsId);
}
2.3商品詳情頁(yè)模板構(gòu)建
2.3.1模板模塊化引入
此時(shí)我們的item.ftl內(nèi)容較多，當(dāng)我們編輯時(shí)不容易快速找到編輯的位置，所以我們將頭部分拆分到head.ftl ,將尾部拆分到foot.ftl ,用include指令在item.ftl中引入 。
2.3.2生成基本數(shù)據(jù)
在模板中找到合適的位置，用插值替換靜態(tài)文本
<div class="news"><span>${goods.caption}</span></div>
<div class="fl price"><i>￥</i><em>${goods.price}</em><span>降價(jià)通知</span></div>
<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>
運(yùn)行控制層代碼，測(cè)試生成效果
http://localhost:9101/goods/genHtml.do?goodsId=149187842867960
2.3.3生成圖片列表
編輯模板文件
<#--圖片列表 --> <#assign imageList=goodsDesc.itemImages?eval />
這一句要轉(zhuǎn)換圖片列表的json字符串
圖片部分的代碼
<!--默認(rèn)第一個(gè)預(yù)覽-->
<div id="preview" class="spec-preview">
<span class="jqzoom">
<#if (imageList?size>0)>
<img jqimg="${imageList[0].url}" src="${imageList[0].url}" width="400px" height="400px" />
</#if>
</span>
</div>
<!--下方的縮略圖--><div class="spec-scroll">
<div class="items">
<ul>
<#list imageList as item>
<li><img src="${item.url}" bimg="${item.url}" onmousemove="preview(this)" /></li>
</#list>
</ul>
</div>
</div>
生成效果如下：
2.3.4生成擴(kuò)展屬性列表
修改模板 首先進(jìn)行json轉(zhuǎn)換
<#--擴(kuò)展屬性列表 --> <#assign customAttributeList=goodsDesc.customAttributeItems?eval />
顯示擴(kuò)展屬性數(shù)據(jù)，如果擴(kuò)展屬性為空則不顯示此條數(shù)據(jù)
<#list customAttributeList as item>
<#if item.value??>
<li>${item.text} ：${item.value}</li>
</#if>
</#list>
2.3.5生成規(guī)格列表
修改模板 轉(zhuǎn)換規(guī)格列表
<#--規(guī)格列表 --> <#assign specificationList=goodsDesc.specificationItems?eval />
此時(shí)，我們需要使用嵌套循環(huán)
<#list specificationList as specification>
<dl>
<dt>
<div class="fl title">
<i>${specification.attributeName}</i>
</div>
</dt>
<#list specification.attributeValue as item>
<dd><a href="javascript：;" >${item}</a></dd>
</#list>
</dl>
</#list>
2.3.6生成商品類(lèi)型面包屑
修改ItemPageServiceImpl ，讀取三級(jí)商品分類(lèi)名稱(chēng)，加入到數(shù)據(jù)模型中
修改模板，展示商品分類(lèi)面包屑
<ul class="sui-breadcrumb">
<li><a href="#">${itemCat1}</a></li>
<li><a href="#">${itemCat2}</a></li>
<li><a href="#">${itemCat3}</a></li>
</ul>
3.1購(gòu)買(mǎi)數(shù)量加減操作
3.1.1加入angularJS庫(kù)
將angularJS庫(kù)加入d:\item下
3.1.2前端控制層
將base.js拷貝到j(luò)s目錄下
在js目錄下構(gòu)建controller文件夾，創(chuàng)建itemController.js
//商品詳細(xì)頁(yè)（控制層）
app.controller('itemController',function($scope){
//數(shù)量操作
$scope.addNum=function(x){
$scope.num=$scope.num+x;
if($scope.num<1){
$scope.num=1;
}
}
});
在方法中控制數(shù)量不能小于1
3.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">
調(diào)用操作數(shù)量的方法
<div class="controls">
<input autocomplete="off" type="text" value="{{num}}" minnum="1" class="itxt" />
<a href="javascript：void(0)" class="increment plus" ng-click="addNum(1)" >+</a>
<a href="javascript：void(0)" class="increment mins" ng-click="addNum(-1)">-</a>
</div>
3.2規(guī)格選擇
最終我們需要實(shí)現(xiàn)的效果：
3.2.1前端控制層
修改itemController.js
$scope.specificationItems={};//記錄用戶(hù)選擇的規(guī)格
//用戶(hù)選擇規(guī)格
$scope.selectSpecification=function(name,value){
$scope.specificationItems[name]=value;
}
//判斷某規(guī)格選項(xiàng)是否被用戶(hù)選中
$scope.isSelected=function(name,value){
if($scope.specificationItems[name]==value){
return true;
}else{
return false;
}
}
3.2.2模板
頁(yè)面調(diào)用控制器的方法
<dd>
<a class="{{isSelected('${specification.attributeName}','${item}')?'selected':''}}"
ng-click="selectSpecification('${specification.attributeName}','${item}')">
${item}
<span title="點(diǎn)擊取消選擇"> </span>
</a>
</dd>
需求：當(dāng)我們選擇規(guī)格后，應(yīng)該在頁(yè)面上更新商品名稱(chēng)為SKU的商品標(biāo)題，價(jià)格也應(yīng)該為SKU的商品價(jià)格。
4.1頁(yè)面生成SKU列表變量
4.1.1后端服務(wù)層
修改pinyougou-page-service的ItemPageServiceImpl.java
@Autowired
private TbItemMapper itemMapper;
@Override
public boolean genItemHtml(Long goodsId){
try {
Configuration configuration = freeMarkerConfig.getConfiguration();
Template template = configuration.getTemplate("item.ftl");
Map dataModel=new HashMap<>();
//1.加載商品表數(shù)據(jù)
//2.加載商品擴(kuò)展表數(shù)據(jù)
//3.商品分類(lèi)
//4.SKU列表
TbItemExample example=new TbItemExample();
Criteria criteria = example.createCriteria();
criteria.andStatusEqualTo("1");//狀態(tài)為有效
criteria.andGoodsIdEqualTo(goodsId);//指定SPU ID
example.setOrderByClause("is_default desc");//按照狀態(tài)降序，保證第一個(gè)為默認(rèn)
List<TbItem> itemList = itemMapper.selectByExample(example);
dataModel.put("itemList", itemList);
Writer out=new FileWriter(pagedir+goodsId+".html");
template.process(dataModel, out);
out.close();
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
4.1.2模板
修改模板：
<script>
//SKU商品列表
var skuList=[
<#list itemList as item>
{
"id":${item.id?c},
"title":"${item.title!''}",
"price":${item.price?c},
"spec": ${item.spec}
} ,
</#list>
];
</script>
測(cè)試生成，發(fā)現(xiàn)頁(yè)面源代碼中生成了變量
4.2顯示SKU標(biāo)題和價(jià)格
4.2.1加載默認(rèn)SKU信息
修改itemController.js
//加載默認(rèn)SKU
$scope.loadSku=function(){
$scope.sku=skuList[0];
$scope.specificationItems= JSON.parse(JSON.stringify($scope.sku.spec)) ;
}
修改模板item.ftl
<body ng-app="pinyougou" ng-controller="itemController" ng-init="num=1;loadSku()">
修改模板，顯示標(biāo)題
<div class="sku-name"><h4>{{sku.title}}</h4></div>
顯示價(jià)格
<div class="summary-wrap">
<div class="fl title"><i>價(jià) 格</i></div>
<div class="fl price"><i>￥</i> <em>{{sku.price}}</em> <span>降價(jià)通知</span></div>
</div>
4.2.2選擇規(guī)格更新SKU
修改itemController.js , 編寫(xiě)匹配對(duì)象的方法
//匹配兩個(gè)對(duì)象
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;
}
編寫(xiě)方法，在SKU列表中查詢(xún)當(dāng)前用戶(hù)選擇的SKU
//查詢(xún)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};//如果沒(méi)有匹配的
}
在用戶(hù)選擇規(guī)格后觸發(fā)讀取方法
//用戶(hù)選擇規(guī)格
$scope.selectSpecification=function(name,value){
$scope.specificationItems[name]=value;
searchSku();//讀取sku
}
4.3添加商品到購(gòu)物車(chē)
修改itemController.js
//添加商品到購(gòu)物車(chē)
$scope.addToCart=function(){
alert('skuid:'+$scope.sku.id);
}
修改模板：
<li><a href="#" target="_blank" class="sui-btn btn-danger addshopcar" ng-click="addToCart()">加入購(gòu)物車(chē)</a></li>
5.1運(yùn)營(yíng)商后臺(tái)調(diào)用頁(yè)面生成服務(wù)
修改pinyougou-manager-web的GoodsController.java
@RequestMapping("/updateStatus")
public Result updateStatus(Long[] ids,String status){
try {
goodsService.updateStatus(ids, status);
//按照SPU ID查詢(xún) SKU列表(狀態(tài)為1)
if(status.equals("1")){//審核通過(guò)
List<TbItem> itemList = goodsService.findItemListByGoodsIdandStatus(ids, status);
//調(diào)用搜索接口實(shí)現(xiàn)數(shù)據(jù)批量導(dǎo)入
if(itemList.size()>0){
itemSearchService.importList(itemList);
}else{
System.out.println("沒(méi)有明細(xì)數(shù)據(jù)");
}
//靜態(tài)頁(yè)生成
for(Long goodsId:ids){
itemPageService.genItemHtml(goodsId);
}
}
return new Result(true, "修改狀態(tài)成功");
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "修改狀態(tài)失敗");
}
}
5.2創(chuàng)建商品詳細(xì)頁(yè)web工程
創(chuàng)建war模塊工程pinyougou-page-web ，將目標(biāo)目錄（d:\item）的文件拷貝到此工程（生成的頁(yè)面不用拷貝）
在pom.xml中添加tomcat7插件，指定端口為9105
5.3搜索系統(tǒng)與商品詳細(xì)頁(yè)對(duì)接
修改pinyougou-search-web 的search.html，修改點(diǎn)擊圖片的鏈接為http://localhost:9105/{{item.id}}.html
說(shuō)明：商品詳細(xì)頁(yè)是靜態(tài)頁(yè)，所以在開(kāi)發(fā)階段我們可以使用tomcat來(lái)進(jìn)行測(cè)試。部署在生產(chǎn)環(huán)境是部署在Nginx中。
現(xiàn)代社會(huì)，網(wǎng)頁(yè)已經(jīng)成為企業(yè)、個(gè)人展示和宣傳的重要窗口，因此掌握網(wǎng)頁(yè)制作技能是非常有必要的。今天，我們將為大家介紹8款優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)模板網(wǎng)站，哪怕是小白也能幫助你快速搭建出令人驚艷的網(wǎng)頁(yè)。
即時(shí)設(shè)計(jì)是一款支持在線協(xié)作的專(zhuān)業(yè)級(jí) UI 設(shè)計(jì)工具，用戶(hù)數(shù)已突破230萬(wàn)，支持 Sketch、Figma、XD 格式導(dǎo)入，無(wú)需下載，在線使用。10000+精選設(shè)計(jì)資源、100+提效插件即拿即用；支持創(chuàng)建交互原型、獲取設(shè)計(jì)標(biāo)注，為產(chǎn)設(shè)研團(tuán)隊(duì)提供一站式協(xié)同辦公體驗(yàn)，一個(gè)鏈接即可完成交付，內(nèi)容修改實(shí)時(shí)同步。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)：
優(yōu)點(diǎn)：
17素材網(wǎng)主要收集jQuery網(wǎng)頁(yè)特效、jQuery網(wǎng)頁(yè)代碼、網(wǎng)站模板、網(wǎng)頁(yè)模板、企業(yè)模板、商城模板、圖標(biāo)等素材，為html網(wǎng)站模板開(kāi)發(fā)人員提供高效率的工作方式。
部分素材需要積分才能下載。
jQuery插件庫(kù)是一組由開(kāi)發(fā)者編寫(xiě)的、可重復(fù)使用的jQuery插件集合，為Web開(kāi)發(fā)人員提供了多種常用功能的封裝。這些插件可以快速實(shí)現(xiàn)諸如表單驗(yàn)證、圖片輪播、下拉菜單、模態(tài)框等功能，使得Web開(kāi)發(fā)人員能夠更快地完成開(kāi)發(fā)任務(wù)，減少代碼重復(fù)性工作。
它快速、輕量并且簡(jiǎn)化了我們?yōu)g覽 HTML 文檔和操作頁(yè)面元素的方式。因?yàn)樗€具有高度可擴(kuò)展性，所以在框架之上構(gòu)建了許多jQuery 插件來(lái)為網(wǎng)站添加功能。從 UI 組件和元素到布局和網(wǎng)格，有一個(gè)jQuery 插件可以滿(mǎn)足您網(wǎng)站所需的幾乎所有功能。
詳情頁(yè)還可以查看詳細(xì)代碼。
凡科建站提供自助建站、做網(wǎng)站、快速建站等營(yíng)銷(xiāo)推廣服務(wù)，凡科建站平臺(tái)提供網(wǎng)站模板資源，擁有2000萬(wàn)+流量入口，精選優(yōu)質(zhì)服務(wù)商，7*8在線服務(wù)；四大搜索覆蓋，快速上線，全網(wǎng)曝光，助力商家完成營(yíng)銷(xiāo)目標(biāo)。
網(wǎng)站模板圖片素材定期更新，簡(jiǎn)單易操作，小白也會(huì)使用；而且擁有SEO框架布局，首頁(yè)、欄目產(chǎn)品及文章頁(yè)均可獨(dú)立設(shè)置標(biāo)題/關(guān)鍵詞/描述；后臺(tái)直接修改聯(lián)系方式、傳真、郵箱、地址等，修改更加方便；同一個(gè)后臺(tái)管理，四網(wǎng)合一，用戶(hù)體驗(yàn)好！
優(yōu)點(diǎn)：
網(wǎng)站模板庫(kù)提供大量精選高質(zhì)量并永久免費(fèi)的(網(wǎng)站模版、網(wǎng)頁(yè)模板、手機(jī)模板、企業(yè)網(wǎng)站模板、網(wǎng)站模版)，包括html模板、后臺(tái)管理模板、博客模板及各行業(yè)類(lèi)型等上千種模版。
模板素材眾多。
優(yōu)點(diǎn)：
提供海量精美免費(fèi)網(wǎng)站模板、企業(yè)網(wǎng)站模板、html模板網(wǎng)站、公司網(wǎng)站模板、手機(jī)網(wǎng)站模板、自適應(yīng)網(wǎng)站模板等免下載使用。
該網(wǎng)站收集了大量?jī)?yōu)質(zhì)網(wǎng)站設(shè)計(jì)作品，適用于多個(gè)專(zhuān)業(yè)的 WordPress 主題模板、HTML5模板、CSS Menu等實(shí)用資源。
特色：
AB模板網(wǎng)專(zhuān)注企業(yè)網(wǎng)站模板制作，包括企業(yè)pbootcms網(wǎng)站模板，靜態(tài)網(wǎng)頁(yè)模板，網(wǎng)站源碼下載，HTML網(wǎng)站模板等等。
這個(gè)網(wǎng)站專(zhuān)門(mén)提供織夢(mèng)的網(wǎng)頁(yè)模板，性質(zhì)和上面一樣，也是上傳到服務(wù)器上。
特點(diǎn)：
織夢(mèng)貓是一個(gè)網(wǎng)站模板分享交流平臺(tái)，網(wǎng)站以織夢(mèng)模板、建站資訊、織夢(mèng)教程為主要內(nèi)容，以“共享創(chuàng)造價(jià)值”為理念，以“尊重原創(chuàng)”為準(zhǔn)則。滿(mǎn)足用戶(hù)不同的網(wǎng)站模板需求。
同樣也提供dedecms的網(wǎng)頁(yè)模板。
模板安裝方法：
1）進(jìn)入dede后臺(tái)，找到“系統(tǒng)”-“數(shù)據(jù)庫(kù)備份/還原”
2）在屏幕右上角點(diǎn)擊“數(shù)據(jù)還原”
3）點(diǎn)擊屏幕下方的'開(kāi)始還原'按鈕
1）點(diǎn)擊“系統(tǒng)”---系統(tǒng)基本參數(shù)
2）將“站點(diǎn)根網(wǎng)址”改為您的網(wǎng)址，如http://www.xxx.com/（本地安裝請(qǐng)保持http://127.0.0.1。）
3）點(diǎn)擊“確定”按鈕
這些網(wǎng)頁(yè)模板網(wǎng)站提供了多樣化的選擇，從專(zhuān)業(yè)的商業(yè)網(wǎng)站到個(gè)人博客，從免費(fèi)的模板到付費(fèi)的高級(jí)模板，滿(mǎn)足了不同用戶(hù)的需求。無(wú)論您是有設(shè)計(jì)經(jīng)驗(yàn)的專(zhuān)業(yè)人士還是初學(xué)者，這些網(wǎng)站都能幫助您快速搭建一個(gè)具有吸引力和功能性的網(wǎng)站。
如果你還有更好的方式或工具推薦，記得在評(píng)論區(qū)互動(dòng)討論！
分享6款免費(fèi)項(xiàng)目管理工具，讓你的工作效率暴增！
想提高工作效率？快來(lái)看看這6個(gè)辦公神器！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
