快捷搜索:

无聊建站系统前端模板开发接口

无聊建站系统前端模板开发接口
使用无聊建站系统,前端开发者可自主定制开发实现多风格网站,实现起来高效、简单、方便!

无聊建站系统前端模板开发接口
一、开发要求:
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数据,自行解析使用

以上接口调用中如果存在疑问,请参考jar包中templates目录下的源码;jar包可到无聊建站使用说明中下载;

jar包是压缩包的一种形式,前端开发者可以修改后缀名为zip然后解压,开发调试时可解压jar包,cd命令行切换到该目录,执行java  org.springframework.boot.loader.JarLauncher  回车即可启动服务端!

欢迎各位前端开发者贡献前端模板,如果有任何的建议或意见请加作者微信(tangjinjinwx) 方便给作者提出,我们会不断完善后台接口的!


您可能还会对下面的内容感兴趣: