java建站系統之無聊建站系統前端模板開發介面
無聊建站系統前端模板開發介面
使用無聊建站系統，前端開發者可自主定製開發實現多風格網站，實現起來高效、簡單、方便！
一、開發要求：
1、熟悉FreeMarker模板引擎的基本標籤使用
2、熟悉js/css，熟悉jquery等js框架
二、頁面型別
無聊建站系統，前端總共有以下6個頁面
1、首頁(index.ftl)
2、內容列表頁(category.ftl)
3、內容詳情頁(article.ftl)
4、搜尋列表頁(searchlist.ftl)（與內容列表頁差不多）
5、404頁面(common/404.ftl)
6、500頁面(common/500.ftl)
三、前端頁面放置位置
1、首頁(index.ftl)
2、內容列表頁(category.ftl)
3、內容詳情頁(article.ftl)
4、搜尋列表頁(searchlist.ftl)
以上必須放置在templates目錄下
5、404頁面(404.ftl)
6、500頁面(500.ftl)
以上ftl模板檔案必須放置在templates目錄下的common目錄下
自定義js/css檔案請放置在static目錄下，可自行建立目錄，注意在模板檔案中引入是的路徑即可
四、請求地址及返回引數
1、公共返回引數(任何頁面都可以獲取的到)：
網站名稱：${webName!}
網站域名：${domainname!}
網站logo圖片地址：${logo!}
聯絡我二維碼圖片地址：${qrcode!}
關於我們描述：${aboutus!}
網站版權描述：${copyright!}
網站招牌圖片地址：${storepic!}
搜尋過的快取集合(需要遍歷)：${searchs!}
遍歷示例：
<#if searchs?exists>
<#list searchs as data>
<a href="/search/1/${data!}">${data!}</a>
</#list>
</#if>
導航選單集合(需要遍歷)：${cateList!}
遍歷示例：
<#if cateList?exists>
<#list cateList as cate>
<li>
<a href="${cate.url!}">${cate.name!}</a>
<ul <#if cate.cates?exists> <#else> </#if> >
<#if cate.cates?exists>
<#list cate.cates as ct>
<li><a href="${ct.url!}">${ct.name!}</a></li>
</#list>
</#if>
</ul>
</li>
</#list>
</#if>
標籤列表(需要遍歷)：${tags!}
遍歷示例：
<#if tags?exists>
<#list tags as tag>
<a href="${tag.link!}">${tag.name!}</a>
</#list>
</#if>
2、首頁返回引數
1、請求地址：/ 或者 /index.html
返回到頁面：index.ftl
返回引數：
title：${title!}
description：${description!}
keywords：${keywords!}
最新資訊(需要遍歷)：${topnews!}
遍歷示例：
<#if topnews?exists>
<#list topnews as top>
<li><i>${top_index + 1}</i> <a href="/article/${top.id!}.html" title="${top.title!}" target="_blank">${top.title!}</a></li>
</#list>
</#if>
隨機資訊(需要遍歷):${randomnews!}
遍歷示例：
<#if randomnews?exists>
<#list randomnews as rand>
<a href="/article/${rand.id!}.html" title="${rand.title!}" target="_blank"><img src="${rand.imgurl!}"/></a>
<p><a href="/article/${rand.id!}.html" title="${rand.title!}" target="_blank">${rand.title!}</a></p>
</#list>
</#if>
最受歡迎資訊(需要遍歷):${mostpounews!}
遍歷示例：同上
檢視量最多的幾條資訊資料(需要遍歷):${pageBean!}
遍歷示例：
<#if pageBean.resultList?exists>
<#list pageBean.resultList as article>
<a href="/article/${article.id!}.html" title="${article.title!}" target="_blank"><img src="${article.imgurl!}" alt="${article.title!}" /></a>
<a href="/article/${article.id!}.html" title="${article.title!}" target="_blank">${article.title!}</a>
<a>${article.user!}</a>
<time>${article.create_time?string("yyyy-MM-dd")!}</time>
<i></i>${article.pageview!}</span>
<p>${article.description!}</p>
</#list>
</#if>
服務動態4條(需要遍歷):${dynamicnews!}
<#if dynamicnews?exists>
<#list dynamicnews as dyna>
<li <#if dyna_index % 2 ==0 > <#else> </#if> >
<a href="/article/${dyna.id!}.html" title="${dyna.title!}"><img src="${dyna.imgurl!}" alt="${dyna.title}" /></a>
<a href="/article/${dyna.id!}.html" title="${dyna.title!}">${dyna.title!}</a>
<p>${dyna.description!}</p>
</#list>
</#if>
友情連結(需要遍歷)：${links!}
遍歷示例：
<#if links?exists>
<#list links as link>
<li><a href="${link.link!}" target='_blank'>${link.name!}</a></li>
</#list>
</#if>
banner圖(需要遍歷)：${banners!}
遍歷示例：
<#if banners?exists>
<#list banners as banner>
<a href="${banner.link!}" title="${banner.title!}">
<img src="${banner.imgurl!}" alt="${banner.title!}" />
<p>${banner.title!}</p>
</a>
</#list>
</#if>
3、欄目頁返回引數
1、請求地址：/cate/${id!}.html
id為欄目id，導航遍歷時動態獲取，或者在欄目詳情資訊中獲取
返回到頁面：category.ftl
返回引數：
欄目資訊：${cate!}
獲取詳細資訊：${cate.title!} ${cate.keywords!} ${cate.description!} ${cate.id!}
最新資訊(需要遍歷，參考首頁的)：${topnews!}
隨機資訊(需要遍歷，參考首頁的)：${randomnews!}
最受歡迎資訊(需要遍歷，參考首頁的)：${mostpounews!}
資訊分頁資料(需要遍歷，參考首頁的)：${pageBean!}
分頁資料遍歷示例：
<#if pageBean.resultList?exists>
<#list pageBean.resultList as article>
<a href="/article/${article.id!}.html" title="${article.title!}"
target="_blank"><img src="${article.imgurl!}" alt="${article.title!}" /></a>
<a href="/article/${article.id!}.html" title="${article.title!}" target="_blank">${article.title!}</a>
<a>${article.user!}</a>
<time>${article.create_time?string("yyyy-MM-dd")!}</time>
<i></i>${article.pageview!}</span>
<p>${article.description!}</p>
</#list>
</#if>
分頁引數使用示例：
<#if pageBean?exists>
<#if pageBean.pageTotal gte 1 >
<li><a href="/cate_1_${cate.id!}.html" >首頁</a></li>
<#else>
<li><a>首頁</a></li>
</#if>
<#if pageBean.pageNo lte 1 >
<li><a>上一頁</a></li>
<#else>
<li><a href="/cate_${pageBean.pageNo-1!}_${cate.id!}.html" >上一頁</a></li>
</#if>
<#if pageBean.pageNo?exists>
<li><a href="/cate_${pageBean.pageNo!}_${cate.id!}.html" >${pageBean.pageNo!}</a></li>
</#if>
<#if pageBean.pageNo gte pageBean.pageTotal >
<li><a>下一頁</a></li>
<#else>
<li><a href="/cate_${pageBean.pageNo+1!}_${cate.id!}.html" >下一頁</a></li>
</#if>
<#if pageBean.pageTotal gte 1 >
<li><a href="/cate_${pageBean.pageTotal!}_${cate.id!}.html" >末頁</a></li>
<#else>
<li><a>末頁</a></li>
</#if>
</#if>
友情連結(需要遍歷，參考首頁的)：${links!}
3、內容詳情頁返回引數
1、請求地址：/article/${id!}.html
id為文章id
2、返回到頁面：article.ftl
3、返回引數：
文章資訊：${article!} ${article.keywords!} ${article.description!}
${article.cid!} 所屬欄目id ${article.type_name!}所屬欄目名稱 ${article.id!} 文章id
${article.user!} ${article.create_time?string("yyyy-MM-dd")!} ${article.pageview!}
上一篇：
<#if prev?exists>
<a href='/article/${prev.id!}.html'>${prev.title!}</a>
</#if>
</div>
下一篇：
<#if next?exists>
<a href='/article/${next.id!}.html'>${next.title!}</a>
</#if>
相關內容
<#if relatednews?exists>
<#list relatednews as related>
<div><a href="/article/${related.id!}.html" title="${related.title!}" target="_blank"><img src="${related.imgurl!}"/></a></div>
<p><a href="/article/${related.id!}.html" title="${related.title!}" target="_blank">${related.title!}</a></p>
</#list>
</#if>
最新資訊(需要遍歷，參考首頁的)：${topnews!}
隨機資訊(需要遍歷，參考首頁的)：${randomnews!}
最受歡迎資訊(需要遍歷，參考首頁的)：${mostpounews!}
猜你喜歡(需要遍歷，參考首頁的)：${relatednews!}
友情連結(需要遍歷，參考首頁的)：${links!}
4、搜尋返回引數
1、請求地址：/search/${pageNo!}/${q!}.html
pageNo 為第幾頁 q代表搜尋詞
2、返回到頁面：searchlist.ftl
3、返回引數：
最新資訊(需要遍歷，參考首頁的)：${topnews!}
隨機資訊(需要遍歷，參考首頁的)：${randomnews!}
最受歡迎資訊(需要遍歷，參考首頁的)：${mostpounews!}
友情連結(需要遍歷，參考首頁的)：${links!}
q搜尋詞(使用者回顯)：${q!}
5、補充介面,ajax獲取所有欄目資訊
1、請求地址：/cate_all 請不要帶.html字尾
2、返回引數：
json資料，自行解析使用
以上介面呼叫請以官方最新文件為準，官方一直更新完善呼叫介面，會第一時間釋出在官方網站http://jianzhan.wuliaokankan.cn！
歡迎各位前端開發者貢獻前端模板，如果有任何的建議或意見請加作者微信（tangjinjinwx） 方便給作者提出，我們會不斷完善！溫馨提示：最新介面請以官方為準！！！