JspXCMS自学（二）JspXCMS使用

一、将jspXCMS源码拷贝到本地eclipse

JspXCMS可以选择直接通过tomcat启动方式访问开发，但是考虑到部分地方代码需要更改，就直接拷贝到eclipse，步骤查看官方推荐的文档即可（在下载的源码文件中有）

在这里插入图片描述

二、启动tomcat，访问

http://localhost:8080/JspCMS/
在这里插入图片描述

http://localhost:8080/JspCMS/cmscp/index.do

账号：admin 密码：不填即可

在这里插入图片描述

三、网站基本信息配置

一般来说我们都会替换掉网站本身提供的模板

1、上传静态文件，文件管理-default-_files ，上传文件，选择网站的js、css、img等静态文件，然后上传即可（原来的可以直接删除或者保留不管即可）

在这里插入图片描述
上传完后

2、模型的建立

我这里直接以官方提供的界面最为参考。（招聘模块包含列表界面和详情界面，这也是通常网站常用的设计界面）
在这里插入图片描述

列表和详情界面分为两部分，对应的在后台管理中需要建立两个模型（文档模型和栏目模型）具体参考上面的实例即可。

文档模型：我理解为一条数据（里面包含一条数据的各个属性字段）
栏目模型：数据列表集合模型

在这里插入图片描述

3、上传模板界面

上面额文档模型和栏目模型都需要选择一个页面模板，通常页面模板需要我们自己单独上传。我们原来的模板通常是静态html，参考原来存在的模板修改我们上传的静态html模板即可（语法为freemarker）
在这里插入图片描述

四、常用的标签

1、获取栏目信息

<!-- 输出   【 招聘】 -->
<p class="f-lh-30 f-size-18 f-color-5694dd f-p-l f-left">${node.name}</p>

<!-- 输出  【 首页>招聘 】
<span class="f-color-3e6491">[#list node.hierarchy as n]<a href="${n.url}">${n.name}</a>[#if n_has_next] / [/#if][/#list]</span>

在这里插入图片描述

2、列表展示和分页

在这里插入图片描述

[@InfoPage p0=Param.p0 nodeId=node.id pageSize='10';pagedList]
			<ul class="f-p-t-md">
				[#list pagedList.content as info]
				<li class="list-li f-clear">
					<a href="${info.url}" target="_blank" class="f-size-14 f-lh-20 f-h-20 f-left list-text" title="${info.title}"><i class="iconfont f-lh-20">&#xe7a5;</i>【${info.p0Value}】${info.title}</a>
					<p class="f-left f-size-14 f-color-666666 f-lh-20 f-h-20 list-text1">${info.source}</p>
					<p class="f-right f-size-14 f-color-8a8a8a f-lh-20 f-h-20 f-info-l">${info.publishDate?string('yyyy.MM.dd')}</p>
				</li>
				[/#list]				
			</ul>
                      </div>	
			[#if pagedList.totalPages>1]
			[#include 'page.html'/]
			[/#if]
			[/@InfoPage]

带有查询条件的分页，选择地点查询

这里通过本人测试发现，查询只支持系统字段查询，不支持自定义字段

在这里插入图片描述

这些就是系统字段，同时还可以点击系统字段进行选择（如果需要带查询条件的字段，可以选择p0~p6之间的字段）
在这里插入图片描述

在这里插入图片描述

这里了我没有找到如果在前台直接遍历的方法，只能写死

<div class="f-size-14 f-left f-lh-30">地点： </div>
<div class="f-left industry-btn f-m-r   [#if Param.p0?? ][#else]industry-btn-this [/#if] ">
		<a href="${node.url}">全部</a>
</div>
<div class="f-left industry-btn f-m-r   [#if Param.p0?? ][#if Param.p0=='1' ]industry-btn-this [/#if][/#if]">
			<a href="${node.url}?p0=1">北京</a>
</div>
<div class="f-left industry-btn f-m-r   [#if Param.p0?? ][#if Param.p0=='2' ]industry-btn-this [/#if][/#if]  ">
			<a href="${node.url}?p0=2">深圳</a>
</div>

同时 InfoPage 标签中需要 p0=Param.p0即可

[@InfoPage p0=Param.p0 nodeId=node.id pageSize='10';pagedList]

如果有多个条件

 <div class="f-clear f-m-t">
			<div class="f-size-14 f-left f-lh-30">地点： </div>
			<div class="f-left industry-btn f-m-r   [#if (Param.p1)?? &&  (Param.p1)!="" ][#else]industry-btn-this [/#if] ">
					<a href="${node.url}?p0=${Param.p0}">全部</a>
			</div>
		    <div class="f-left industry-btn f-m-r   [#if Param.p1?? ][#if Param.p1=='1' ]industry-btn-this [/#if][/#if]">
					<a href="${node.url}?p1=1&p0=${Param.p0}">北京</a>
			</div>
			<div class="f-left industry-btn f-m-r   [#if Param.p1?? ][#if Param.p1=='2' ]industry-btn-this [/#if][/#if]  ">
					<a href="${node.url}?p1=2&p0=${Param.p0}">深圳</a>
			</div>
						 
</div>
<div class="f-m-t-sm f-clear">
			<div class="f-size-14 f-left f-lh-30">类型：</div>
			<div class="f-left industry-btn1 [#if (Param.p0)?? &&  (Param.p0)!="" ][#else]industry-btn1-this [/#if] ">
				<a href="${node.url}?p1=${Param.p1}">全部</a>
			</div>
			<div class="f-left industry-btn1 f-m-l [#if Param.p0?? ][#if Param.p0=='1' ]industry-btn1-this [/#if][/#if] ">
				<a href="${node.url}?p0=1&p1=${Param.p1}">类型1</div>
           </div>
</div>


[@InfoPage p0=Param.p0 p1=Param.p1  nodeId=node.id pageSize='10';pagedList]