标签 "jeecms" 下的文章

jeecms作为国内Java开源内容管理系统的龙头老大(感谢jeecms研发小组的辛苦劳作),技术架构也是比较成熟的,当然涉及到的技术也就相对多一些

看看jeecms内容管理系统使用了哪些技术

web开发当然离不开最基本的三大元素html、javascript和css,jeecms也不列外,用到的javascript库是jQuery
为了可以生成真正的静态html页面,使用了FreeMarker模板技术,这样方便我们自定义模板
MVC框架使用的SpringMVC,没有使用传统的Struts作为web开发的框架
开源版使用MySQL数据库,网上资料丰富,易于学习,数据库ORM框架使用的是Hibernate,数据库连接池是c3p0,同样也算是比较流行的框架
加入了验证码模块防止机器程序制造大量的垃圾,数据验证码使用的是java开源验证码jcaptcha,不过版本相对较老
WYSWYG(所见即所得)编辑器集成的是ckeditor,国外开源富文本编辑器
时间日期控件使用的是My97DatePicker,一款很不错的的国产日期控件
上传组件使用了swfupload和commons-fileupload
缓存使用Ehcache,定时器使用的是quartz,功能很强大的,都属于美国Terracotta公司的开源组件
jeecms用到的全文搜索组件是Apache的Lucene,还配合使用了java语言开发的轻量级的中文分词工具包IK Analyzer
还有一些其他的工具包,如log4j,dom4j,dwr, json,htmlparser….

jeecms整体项目结构图
20140619213903

jeecms项目结构:
src-1:java源代码的目录
r-2:web前端用到的资源,比如js, css和img
res-3:管理端用到的资源,比如js, css和img
thirdparty-4:这里放的是第三方的一些插件,比如上面提到的ckeditor,swfupload和My97DatePicker
u-5: v5版本演示用到的图片,可删,对系统没得影响
common-6:这里面的是一些公共页面,比如用于显示上传情况,信息提示
config-7:系统的关键配置文件都在这儿了,比如修改数据库连接就需要在这里改
error-8:放一些服务器端错误提示的页面,比如403错误、程序异常等
ftl-9:管理端用到的freemarker模板文件
ipseek-10:放的是IP库,用于分析IP归属地
jeecms_sys-11:管理端HTML模板文件
langauges-12:国际化语言配置文件
lib-13:所有依赖的包都放这儿
lucene-14:这个目录是lucene生成的一些所以文件
t-15:包含前端模板HTML文件

上面没有介绍到cache目录是缓存生成的文件,classes目录是编译后class文件的默认路径。实际运行中如果把class文件都打成了jar包放到lib目录下,那这个文件夹也可以删了

注:这些文件夹的名字是不可以乱改的,改了的话,对应的源代码有些地方也要改,后面会更新相应的介绍

最近想自己写一些标签,看了一下JEECMS,感觉有些标签还是很值得学习的。

1、图片新闻:可以实现类似于flash切换图片的那种效果

效果:
1334107074_5467

代码:

[@cms.ArtiList chnlId='' attr='3' count='6' sysContent='3-1' titLen='35' flashWidth='507' flashHeight='338'/]

其中sysContent='3-1'指的就是以flash方式显示图片新闻。

类似的内容样式还有:
1-1:普通标题列表
1-2:图文列表
2-1:标题列表翻滚
2-2:图文列表翻滚
3-1:焦点图
2、新闻列表:

代码:

[@cms.ArtiList chnlId='14' count='7' sysContent='1-1' titLen='36' lineHeight='3' dateFormat='4' datePosition='2' headMark='3' target='1'/]

具体参数太多了,还是拷贝一下吧:

属性名称 属性说明 默认值 可选值
chnlId 栏目ID,栏目页中可不设置,系统会自动获取当前栏目ID 当前栏目ID 空:显示全站文章列表; 栏目ID:指定栏目文章
attr 文章属性ID 1:普通   2:图文3:焦点   4:头条

5:滚动
sysContent 列表显示方式 1-1 1-1:普通标题列表1-2:图文列表

2-1:标题列表翻滚

2-2:图文列表翻滚

3-1:焦点图
orderBy 排序方式 0 0:发布时间降序;1:发布时间升序;

2:固顶降序;

3:置顶降序;

4:日点击降序;

5:周点击降序;

6:月点击降序;

7:季点击降序;

8:年点击降序;

9:总点击降序
recommend 是否推荐 0 0:所有文章1:推荐文章
titLen 标题长度 20 自定义
target 链接打开目标 0 0:原窗口打开1:新窗口打开
headMark 文章标题图标 0 0:无图标1:黑色小圆点

2:红色小圆点

3:蓝色单箭头

4:蓝色双箭头

自定义图标:填写图标路
lineHeight 文章列表每行的行高 自定义
bottomLine 每行标题下是否带下划分隔线 0 0:无分隔线1:默认分隔线

自定义样式:css中定义的样式名称
ctgForm 文章类别形式 0 0:不显示文章类别1:显示栏目类别

2:显示站点名称
ctgClass 文章类别的css-class 自定义css样式的class名
dateFormat 文章发布日期显示格式 0 0:不显示日期1:”年-月-日 时-分-秒” 格式

2:”年-月-日” 格式

3:”月-日 时-分” 格式

4:”月-日” 格式
datePosition 日期排列位置 1 1:紧跟标题之后2:右对齐

3:左对齐
isPage 是否显示分页 0 0:否;1:是
count 每页列表显示数量 20 自定义
cssStyle 连接的样式 自定义
仅当sysContent='1-2'(图文列表)时,以下标签属性才有效
picWidth 按百分比显示图片宽度 25(即每个图片占总宽度的25%,每行可放四张图片) 自定义
picHeight 每行图片显示高度 110 自定义
仅当sysContent='3-×'(焦点图)时,以下标签属性才有效
flashWidth 焦点图宽度 296(px) 自定义
flashHeight 焦点图总高度 200(px) 自定义
textHeight 焦点图文本高度 20(px) 自定义
仅当sysContent='2-×'(特效显示)时,以下标签属性才有效
rollDisplayHeight 显示区高度 28 自定义
rollLineHeight 行高 28 自定义
rollCols 列数(一行中包含几列) 1 自定义
rollSpeed 滚动速度,值越小越快,最小为1 1 自定义
isSleep 是否停顿 1 0:不停顿;1:停顿
rollSleepTime 停顿时间,值越大停顿越久 50 自定义
rollCount 一次滚动的行数 1 自定义
rollSpan 一次滚动的像素 1 自定义
其它高级标签属性(用于用户个性设置)
searchKey 在标题、tags和描述中搜索指定关键字的文章列表,用于搜索页模板 自定义关键字
style 标签内部样式,如果指定sysContent或userContent,则该项无效 1 1:普通列表
sysTpl 指定系统模板 1 自定义
sysContent 系统内容样式 0 自定义
userContent 用户内容样式,当sysContent=1时有效 自定义
sysPage 系统分页样式 0 自定义
userPage 用户分页样式,当sysPage=1时有效 自定义
upSolution 指定其它模板方案样式 自定义
upWebRes 指定其它站点样式 自定义
pageClass 分页栏css样式的class名称 自定义
pageStyle 分页栏css自定义style样式 自定义

3、显示栏目名称:

[@cms.ChnlList hasContent='1' inner='1';c]
<div class="news_list_m"><a href="${c.url}">${c.name}</a></div>
[/@cms.ChnlList]

4、实现图片滚动效果(类似跑马灯):

这个还真是费了些周折,本来JEECMS文档中说支持这种滚动效果,可试了半天就是不“滚动”,我试的代码:

[@cms.ArtiList chnlId='' attr='3' sysContent='2-2']

后来没办法,自己写了一个:

<div id="expert" style="width: 507px; height: 130px; color: #ffffff; overflow: hidden">
<table border="0" cellpadding="0" align="left" cellspace="0">
<tbody>
<tr>
<td align="center"><img alt="" width="170" height="130" src="${root}/fwjn/article/img/tu7.jpg" /></td>
<td align="center">
<div id="demo" style="width: 337px; height: 80px; color: #ffffff; overflow: hidden;valign:center">
<table border="0" cellpadding="0" align="left" cellspace="0">
<tbody>
<tr>
<td id="demo1" valign="center">
<table border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr align="center">
[@cms.ArtiList chnlId='21' attr='5' orderBy='9' inner='1';ca]
[#if ca.imgUrl?length lte 10 ]
[#else]
<td width="60"> <a target="_blank" href="${ca.url}"> <img alt="${ca.title}" width="60" height="80" src="${ca.imgUrl}"/> </a> </td>
[/#if]
[/@cms.ArtiList]
</tr>
</tbody>
</table>
</td>
<td id="demo2" valign="center"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p><SCRIPT>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT></p>