DataGear使用靜態HTML模板制作數據可視化看板

ataGear數據可視化分析平臺提供了導入靜態HTML模板的功能，使您可以利用已有的任意HTML網頁資源制作數據可視化看板。

首先，您需要準備一套已設置好布局的靜態HTML模板，其中包含的HTML網頁及相關資源，例如：

index.html
css/
  |---style.css
  |---images
       |---bg.png
       |---bg_head.png
js/
  |---index.js
  |---common.js

它的靜態效果如下圖所示：

然后，將這套靜態HTML模板壓縮到一個ZIP文件中，使用DataGear看板的[導入]功能，將這個ZIP文件導入為看板。

導入成功后，打開看板編輯界面，為HTML模板中的div元素添加dg-chart-widget屬性綁定圖表組件，例如：

...
<div class="panel-content"
    dg-chart-widget="圖表組件ID"></div>
...

其中，圖表組件ID 是圖表管理列表中的一個圖表條目ID。

設置完所有的div元素后，一個數據可視化看板就制作完成了，點擊[保存并展示]按鈕，即可查看展示效果。

等等，默認的展示效果差強人意……，沒關系，自定義展示效果也很簡單！

首先，自定義圖表主題，打開看板編輯界面，為<body>標簽添加dg-chart-theme自定義圖表主題，如下代碼：

...
<body dg-chart-theme="{color:'#F0F0F0',
    backgroundColor:'transparent',
    actualBackgroundColor:'#050d3c'}">
...
</body>
...

然后，自定義圖表設置項，為<body>標簽添加dg-chart-options屬性，定義全局圖表設置項：

<body ... dg-chart-options="{title:{show:false},
    legend:{top:0},grid:{top:25}}">
<!--隱藏標題、圖例頂部展示、坐標系距頂部25像素，具體參考echarts設置項-->

大功告成！

官網地址：http://www.datagear.tech

源碼地址：

https://gitee.com/datagear/datagear

https://github.com/datageartech/datagear

程目標

目標1：掌握Freemarker常用的指令與內建函數

目標2：完成商品詳細頁的數據顯示

目標3：完成商品詳細頁的動態效果

目標4：完成商品詳細頁讀取SKU信息的業務邏輯

目標5：完成商品審核調用功能

1.網頁靜態化技術Freemarker

1.1為什么要使用網頁靜態化技術

網頁靜態化解決方案在實際開發中運用比較多，例如新聞網站，門戶網站中的新聞頻道或者是文章類的頻道。

對于電商網站的商品詳細頁來說，至少幾百萬個商品，每個商品又有大量的信息，這樣的情況同樣也適用于使用網頁靜態化來解決。

網頁靜態化技術和緩存技術的共同點都是為了減輕數據庫的訪問壓力，但是具體的應用場景不同，緩存比較適合小規模的數據，而網頁靜態化比較適合大規模且相對變化不太頻繁的數據。另外網頁靜態化還有利于SEO。

另外我們如果將網頁以純靜態化的形式展現，就可以使用Nginx這樣的高性能的web服務器來部署。Nginx可以承載5萬的并發，而Tomcat只有幾百。關于Nginx我們在后續的課程中會詳細講解。

今天我們就研究網頁靜態化技術----Freemarker 。

1.2什么是 Freemarker

FreeMarker 是一個用 Java 語言編寫的模板引擎，它基于模板來生成文本輸出。FreeMarker與 Web 容器無關，即在 Web 運行時，它并不知道 Servlet 或 HTTP。它不僅可以用作表現層的實現技術，而且還可以用于生成 XML，JSP 或 Java 等。

1.3 Freemarker入門小DEMO

1.3.1工程引入依賴

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

1.3.2創建模板文件

模板文件中四種元素

1、文本，直接輸出的部分

2、注釋，即<#–…-->格式不會輸出

3、插值（Interpolation）：即${…}部分,將使用數據模型中的部分替代輸出

4、FTL指令：FreeMarker指令，和HTML標記類似，名字前加#予以區分，不會輸出。

我們現在就創建一個簡單的創建模板文件test.ftl

<html>
<head>
	<meta charset="utf-8">
	<title>Freemarker入門小DEMO </title>
</head>
<body>
<#--我只是一個注釋，我不會有任何輸出 -->
${name},你好。${message}
</body>
</html>

這里有文本、插值和注釋

1.3.3生成文件

使用步驟：

第一步：創建一個 Configuration 對象，直接 new 一個對象。構造方法的參數就是 freemarker的版本號。

第二步：設置模板文件所在的路徑。

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

第四步：加載一個模板，創建一個模板對象。

第五步：創建一個模板使用的數據集，可以是 pojo 也可以是 map。一般是 Map。

第六步：創建一個 Writer 對象，一般創建一 FileWriter 對象，指定生成的文件名。

第七步：調用模板對象的 process 方法輸出文件。

第八步：關閉流

代碼：

創建Test類 main方法如下：

	 //1.創建配置類
		Configuration configuration=new Configuration(Configuration.getVersion());
		//2.設置模板所在的目錄 
		configuration.setDirectoryForTemplateLoading(new File("D:/pinyougou_work/freemarkerDemo/src/main/resources/"));
		//3.設置字符集
		configuration.setDefaultEncoding("utf-8");
		//4.加載模板
		Template template = configuration.getTemplate("test.ftl");
		//5.創建數據模型
		Map map=new HashMap();
		map.put("name", "張三 ");
		map.put("message", "歡迎來到神奇的品優購世界！");
		//6.創建Writer對象
		Writer out =new FileWriter(new File("d:\\test.html"));
		//7.輸出
		template.process(map, out);
		//8.關閉Writer對象
		out.close();

執行后，在D盤根目錄即可看到生成的test.html ，打開看看

是不是有些小激動呢？

1.4 FTL指令

1.4.1 assign指令

此指令用于在頁面上定義一個變量

（1）定義簡單類型：

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

（2）定義對象類型：

<#assign info={"mobile":"13301231212",'address':'北京市昌平區王府街'} >
電話：${info.mobile} 地址：${info.address}

運行效果：

1.4.2 include指令

此指令用于模板文件的嵌套

創建模板文件head.ftl

<h1>黑馬信息網</h1>

我們修改test.ftl，在模板文件中使用include指令引入剛才我們建立的模板

<#include "head.ftl">

1.4.3 if指令

在模板文件上添加

<#if success=true>
 你已通過實名認證
<#else> 
 你未通過實名認證
</#if>

在代碼中對str變量賦值

map.put("success", true);

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

1.4.4 list指令

需求，實現商品價格表，如下圖：

（1）代碼中對變量goodsList賦值

		List goodsList=new ArrayList();
		Map goods1=new HashMap();
		goods1.put("name", "蘋果");
		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）在模板文件上添加

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

如果想在循環中得到索引，使用循環變量+_index就可以得到。

1.5 內建函數

內建函數語法格式：變量+?+函數名稱

1.5.1獲取集合大小

我們通常要得到某個集合的大小，如下圖：

我們使用size函數來實現，代碼如下：

共 ${goodsList?size} 條記錄

1.5.2轉換JSON字符串為對象

我們通常需要將json字符串轉換為對象，那如何處理呢？看代碼

 <#assign text="{'bank':'工商銀行','account':'10101920201920212'}" />
	<#assign data=text?eval />
	開戶行：${data.bank} 賬號：${data.account}

1.5.3日期格式化

代碼中對變量賦值：

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

在模板文件中加入

當前日期：${today?date} <br>
當前時間：${today?time} <br> 
當前日期+時間：${today?datetime} <br> 
日期格式化： ${today?string("yyyy年MM月")}

運行效果如下：

1.5.4數字轉換為字符串

代碼中對變量賦值：

map.put("point", 102920122);

修改模板：

累計積分：${point}

頁面顯示：

我們會發現數字會以每三位一個分隔符顯示，有些時候我們不需要這個分隔符，就需要將數字轉換為字符串,使用內建函數c

累計積分：${point?c}

頁面顯示效果如下：

累計積分:102920122

1.6空值處理運算符

如果你在模板中使用了變量但是在代碼中沒有對變量賦值，那么運行生成時會拋出異常。但是有些時候，有的變量確實是null，怎么解決這個問題呢？

1.6.1判斷某變量是否存在:“??”

用法為:variable??,如果該變量存在,返回true,否則返回false

<#if aaa??>
 aaa變量存在
<#else>
 aaa變量不存在
</#if>

1.6.2缺失變量默認值:“!”

我們除了可以判斷是否為空值，也可以使用!對null值做轉換處理

在模板文件中加入

 ${aaa!'-'}

在代碼中不對aaa賦值，也不會報錯了，當aaa為null則返回！后邊的內容-

1.7運算符

1.7.1算數運算符

FreeMarker表達式中完全支持算術運算,FreeMarker支持的算術運算符包括:+, - , * , / , %

1.7.2邏輯運算符

邏輯運算符有如下幾個:

邏輯與:&&

邏輯或:||

邏輯非:!

邏輯運算符只能作用于布爾值,否則將產生錯誤

1.7.3比較運算符

表達式中支持的比較運算符有如下幾個:

1 =或者==:判斷兩個值是否相等.

2 !=:判斷兩個值是否不等.

3 >或者gt:判斷左邊值是否大于右邊值

4 >=或者gte:判斷左邊值是否大于等于右邊值

5 <或者lt:判斷左邊值是否小于右邊值

6 <=或者lte:判斷左邊值是否小于等于右邊值

注意: =和!=可以用于字符串,數值和日期來比較是否相等,但=和!=兩邊必須是相同類型的值,否則會產生錯誤,而且FreeMarker是精確比較,“x”,"x ","X"是不等的.其它的運行符可以作用于數字和日期,但不能作用于字符串,大部分的時候,使用gt等字母運算符代替>會有更好的效果,因為 FreeMarker會把>解釋成FTL標簽的結束字符,當然,也可以使用括號來避免這種情況,如:<#if (x>y)>

2.商品詳情頁-數據顯示

2.1需求分析

運用Freemarker技術來實現商品詳細頁的靜態化。通過地址欄輸入某地址，如下形式

http://localhost:9101/gen_item.do?goodsId=149187842867952

能在本地電腦某目錄生成商品詳細頁，頁面的名稱為商品id.html

2.2工程搭建

2.2.1服務接口層

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

/**
 * 商品詳細頁接口
 * @author Administrator
 *
 */
public interface ItemPageService {
	/**
	 * 生成商品詳細頁
	 * @param goodsId
	 */
	public boolean genItemHtml(Long goodsId);
}

2.2.2服務實現層

（1）創建war工程pinyougou-page-service

（2）pom.xml引入依賴參見其它服務工程, 另外添加freemarker依賴

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

（3）添加web.xml 參見其它服務工程

（4）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>

（5）創建屬性文件

內容為：

pagedir=d:\\item\\

用于配置網頁生成目錄

（6）建立com.pinyougou.page.service.impl包，包下建立類

@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.加載商品表數據
			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);
			out.close();
			return true;			
		} catch (Exception e) {
			e.printStackTrace();
			return false;
		}
	}
}

（7）將item.html拷貝至web-inf/ftl下，修改擴展名為ftl ,將商品名稱用插值代替

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

（8）在D盤建立文件夾item,將必要的樣式表和Js拷貝到此目錄下，此目錄為生成的目錄

2.2.3運營商管理后臺

（1）pinyougou-manager-web引入依賴pinyougou-page-interface

（2）在GoodsController.java中新增方法

	@Reference(timeout=40000)
	private ItemPageService itemPageService;
	/**
	 * 生成靜態頁（測試）
	 * @param goodsId
	 */
	@RequestMapping("/genHtml")
	public void genHtml(Long goodsId){
		itemPageService.genItemHtml(goodsId);	
	}

2.3商品詳情頁模板構建

2.3.1模板模塊化引入

此時我們的item.ftl內容較多，當我們編輯時不容易快速找到編輯的位置，所以我們將頭部分拆分到head.ftl ,將尾部拆分到foot.ftl ,用include指令在item.ftl中引入。

2.3.2生成基本數據

在模板中找到合適的位置，用插值替換靜態文本

<div class="news"><span>${goods.caption}</span></div>

<div class="fl price"><i>￥</i><em>${goods.price}</em><span>降價通知</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>

運行控制層代碼，測試生成效果

http://localhost:9101/goods/genHtml.do?goodsId=149187842867960

2.3.3生成圖片列表

編輯模板文件

<#--圖片列表 -->
<#assign imageList=goodsDesc.itemImages?eval />

這一句要轉換圖片列表的json字符串

圖片部分的代碼

<!--默認第一個預覽-->
<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生成擴展屬性列表

修改模板首先進行json轉換

<#--擴展屬性列表 -->
<#assign customAttributeList=goodsDesc.customAttributeItems?eval />

顯示擴展屬性數據，如果擴展屬性為空則不顯示此條數據

 <#list customAttributeList as item>
		<#if item.value??>
			 <li>${item.text} ：${item.value}</li>
		</#if>
</#list>

2.3.5生成規格列表

修改模板轉換規格列表

<#--規格列表 -->
<#assign specificationList=goodsDesc.specificationItems?eval />

此時，我們需要使用嵌套循環

<#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生成商品類型面包屑

修改ItemPageServiceImpl ，讀取三級商品分類名稱，加入到數據模型中

修改模板，展示商品分類面包屑

<ul class="sui-breadcrumb">
	<li><a href="#">${itemCat1}</a></li>
	<li><a href="#">${itemCat2}</a></li>
	<li><a href="#">${itemCat3}</a></li>					
</ul>

3.商品詳情頁-前端邏輯

3.1購買數量加減操作

3.1.1加入angularJS庫

將angularJS庫加入d:\item下

3.1.2前端控制層

將base.js拷貝到js目錄下

在js目錄下構建controller文件夾，創建itemController.js

//商品詳細頁（控制層）
app.controller('itemController',function($scope){
	//數量操作
	$scope.addNum=function(x){
		$scope.num=$scope.num+x;
		if($scope.num<1){
			$scope.num=1;
		}
	}		
});

在方法中控制數量不能小于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">

調用操作數量的方法

<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規格選擇

最終我們需要實現的效果：

3.2.1前端控制層

修改itemController.js

	$scope.specificationItems={};//記錄用戶選擇的規格
	//用戶選擇規格
	$scope.selectSpecification=function(name,value){	
		$scope.specificationItems[name]=value;
	}	
	//判斷某規格選項是否被用戶選中
	$scope.isSelected=function(name,value){
		if($scope.specificationItems[name]==value){
			return true;
		}else{
			return false;
		}		
	}

3.2.2模板

頁面調用控制器的方法

<dd>
	<a class="{{isSelected('${specification.attributeName}','${item}')?'selected':''}}" 
	ng-click="selectSpecification('${specification.attributeName}','${item}')">
	 ${item}								 			
<span title="點擊取消選擇"> </span>
 </a>
</dd>

4.商品詳情頁-讀取SKU信息

需求：當我們選擇規格后，應該在頁面上更新商品名稱為SKU的商品標題，價格也應該為SKU的商品價格。

4.1頁面生成SKU列表變量

4.1.1后端服務層

修改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.加載商品表數據			
			//2.加載商品擴展表數據					
			//3.商品分類			
			//4.SKU列表			
			TbItemExample example=new TbItemExample();
			Criteria criteria = example.createCriteria();
			criteria.andStatusEqualTo("1");//狀態為有效
			criteria.andGoodsIdEqualTo(goodsId);//指定SPU ID
			example.setOrderByClause("is_default desc");//按照狀態降序，保證第一個為默認			
			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>

測試生成，發現頁面源代碼中生成了變量

4.2顯示SKU標題和價格

4.2.1加載默認SKU信息

修改itemController.js

	//加載默認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()">

修改模板，顯示標題

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

顯示價格

<div class="summary-wrap">
	<div class="fl title"><i>價　　格</i></div>
<div class="fl price"><i>￥</i> <em>{{sku.price}}</em> <span>降價通知</span></div>
</div>

4.2.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;		
	}

編寫方法，在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(name,value){	
		$scope.specificationItems[name]=value;
		searchSku();//讀取sku
}

4.3添加商品到購物車

修改itemController.js

	//添加商品到購物車
	$scope.addToCart=function(){
		alert('skuid:'+$scope.sku.id);				
	}

修改模板：

<li><a href="#" target="_blank" class="sui-btn btn-danger addshopcar" ng-click="addToCart()">加入購物車</a></li>

5.系統模塊對接

5.1運營商后臺調用頁面生成服務

修改pinyougou-manager-web的GoodsController.java

	@RequestMapping("/updateStatus")
	public Result updateStatus(Long[] ids,String status){
		try {
			goodsService.updateStatus(ids, status);						
			//按照SPU ID查詢 SKU列表(狀態為1)		
			if(status.equals("1")){//審核通過
				List<TbItem> itemList = goodsService.findItemListByGoodsIdandStatus(ids, status);						
				//調用搜索接口實現數據批量導入
				if(itemList.size()>0){				
					itemSearchService.importList(itemList);					
				}else{
					System.out.println("沒有明細數據");
				}				
				//靜態頁生成
				for(Long goodsId:ids){
					itemPageService.genItemHtml(goodsId);
				}				
			}					
			return new Result(true, "修改狀態成功"); 
		} catch (Exception e) {
			e.printStackTrace();
			return new Result(false, "修改狀態失敗");
		}
	}

5.2創建商品詳細頁web工程

創建war模塊工程pinyougou-page-web ，將目標目錄（d:\item）的文件拷貝到此工程（生成的頁面不用拷貝）

在pom.xml中添加tomcat7插件，指定端口為9105

5.3搜索系統與商品詳細頁對接

修改pinyougou-search-web 的search.html，修改點擊圖片的鏈接為http://localhost:9105/{{item.id}}.html

說明：商品詳細頁是靜態頁，所以在開發階段我們可以使用tomcat來進行測試。部署在生產環境是部署在Nginx中。

現代社會，網頁已經成為企業、個人展示和宣傳的重要窗口，因此掌握網頁制作技能是非常有必要的。今天，我們將為大家介紹8款優秀的網頁設計模板網站，哪怕是小白也能幫助你快速搭建出令人驚艷的網頁。

一、即時設計

即時設計是一款支持在線協作的專業級 UI 設計工具，用戶數已突破230萬，支持 Sketch、Figma、XD 格式導入，無需下載，在線使用。10000+精選設計資源、100+提效插件即拿即用；支持創建交互原型、獲取設計標注，為產設研團隊提供一站式協同辦公體驗，一個鏈接即可完成交付，內容修改實時同步。

響應式網頁設計：

優點：

漏標的地方開發者也可以自行切圖
支持多平臺預設及批量導出
顏色整合顯示，一鍵定位對應元素

二、17素材

17素材網主要收集jQuery網頁特效、jQuery網頁代碼、網站模板、網頁模板、企業模板、商城模板、圖標等素材，為html網站模板開發人員提供高效率的工作方式。

部分素材需要積分才能下載。

三、 jquery 插件庫

jQuery插件庫是一組由開發者編寫的、可重復使用的jQuery插件集合，為Web開發人員提供了多種常用功能的封裝。這些插件可以快速實現諸如表單驗證、圖片輪播、下拉菜單、模態框等功能，使得Web開發人員能夠更快地完成開發任務，減少代碼重復性工作。

它快速、輕量并且簡化了我們瀏覽 HTML 文檔和操作頁面元素的方式。因為它還具有高度可擴展性，所以在框架之上構建了許多jQuery 插件來為網站添加功能。從 UI 組件和元素到布局和網格，有一個jQuery 插件可以滿足您網站所需的幾乎所有功能。

詳情頁還可以查看詳細代碼。

四、凡科建站

凡科建站提供自助建站、做網站、快速建站等營銷推廣服務，凡科建站平臺提供網站模板資源，擁有2000萬+流量入口，精選優質服務商，7*8在線服務；四大搜索覆蓋，快速上線，全網曝光，助力商家完成營銷目標。

網站模板圖片素材定期更新，簡單易操作，小白也會使用；而且擁有SEO框架布局，首頁、欄目產品及文章頁均可獨立設置標題/關鍵詞/描述；后臺直接修改聯系方式、傳真、郵箱、地址等，修改更加方便；同一個后臺管理，四網合一，用戶體驗好！

優點：

3000+精美網站模板，免費使用
100+行業覆蓋，應有盡有
素材豐富，圖片、字體、視頻等多種素材

五、網站模板庫

網站模板庫提供大量精選高質量并永久免費的(網站模版、網頁模板、手機模板、企業網站模板、網站模版)，包括html模板、后臺管理模板、博客模板及各行業類型等上千種模版。

模板素材眾多。

優點：

后臺操作簡單，功能全面
分類詳細，可以根據自己的需求快速找到合適的模板
網站自適應，根據屏幕大小改變網站布局，不變形

六、模板

提供海量精美免費網站模板、企業網站模板、html模板網站、公司網站模板、手機網站模板、自適應網站模板等免下載使用。

該網站收集了大量優質網站設計作品，適用于多個專業的 WordPress 主題模板、HTML5模板、CSS Menu等實用資源。

特色：

100%的響應
漂亮和干凈的設計
清潔和注釋代碼

七、AB模板網

AB模板網專注企業網站模板制作，包括企業pbootcms網站模板，靜態網頁模板，網站源碼下載，HTML網站模板等等。

這個網站專門提供織夢的網頁模板，性質和上面一樣，也是上傳到服務器上。

特點：

手工書寫DIV+CSS、代碼精簡無冗余
分類詳細，根據需要直接定位
SEO框架布局，欄目及文章頁均可獨立設置標題/關鍵詞/描述

八、織夢貓

織夢貓是一個網站模板分享交流平臺，網站以織夢模板、建站資訊、織夢教程為主要內容，以“共享創造價值”為理念，以“尊重原創”為準則。滿足用戶不同的網站模板需求。

同樣也提供dedecms的網頁模板。

模板安裝方法：

下載最新的織夢dedecms5.7 UTF8版本。
解壓下載的織夢安裝包，得到docs和uploads兩個文件夾，將uploads里面的所有文件和文件夾上傳到你的網站根目錄
安裝dede系統。(如果您已經安裝,請跳過本步.)直接運行：http://您的域名/install
將web文件夾內的所有文件夾上傳并覆蓋到織夢的安裝目錄;
登陸后臺并還原數據庫：

1）進入dede后臺，找到“系統”-“數據庫備份/還原”

2）在屏幕右上角點擊“數據還原”

3）點擊屏幕下方的'開始還原'按鈕

確定網站風格（無論是否修改，都點擊一下確定）：

1）點擊“系統”---系統基本參數

2）將“站點根網址”改為您的網址，如http://www.xxx.com/（本地安裝請保持http://127.0.0.1。）

3）點擊“確定”按鈕

更新整站緩存：點擊“生成”-“更新系統緩存”
更新網站：點擊“生成”-“一鍵更新網站”-“更新所有”-“開始更新” 點擊“生成”-“更新主頁html” 至此，模板安裝結束

這些網頁模板網站提供了多樣化的選擇，從專業的商業網站到個人博客，從免費的模板到付費的高級模板，滿足了不同用戶的需求。無論您是有設計經驗的專業人士還是初學者，這些網站都能幫助您快速搭建一個具有吸引力和功能性的網站。

如果你還有更好的方式或工具推薦，記得在評論區互動討論！

整合營銷服務商

DataGear使用靜態HTML模板制作數據可視化看板

1.網頁靜態化技術Freemarker

1.4 FTL指令

1.7運算符

2.商品詳情頁-數據顯示

3.商品詳情頁-前端邏輯

4.商品詳情頁-讀取SKU信息

5.系統模塊對接

一、即時設計

二、17素材

三、 jquery 插件庫

四、凡科建站

五、網站模板庫

六、模板

七、AB模板網

八、織夢貓

更多工具推薦

您的項目需求

整合營銷服務商

DataGear使用靜態HTML模板制作數據可視化看板

1.網頁靜態化技術Freemarker

1.4 FTL指令

1.7運算符

2.商品詳情頁-數據顯示

3.商品詳情頁-前端邏輯

4.商品詳情頁-讀取SKU信息

5.系統模塊對接

一、即時設計

二、17素材

三、 jquery 插件庫

四、凡科建站

五、網站模板庫

六、模板

七、AB模板網

八、織夢貓

更多工具推薦

您的項目需求

一、即時設計

五、網站模板庫

六、模板

八、織夢貓