CMS管理后台基础模块

基本功能:增删改查

首先了解清楚一个基础模块包含的功能:增删改查

模块总览

查询

根据查询条件进行查询,将查询结果以列表形式展示

查询数据

新增

点击“新增”按钮,弹出信息填写框,填写相关信息后,点击确定,成功录入一条数据。

新增数据

修改

  1. 找到某一条数据,点击进行编辑,弹出的信息编辑框,信息区域内展示这条数据原本的信息。

  2. 修改信息后,点击确定,将新的数据更新到数据库中。

修改数据

删除

  1. 找到某一条数据,点击删除,弹出删除确认框,点击确认后方可进行删除。

删除数据

作者简介:李尧晖,芦苇科技web前端开发工程师,代表作品:飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、微信公众号开发、微信小程序开发、小游戏制作、企业微信制作、H5建设,专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。

欢迎和我们一起并肩作战: web@talkmoney.cn
访问 www.talkmoney.cn 了解更多

提供深圳微信公众号外包,高质量的钉钉开发,专业的企业微信建设,东莞微信小程序开发,广州小游戏制作,广东H5建设

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
cms-Cloud后台管理系统 cms-Cloud 基于Spring Boot、Spring Cloud & Alibaba、OAuth2的前后端分离的后台管理系统,内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置;支持集群,支持多数据源。核心技术前端技术栈 ES6、vue、vuex、vue-router、vue-cli、axios、element-ui后端技术栈 Spring Boot、Spring Cloud & Alibaba、OAuth2系统需求JDK >= 1.8MySQL >= 5.5Maven >= 3.0主要特性1. 完全响应式布局(支持电脑、平板、手机等所有主流设备)2. 强大的一键生成功能(包括控制器、模型、视图、菜单等)3. 支持多数据源,简单配置即可实现切换。4. 支持按钮及数据权限,可自定义部门数据权限。5. 对常用js插件进行二次封装,使js代码变得简洁,更加易维护6. 完善的XSS防范及脚本过滤,彻底杜绝XSS攻击7. Maven多项目依赖,模块及插件分项目,尽量松耦合,方便模块升级、增减模块。8. 国际化支持,服务端及客户端支持9. 完善的日志记录体系简单注解即可实现技术选型1、系统环境Java EE 8Servlet 3.0Apache Maven 32、主框架Spring Boot 2.2Spring Cloud Hoxton.SR3Spring Framework 5.1Spring Security 5.13、持久层Apache MyBatis 3.4Alibaba Druid 1.14、视图层Vue 2.6Axios 0.18Element UI 2.11内置功能(1) 用户管理:用户是系统操作者,该功能主要完成系统用户配置。(2) 部门管理:配置系统组织机构(公司、部门、小组),树结构展现支持数据权限。(3) 岗位管理:配置系统用户所属担任职务。(4) 菜单管理:配置系统菜单,操作权限,按钮权限标识等。(5) 角色管理:角色菜单权限分配、设置角色按机构进行数据范围权限划分。(6) 字典管理:对系统中经常使用的一些较为固定的数据进行维护。(7) 参数管理:对系统动态配置常用参数。(8) 通知公告:系统通知公告信息发布维护。(9) 操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。(10) 登录日志:系统登录日志记录查询包含登录异常。(11) 在线用户:当前系统中活跃用户状态监控。(12) 定时任务:在线(添加、修改、删除)任务调度包含执行结果日志。(13) 代码生成:前后端代码的生成(java、html、xml、sql)支持CRUD下载 。(14) 系统接口:根据业务代码自动生成相关的api接口文档。(15) 服务监控:监视当前系统CPU、内存、磁盘、堆栈等相关信息。(16) 在线构建器:拖动表单元素生成相应的HTML代码。(17) 连接池监视:监视当期系统数据库连接池状态,可进行分析SQL找出系统性能瓶颈。 环境部署准备工作JDK >= 1.8 (推荐1.8版本)Mysql >= 5.5.0 (推荐5.7版本)Redis >= 3.0Maven >= 3.0Node >= 10nacos >= 1.1.0sentinel >= 1.6.0运行系统因为本项目是前后端分离的,所以需要前后端都启动好,才能进行访问。后端运行1、导入cms到Eclipse,菜单 File -> Import,然后选择 Maven -> Existing Maven Projects,点击 Next> 按钮,选择工作目录,然后点击 Finish 按钮,即可成功导入Eclipse会自动加载Maven依赖包,初次加载会比较慢(根据自身网络情况而定)2、创建数据库cms-cloud并导入数据脚本cms.sql(必须),quartz.sql(可选)3、创建数据库cms-config并导入数据脚本cms_config.sql(必须)4、配置nacos持久化,修改conf/application.properties文件,增加支持mysql数据源配置。# db mysqlspring.datasource.platform=mysqldb.num=1db.url.0=jdbc:mysql://localhost:3306/cms-config?characterEncoding=utf8&connectTimeout=1000&socketTimeout=3000&autoReconnect=true&useUnicode=true&useSSL=false&serverTimezone=UTCdb.user=rootdb.password=password5、打开运行基础模块(启动没有先后顺序)CmsGatewayApplication (网关模块 必须)CmsAuthApplication (认证模块 必须)CmsSystemApplication (系统模块 必须)CmsMonitorApplication (监控中心 可选)CmsGenApplication (代码生成 可选)CmsJobApplication (定时任务 可选)CmsFileApplication (文件服务 可选)前端运行# 进入项目目录cd cms-ui# 安装依赖npm install# 强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。npm install --registry=https://registry.npm.taobao.org 本地开发 启动项目npm run dev打开浏览器,输入:http://localhost:80 (默认账户 admin/admin123)若能正确展示登录页面,并能成功登录,菜单及页面展示正常,则表明环境搭建成功提示前端安装完node后,最好设置下淘宝的镜像源,不建议使用cnpm(可能会出现奇怪的问题)部署系统因为本项目是前后端分离的,所以需要前后端都部署好,才能进行访问后端部署bin/package.bat 在项目的目录下执行然后会在项目下生成 target文件夹包含 war 或jar1、jar部署方式使用命令行执行:java –jar xxxx.jar 或者执行脚本:bin/run.bat2、war部署方式pom.xml packaging修改为war 放入tomcat服务器webapps提示SpringBoot去除内嵌tomcat前端部署当项目开发完毕,只需要运行一行命令就可以打包你的应用# 打包正式环境npm run build:prod# 打包预发布环境npm run build:stage构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 ***.js 、***.css、index.html 等静态文件。通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可,其中的 index.html 是后台服务的入口页面。环境变量所有测试环境或者正式环境变量的配置都在 .env.development (opens new window)等 .env.xxxx文件中。它们都会通过 webpack.DefinePlugin 插件注入到全局。常见问题如果使用Mac 需要修改application.yml文件路径profile如果使用Linux 提示表不存在,设置大小写敏感配置在/etc/my.cnf 添加lower_case_table_names=1,重启MYSQL服务如果提示当前权限不足,无法写入文件请检查profile是否可读可写,或者无法访问此目录
CMS后台管理系统我讲课特色:方法论:授人以鱼不如授人以渔一、宏观思维:全局解剖(架构层面)二、微观思路:每一行代码解剖三、哲学思想:结合马克思哲学讲解代码,分析表象与本质基于SpringBoot、Shiro、Mybatis的权限后台管理系统。基于经典技术组合(Spring Boot、Apache Shiro、MyBatis、Thymeleaf)主要目的让开发者注重专注业务,降低技术难度,从而节省人力成本,缩短项目周期,提高软件安全质量。系统需求· JDK >= 1.8· MySQL >= 5.5· Maven >= 3.0主要特性· 完全响应式布局(支持电脑、平板、手机等所有主流设备)· 强大的一键生成功能(包括控制器、模型、视图、菜单等)· 支持多数据源,简单配置即可实现切换。· 支持按钮及数据权限,可自定义部门数据权限。· 对常用js插件进行二次封装,使js代码变得简洁,更加易维护· 完善的XSS防范及脚本过滤,彻底杜绝XSS攻击· Maven多项目依赖,模块及插件分项目,尽量松耦合,方便模块升级、增减模块。· 国际化支持,服务端及客户端支持· 完善的日志记录体系简单注解即可实现技术选型1、系统环境· Java EE 8· Servlet 3.0· Apache Maven 32、主框架· Spring Boot 2.0· Spring Framework 5.0· Apache Shiro 1.43、持久层· Apache MyBatis 3.4· Alibaba Druid 1.14、视图层· Bootstrap 3.3· Thymeleaf 3.0内置功能· 用户管理:用户是系统操作者,该功能主要完成系统用户配置。· 部门管理:配置系统组织机构(公司、部门、小组),树结构展现支持数据权限。· 岗位管理:配置系统用户所属担任职务。· 菜单管理:配置系统菜单,操作权限,按钮权限标识等。· 角色管理:角色菜单权限分配、设置角色按机构进行数据范围权限划分。· 字典管理:对系统中经常使用的一些较为固定的数据进行维护。· 参数管理:对系统动态配置常用参数。· 通知公告:系统通知公告信息发布维护。· 操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。· 登录日志:系统登录日志记录查询包含登录异常。· 在线用户:当前系统中活跃用户状态监控。· 定时任务:在线(添加、修改、删除)任务调度包含执行结果日志。· 代码生成:前后端代码的生成(java、html、xml、sql)支持CRUD下载 。· 系统接口:根据业务代码自动生成相关的api接口文档。· 服务监控:监视当前系统CPU、内存、磁盘、堆栈等相关信息。· 在线构建器:拖动表单元素生成相应的HTML代码。· 连接池监视:监视当期系统数据库连接池状态,可进行分析SQL找出系统性能瓶颈。项目介绍核心技术SpringBoot框架1、介绍Spring Boot是一款开箱即用框架,提供各种默认配置来简化项目配置。让我们的Spring应用变的更轻量化、更快的入门。 在主程序执行main函数就可以运行。你也可以打包你的应用为jar并通过使用java -jar来运行你的Web应用。它遵循约定优先于配置的原则, 使用SpringBoot只需很少的配置,大部分的时候直接使用默认的配置即可。可以与Spring Cloud的微服务无缝结合。Spring Boot2.0 环境要求必须是jdk8或以上版本,Tomcat8或以上版本2、优点· 使编码变得简单: 推荐使用注解。· 使配置变得简单: 自动配置、快速构建项目、快速集成新技术能力 没有冗余代码生成和XML配置的要求· 使部署变得简单: 内嵌Tomcat、Jetty、Undertow等web容器,无需以war包形式部署· 使监控变得简单: 自带项目监控Shiro安全控制1、介绍Apache Shiro是Java的一个安全框架。Shiro可以帮助我们完成:认证、授权、加密、会话管理、与Web集成、缓存等。其不仅可以用在 JavaSE环境,也可以用在 JavaEE 环境。2、优点· 易于理解的 Java Security API· 简单的身份认证,支持多种数据源· 对角色的简单的授权,支持细粒度的授权· 不跟任何的框架或者容器捆绑,可以独立运行3、特性Authentication身份认证/登录,验证用户是不是拥有相应的身份Authorization授权,即验证权限,验证某个已认证的用户是否拥有某个权限,即判断用户是否能做事情 SessionManagement会话管理,即用户登录后就是一次会话,在没有退出之前,它的所有信息都在会话中Cryptography加密,保护数据的安全性,如密码加密存储到数据库,而不是明文存储Caching缓存,比如用户登录后,其用户信息,拥有的角色/权限不必每次去查,提高效率ConcurrencyShiro支持多线程应用的并发验证,即如在一个线程中开启另一个线程,能把权限自动传播过去Testing提供测试支持RunAs允许一个用户假装为另一个用户(如果他们允许)的身份进行访问RememberMe记住我,这是非常常见的功能,即一次登录后,下次再来的话不用登录了4、架构Subject主体,代表了当前的“用户”,这个用户不一定是一个具体的人,与当前应用交互的任何东西都是Subject,如网络爬虫, 机器人等;即一个抽象概念;所有Subject都绑定到SercurityManager,与Subject的所有交互都会委托给SecurityManager;可以把Subject认为是一个门面;SecurityManager才是实际的执行者SecurityManage安全管理器;即所有与安全有关的操作都会与SecurityManager交互;且它管理着所有Subject; 可以看出它是Shiro的核心,它负责与后边介绍的其他组件进行交互Realm域,Shiro从Realm获取安全数据(如用户,角色,权限),就是说SecurityManager要验证用户身份, 那么它需要从Realm获取相应的用户进行比较以确定用户身份是否合法;也需要从Realm得到用户相应的角色/权限进行验证用户是否能进行操作;可以有1个或多个Realm,我们一般在应用中都需要实现自己的RealmSessionManager如果写过Servlet就应该知道Session的概念,Session需要有人去管理它的生命周期,这个组件就是SessionManagerSessionDAODAO大家都用过,数据库访问对象,用于会话的CRUD,比如我们想把Session保存到数据库,那么可以实现自己的SessionDAO,也可以写入缓存,以提高性能CacheManager缓存控制器,来管理如用户,角色,权限等的缓存的;因为这些数据基本上很少去改变,放到缓存中后可以提高访问的性能应用代码通过Subject来进行认证和授权,而Subject又委托给SecurityManager; 我们需要给Shrio的SecurityManager注入Realm,从而让SecurityManager能得到合法的用户及其权限进行判断,Shiro不提供维护用户/权限,而是通过Realm让开发人员自己注入。Shiro不会去维护用户,维护权限;这些需要自己去设计/提供;然后通过响应的接口注入给Shiro即可Thymeleaf模板1、介绍Thymeleaf是一个用于Web和独立Java环境的模板引擎,能够处理HTML、XML、JavaScript、CSS甚至纯文本。能轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。 与其它模板引擎(比如FreeMaker)相比,Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用(更加方便前后端分离,比如方便类似VUE前端设计页面),抛弃JSP吧。 Thymeleaf 3.0是一个完全彻底重构的模板引擎,极大的减少内存占用和提升性能和并发性,避免v2.1版因大量的输出标记的集合产生的资源占用。 Thymeleaf 3.0放弃了大多数面向DOM的处理机制,变成了一个基于事件的模板处理器,它通过处理模板标记或文本并立即生成其输出,甚至在新事件之前响应模板解析器/缓存事件。Thymeleaf是Spring Boot官方的推荐使用模板。2、优点· 国际化支持非常简单· 语法简单,功能强大。内置大量常用功能,使用非常方便· 可以很好的和Spring集成· 静态html嵌入标签属性,浏览器可以直接打开模板文件,便于前后端联调· Spring Boot 官方推荐,用户群广
一 Jeecms安装过程 将解压后得到的jeecms-3.0.2-final文件夹下的root文件夹更名为jeecms拷贝到tomcat 安装目录下的webapps 文件夹下(例如: D:\Tomcat 6.0\webapps\),启动tomcat,在地址栏中输入http://localhost:8080/jeecms, 您将看到第一步安装过程中的《用户许可协议》,勾选“我已经阅读并同意此 协议”,点击下一步, 接下来第二步安装过程中设置系统参数,系统会自动检测出一些配置项,请根据您的实际情 况填写,数据库密码不能为空。 点击提交后进入第三步进入最后的系统安装过程,安装过程可能需要十几秒的等待时间。安 装成功后将提示信息,请再重启Tomcat 完成安装。 Tomcat重启完毕之后,在浏览器的地址栏中输入http://localhost:8080/jeecms, 若系统正常显示默认的站点首页则表示JEECMS 已经顺利安装完成. 附: 系统管理后台登录:http://localhost:8080/jeecms/jeeadmin/jeecms/index.do 用户名:admin 密 码:password 图文安装步骤如下: 将解压后得到的ROOT文件夹拷贝到tomcat安装目录下的webapps文件夹下(例如:D:\Tomcat 6.0\webapps\),启动tomcat,在地址栏中输入http://localhost:8080,您将看到第一步安装过程中的《用户许可协议》,如图一所示,勾选“我已经阅读并同意此协议”,点击下一步, 图一:用户许可协议 接下来第二步安装过程中设置系统参数,系统会自动检测出一些配置项,请根据您的实际情况填写,如图二所示,数据库密码不能为空。 图二:系统参数设置 点击提交后进入第三步进入最后的系统安装过程,安装过程可能需要十几秒的等待时间。安装成功后将提示如图三所示的页面信息,请再重启Tomcat完成安装。 图三:系统安装完成 三、完成安装 Tomcat重启完毕之后,在浏览器的地址栏中输入http://localhost:8080,若系统正常显示默认的站点首页则表示JEECMS已经顺利安装完成.,如图四所示: 图四 站点首页 二 Jeecms项目导入myeclipse 1.在myeclipse中新建一个项目jeecms,将服务器中jeecms项目下web-inf文件夹下内容拷到新建项目中 解压缩jeecms-3.0.2-final-src,在src文件夹下会看到有三个压缩文件,如果只想进行普通的二次开发,可以只导入cms这个源码,删除jeecms-cms-identity-3.0.2-final.jar即可,如果想进行深入的二次开发,需要导入common和core源码,另导入common-lib下的jar包,删除jeecms-cms- identity-3.0.2-final.jar,jeecms-common-3.0.2-final.jar ,jeecms-core- identity-3.0.2-final.jar这三个jar包,切记:务必进行build path 3.修改jdbc链接,自己导入数据库。 4.把服务器下install\config下的web.xml复制出来覆盖掉新建项目WEB-INF下的web.xml 5.classes下有四个文件,手动烤到myeclipse项目src根目录下中 6.将服务器上jeecms项目删掉,发布新建的jeecms项目。 三 首页的加载过程 在浏览器中输入http://localhost:8080/jeecms,回车 首先进入配置文件web.xml, <context-param> <param-name>contextConfigLocation</param-name> <!----> <param-value> /WEB-INF/config/application-context.xml /WEB-INF/config/cache-context.xml /WEB-INF/config/captcha-context.xml /WEB-INF/config/jeecore-context.xml /WEB-INF/config/jeecms-context.xml </param-value> </context-param> 应用范围内的初始化参数 其中jeecms-context.xml是对标签的初始化 <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.shtml</welcome-file> <welcome-file>index.jhtml</welcome-file> </welcome-file-list> 通过以上标签找到应该加载哪一个页面 <servlet> <servlet-name>JeeCmsFront</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/config/jeecms-servlet-front.xml</param-value> </init-param> <load-on-startup>2</load-on-startup> </servlet> <servlet-mapping> <servlet-name>JeeCmsFront</servlet-name> <url-pattern>*.jhtml</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>JeeCmsFront</servlet-name> <url-pattern>*.jspx</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>JeeCmsFront</servlet-name> <url-pattern>*.jsp</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>JeeCmsFront</servlet-name> <url-pattern>*.htm</url-pattern> </servlet-mapping> 通过servlet配置,可以找到jeecms-servlet-front.xml,在此配置文件的最后有 <import resource="jeecms-servlet-front-action.xml"/>代码 找到jeecms-servlet-front-action.xml,在此配置文件中有 <bean id="dynamicAct" class="com.jeecms.cms.action.front.DynamicPageAct"/> 可以找到类DynamicPageAct,此类是首页模板。 在类DynamicPageAct中有 public static final String TPL_INDEX = "tpl.index"; 找到WEB-INF\languages\jeecms_front下messages_zh_CN.properties配置文件,可以找到对应的首页面 tpl.index=首页(工程中的首页.html文件) 四 标签的配置流程 以cms_content_list为例,首先,每一个标签的声明都是在jeecms-context.xml中进行的, <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd" default-lazy-init="true"> …… <bean id="cms_content_list" class="com.jeecms.cms.action.directive.ContentListDirective"/>(声明标签对应的类) <bean id="staticPageSvc" class="com.jeecms.cms.staticpage.StaticPageSvcImpl"> <property name="freeMarkerConfigurer"> <bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"> <property name="freemarkerVariables"> <map> …… <entry key="cms_content_list" value-ref="cms_content_list"/> …… </map> </property> <property name="templateLoaderPath" value=""/> …… </bean> </property> </bean> </beans> 此外,在配置文件jeecms-servlet-front.xml中,还有一段对标签的配置 <bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"> <property name="freemarkerVariables"> <map> …… <entry key="cms_content_list" value-ref="cms_content_list"/> …… </map> </property> …… </bean> </bean> 类ContentListDirective继承自AbstractContentDirective,最主要的是execute方法 public class ContentListDirective extends AbstractContentDirective { /** * 模板名称 */ public static final String TPL_NAME = "content_list"; /** * 输入参数,文章ID。允许多个文章ID,用","分开。排斥其他所有筛选参数。 */ public static final String PARAM_IDS = "ids"; @SuppressWarnings("unchecked") public void execute(Environment env, Map params, TemplateModel[] loopVars, TemplateDirectiveBody body) throws TemplateException, IOException { //获取站点 CmsSite site = FrontUtils.getSite(env); //获取内容列表,可以通过此处进行更改,获取自己数据库中的数据 List<Content> list = getList(params, env); Map<String, TemplateModel> paramWrap = new HashMap<String, TemplateModel>( params); //OUT_LIST值为tag_list,在类DirectiveUtils中声明,将内容列表放入其中 paramWrap.put(OUT_LIST, DEFAULT_WRAPPER.wrap(list)); //将params的值复制到variable中 Map<String, TemplateModel> origMap = DirectiveUtils .addParamsToVariable(env, paramWrap); //获取的是参数PARAM_TPL,是否调用模板以及调用的模板类型 InvokeType type = DirectiveUtils.getInvokeType(params); //获取传入参数,列表样式,根据不同的参数获取不同的样式列表 String listStyle = DirectiveUtils.getString(PARAM_STYLE_LIST, params); if (InvokeType.sysDefined == type) { if (StringUtils.isBlank(listStyle)) { throw new ParamsRequiredException(PARAM_STYLE_LIST); } //列表样式模板 env.include(TPL_STYLE_LIST + listStyle + TPL_SUFFIX, UTF8, true); } else if (InvokeType.userDefined == type) { if (StringUtils.isBlank(listStyle)) { throw new ParamsRequiredException(PARAM_STYLE_LIST); } //列表样式模板路径 WEB-INF\t\cms_sys_defined\style_list\style_2-1.html FrontUtils.includeTpl(TPL_STYLE_LIST, site, env); } else if (InvokeType.custom == type) { //这个模板就是自己声明的,即content_list.html,如果采用自定义模板的话,页面中可以只写上标签,并添加上标签内需要的几个参数,不需要写标签体的内容,会去自动调用模板中的标签体。 FrontUtils.includeTpl(TPL_NAME, site, params, env); } else if (InvokeType.body == type) { body.render(env.getOut()); } else { throw new RuntimeException("invoke type not handled: " + type); } //将variable中的params值移除 DirectiveUtils.removeParamsFromVariable(env, paramWrap, origMap); } @SuppressWarnings("unchecked") protected List<Content> getList(Map<String, TemplateModel> params, Environment env) throws TemplateException { Integer[] ids = DirectiveUtils.getIntArray(PARAM_IDS, params); if (ids != null) { //根据内容ID数组获取文章列表 return contentMng.getListByIdsForTag(ids, getOrderBy(params)); } else { return (List<Content>) super.getData(params, env); } } @Override protected boolean isPage() { return false; } } Content_list.html中的内容 [#list tag_list as a] <li><a href="${a.url}" target="_blank">${a.title}</a></li> [/#list] 就是简单的将tag_list中的内容,即“paramWrap.put(OUT_LIST, DEFAULT_WRAPPER.wrap(list));”中放入的数据遍历出来 style_2-1.html中的内容 主要是对图文列表或标题列表向上滚动的样式的,其中包含两个同样为样式的文件 style_2-1_core.html(图文列表或标题列表向上滚动)和style_1-1_core.html(图文列表或标题列表向上滚动),在此就不做赘述了。 Jeecms是基于Spring注解,在自定义标签时对于实体类和dao service等注意注解的问题。 五 自定义标签及使用自己创建的表的实现过程 下面是我自己定义的标签mycontent_list 首先,在数据库里创建了一个jc_mycontent的表,其中有id,title,content三个字段 其次,创建了一个实体类 public class MyContent { private static final long serialVersionUID = 1L; private Integer id; private String title; private String content; public MyContent () { super(); } ……get set方法 } 接下来是配置hibernate中jc_mycontent表的配置文件 <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"> <hibernate-mapping package="com.jeecms.cms.entity.main"> <class name="MyContent" table="jc_mycontent"> <meta attribute="sync-DAO">false</meta> <cache usage="read-write"/> <id name="id" type="java.lang.Integer" column="id"><generator class="identity"/></id> <property name="title" column="title" type="java.lang.String" not-null="true" /> <property name="content" column="content" type="java.lang.String" not-null="true" /> </class> </hibernate-mapping> 与数据库交互的持久层接口 public interface MyContentDao { public List<MyContent> getList(); } 持久层实现类 @Repository//持久层 public class MyContentDaoImpl extends HibernateBaseDao<MyContent, Integer> implements MyContentDao { @SuppressWarnings("unchecked") public List<MyContent> getList(){ return find(byNothing()); } private Finder byNothing(){ Finder f = Finder.create(); f.append("from MyContent");//可以在此处添加查询条件或者添加各种方法进行动态查询 f.setCacheable(true); return f; } @Override protected Class<MyContent> getEntityClass() { return MyContent.class; } } 业务层接口 public interface MyContentMng { public List<MyContent> getList(); } 业务层实现类 @Service//业务层 @Transactional public class MyContentMngImpl implements MyContentMng { @Transactional(readOnly = true)//配置事务为只读 public List<MyContent> getList(){ return myContentDao.getList(); } private MyContentDao myContentDao; @Autowired//自动绑定 public void setMyContentDao(MyContentDao myContentDao) { this.myContentDao = myContentDao; } private List<ContentListener> listenerList; @Autowired public void setListenerList(List<ContentListener> listenerList) { this.listenerList = listenerList; } } 标签类的抽象类,最主要的就是getData这个方法,以及绑定业务层,其中可以添加多种查询方法。可参考类AbstractContentDirective public abstract class AbstractMyContentDirective implements TemplateDirectiveModel { protected Object getData(Map<String, TemplateModel> params, Environment env) throws TemplateException { return myContentMng.getList(); } @Autowired protected MyContentMng myContentMng; } 自定义标签中最重要的类继承上边的抽象类 public class MyContentListDirective extends AbstractMyContentDirective { /** * 模板名称 */ public static final String TPL_NAME = "mycontent_list"; @SuppressWarnings("unchecked") public void execute(Environment env, Map params, TemplateModel[] loopVars, TemplateDirectiveBody body) throws TemplateException, IOException { //获取站点 CmsSite site = FrontUtils.getSite(env); //获取内容列表 List<MyContent> list = getList(params, env); Map<String, TemplateModel> paramWrap = new HashMap<String, TemplateModel>(params); //OUT_LIST值为tag_list,将内容列表放入其中 paramWrap.put(MYOUT_LIST, DEFAULT_WRAPPER.wrap(list)); //将params的值复制到variable中 Map<String, TemplateModel> origMap = DirectiveUtils.addParamsToVariable(env, paramWrap); //没有采用默认的模板,直接采用自己写的简单的模板(mycontent_list.html) FrontUtils.includeTpl(TPL_NAME, site, params, env); //将variable中的params值移除 DirectiveUtils.removeParamsFromVariable(env, paramWrap, origMap); } protected List<MyContent> getList(Map<String, TemplateModel> params, Environment env) throws TemplateException { return myContentMng.getList(); } } 样式模板mycontent_list.html内容,里边可以自己添加一些样式,可参考\t\cms_sys_defined\style_list下样式文件 [#list mytag_list as a] <li><a href="${a.title}"><font color='blue'>"${a.content}"</font></a></li> [/#list] 首页里加入如下代码 [@cms_mycontent_list] <ul class="topnews"> </ul> [/@cms_mycontent_list] 通过以上这些代码,可以实现将自己的表jc_mycontent中的数据查询并显示在页面上 六 标签使用和模板的制作 1模板规划 1.1资源文件 资源文件就是网页中用到的图片、CSS、JS等元素,在CMS系统中所有的资源文件在网站的根目录中的 /res_base/所属网站定义资源目录/TEMPLEATE/WEB /res_base/所属网站定义资源目录/TEMPLEATE/WAP 解释:网站定义资源 在CMS系统中可以同时管理多个网站,也就是多个网站可以同时使用一套CMS系统,但是每一个网站都已属于自己独立的资源文件及模板文件目录。 1.2模板文件 定义了页面显示的主体框架,它的位置位于网站根目录下的/WEB_INF/user_base/所属网站模板目录; 模板规则: 1、以index前缀命名的为首页模板 2、以channel前缀命名的为栏目模板 3、以content前缀命名的为内容模板 4、以alone前缀命名的为栏目单页模板 1.3使用方式 1、使用dw建立站点 2、将网页中用到的资源文件分类分别放置到网站相关资源目录中 3、将模板文件放置按照命名规则分别放置到网站相关模板目录中。 4、将头部、底部等等具有通用元素的模板文件放置到模板目录中的include目录中 5、将模板文件中所有资源引用改为绝对路径链接至资源目录中 6、在栏目管理中将模板文件与栏目进行关联设置 7、在模板文件中需要提取数据的位置放置相应的标签 1.4标签调用样式 调用"JEECMS标签"的三种代码样式如下:   A、${标签名称}   B、[@cms.标签名称 属性='值'/]   C、[@cms.标签名称 属性='值'; 标签别名] 自定义样式模板 [/@cms.标签名称]   例如: a、${web.name}标签用于调用网站名称 b、[@cms.ArtiList chnlId='' count='10' sysContent='1-1' /]标签用于调用 10篇文章的列表 C、[@cms.ChnlList id='' inner='1';c]|<a >>${c.name}</a> [/@cms.ChnlList]标签用于调用栏目列表,可用于网站导航条。   注意:abc实例是与上面ABC三种形式相对应的。大家可以逐个测试,举一反三 2 Include标签 2.1功能简介 做过网站设计经验的朋友可能都知道,我们可以将页面中经常要引用的公共部分(比如页头和页脚)独立开来,单独存放在一个页面中。这样做的好处就是可以在各个需要用到该部分的页面中用一个简单的包含语句就能把它引入进来,大大简化了工作量。 2.2标记说明 【标签名】:[@cms.Include 属性='值' /] 【作 用】:包含公用页面(如页头,页脚) 【参 数】: name:包含模板的文件名 solution:模板方案名 【示 例】: 包含页头:[@cms.Include name='head.html' solution='default'/] 【备 注】:调用此标签前必须先建立相应的包含模板 2.3 明确标签的使用范围   我们在使用任何标签的之前,都必须明确其使用的范围,否则可能无法正常使用该标签。   【Include 标签】的使用范围是:首页模板,栏目页模板,内容页模板,即对应\WEB-INF\user_base\jeecms_com_www\template\article\default\文件夹下的index_××.html模板、channel_××.html模板、content_××.html模板 2.4调试标签了解其使用方法   在使用【Include 标签】之前我们必须保证有可供此标签调用的包含模板,本实例只是起演示作用,为方便起见,这里就不再另外创建被包含的模板了,标签调用的是系统默认模板方案中的的head.html模板。 登录JEECMS后台,进入“模板管理->template->article->default”,点击修改开始时建立的index_demo.html模板(如果没有此模板则按照本文开头的说明创建),进入模板代码模式,填写如下标签代码(为了演示效果美观,本处代码中加入了css,可去除): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Include标签测试</title> <link href="${sysResRoot}/front.css" type="text/css" rel="stylesheet" /> <link href="${root}/default/article/css/whole.css" type="text/css" rel="stylesheet" /> <link href="${root}/default/article/css/layout.css" type="text/css" rel="stylesheet" /> </head> <body> [@cms.Include name='head.html' solution='default'/] </body> </html>   点保存按钮,然后返回前台站点首页刷新,得到如下效果: 3 ArtiList标签 3.1功能简介 【ArtiList 标签】在CMS中使用的频率可以说是最高的,通过这个标签,你不仅可以得到一个文章列表,而且可以通过不同的参数组合得到不同的显示效果。比如文章图文列表、文字或图片跑马灯、文字或图片上下循环滚动等等。 使用方式: [@cms.ArtiList chnlId='' count='5' sysContent='1-1' titLen='25' lineHeight='1' dateFormat='4' datePosition='2' headMark='2' target='1'/] 3.2标记说明 【标签名】:[@cms. ArtiList 属性='值' /] 【作 用】:获取文章列表数据 【参 数】: 属性名称 属性说明 默认值 可选值 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.3 明确标签使用范围   我们在使用任何标签的之前,都必须明确其使用的范围,否则可能无法正常使用该标签。 【ArtiList 标签】的使用范围是:首页模板,栏目页模板,内容页模板, 即对应\WEB-INF\user_base\jeecms_com_www\template\article\default\文件夹下的index_××.html模板、channel_××.html模板、content_××.html模板 3.4 调试标签了解其使用方法   登录JEECMS后台,进入“模板管理->template->article->default”,点击修改开始时建立的index_demo.html模板(如果没有此模板则按照本文开头的说明创建),在模板内容处填写如下标签代码(为了演示效果美观,本处代码中引入了系统默认css,可去除):(1).文章列表 <link href="${sysResRoot}/front.css" type="text/css" rel="stylesheet" /> [@cms.ArtiList chnlId='' count='5' sysContent='1-1' titLen='25' lineHeight='1' dateFormat='4' datePosition='2' headMark='2 target='1'/]  点保存按钮,然后返回前台站点首页刷新,得到如下效果: (2).图文列表 <link href="${sysResRoot}/front.css" type="text/css" rel="stylesheet/> [@cms.ArtiList chnlId='' attr='2' count='5' sysContent='1-2' titLen='25' target='1' picWidth='25' picHeight='110'/]   点保存按钮,然后返回前台站点首页刷新,得到如下效果: 4 Position标签 4.1功能简介 在网站页面中我们经常要显示当前页面的位置,例如:当前位置:首页 > 无线城市> 城市要闻 > 正文。在CMS标签中提供了一个显示页面的当前位置调用标签,只需将该标签放到页面的相应地方,设置好调用参数即可,简单方便。 4.2标记说明 【标签名】:[@cms.Position 属性='值' /] 【作 用】:显示页面的当前位置  【参 数】:   homepage —-首页显示方式。【1:站点简称;自定义】(默认:首页)   title ---内容页显示方式。【0:不显示;1:显示内容标题;自定义】(默认:正文)   split ---分割符号。(默认:“>”)   target ---是否原窗口打开。【0:原窗口打开;1:新窗口打开】(默认:原窗口打开)   class ---链接外部样式,等同于html中的class属性   style ---自定义标签样式,等同于html中的style属性  【示 例】:   [@cms.Position homepage='1' split='|' target='1' /] 【作 用】:显示各栏目列表 【参 数】: 属性名称 属性说明 默认值 可选值 id 父栏目ID 默认为空:自动获取当前栏目ID 空:当前栏目ID; 栏目ID:指定父栏目id orderBy 排序方式 0 0:优先级升序; 1:优先级降序; 2:点击次数升序;3:点击次数降序 isDisplay 是否只获取显示的栏目 1 0:获取所有; 1:只获取显示的栏目 hasContent 是否只获取可以有内容的栏目 0 0:获取所有; 1:只获取可以有内容的栏目 linkClass 链接class样式 空 linkTarget 链接打开方式 0 0:当前窗口; 1:新窗口 sysPage 系统分页样式 0 0:不分页; 1:样式一; 2:样式二 userPage 自定义分页样式。如果指定了系统分页样式,则该项无效 0 0:不分页; 1:样式一; 2:样式二 5.3明确标签的使用范围   我们在使用任何标签的之前,都必须明确其使用的范围,否则可能无法正常使用该标签。 [@cms.ChnlList /]标签的使用范围是:首页模板,栏目页模板,即对应\\WEB-INF\\user_base\\jeecms_com_www\\template\\article\\default\\文件夹下的index_××.html模板、channel_××.html模板 5.4调试标签了解其使用方法 1、单独标签调用示例: [@cms.ChnlList/] 2、自定义标签调用示例:    [@cms.ChnlList id='' inner='1';c,i]     <a href="${c.url}">${c.name}</a>[#if (i+1)%2==0]<br/>[/#if]    [/@cms.ChnlList] 3、配合其它标签嵌套调用示例: [@cms.ChnlList id='' sysType='article' hasContent='1' inner='1';c] <table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#eee"> <tr> <td height="30" bgcolor="#EEEEEE"><a target="_blank" href="${c.url}">${c.name}</a></td> </tr> <tr> <td bgcolor="#FFFFFF">[@cms.ArtiList chnlId=c.id sysContent='1-1' titLen='20' count='6' /]</td> </tr> </table> [/@cms.ChnlList] 6内容页常用标签 6.1标记说明 【文章导航】:[@cms.Position /] 【文章标题】:${arti.title} 【简短标题】:${arti.shortTitle} 【文章作者】:${arti.author} 【发布日期】:${arti.releaseDate} 【查看次数】:${arti.visitTotal} 【文章来源】:${arti.origin} 【文章摘要】:${arti.description} 【文章内容】:${arti.content}

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值