文档章节

JeeSite 4.0 替换默认视图风格,自定义主题

ThinkGem
 ThinkGem
发布于 02/28 20:59
字数 806
阅读 3382
收藏 1
点赞 5
评论 3

替换默认视图风格

每个项目的需求都不同,风格要求也不同,例如我想修改下登录页、框架页面、错误页面等待,那在JeeSite4.0中如何覆盖默认视图视图呢?

1、先看下SpringMVC的视图配置:

// Beetl主题视图解析器(order越小优先级越高)
BeetlViewResolver beetlThemes = new BeetlViewResolver();
beetlThemes.setPrefix("/themes/" + Global.getProperty("web.view.themeName") + "/");
beetlThemes.setSuffix(".html");
beetlThemes.setOrder(10000);
registry.viewResolver(beetlThemes);
// Beetl默认视图解析器(order越小优先级越高)
BeetlViewResolver beetlDefault = new BeetlViewResolver();
beetlDefault.setPrefix("/");
beetlDefault.setSuffix(".html");
beetlDefault.setOrder(20000);
registry.viewResolver(beetlDefault);
// 默认视图定义,根据后缀渲染(.json、.xml)
JsonView jsonView = new JsonView();
jsonView.setPrettyPrint(false);
XmlView xmlView = new XmlView();
xmlView.setPrettyPrint(false);
registry.enableContentNegotiation(jsonView, xmlView);

2、我们在看下jeesite.yml里视图相关配置themeName默认为default

# Web 相关
web:
  
  # MVC 视图相关
  view:
    
    # 系统主题名称,主题视图优先级最高,如果主题下无这个视图文件则访问默认视图
    # 引入页面头部:'/themes/'+themeName+'/include/header.html'
    # 引入页面尾部:'/themes/'+themeName+'/include/footer.html'
    themeName: default

3、有经验的小伙伴也许一看就明白,原来是依照谁先加载谁受用原则进行的,也就是说优先级越高的视图被找到就用谁,后面的视图将会被忽略。顺序如下:*/src/main/resources/views/themes/default/**/*.html --> */src/main/resources/views/**/*.html --> JSON/XML,先去找主题目录下的视图文件,找不到使用JeeSite默认,如果还找不到,则返回JSON或XML数据。

4、下面我们来举个例子(修改登录页)

  • 复制 /jeesite-module-core/src/main/resources/views/modules/sys/sysLogin.html 文件到 /web/src/main/resources/views/themes/default/modules/sys/sysLogin.html目录下。

  • 然后修改,刚刚复制的sysLogin.html视图文件内容,改成你满意的样式,这样就大功告成啦。

5、如果你想在公共的地方加载自己的css或js,JeeSite为你提供了两个公共文件,/src/main/webapp/static/common/common.css/src/main/webapp/static/common/common.js文件,你可以修改它。

自定义主题,快速切换视图

1、JeeSite 4.0 版本已提供快速换肤功能,这里的换肤不是单单的换掉css改变下配色,而是,把系统中的所有的视图,包括登录页、框架页、列表页、内容页,甚至换掉grid组件。

2、上一章中说到了jeesite.yml里视图相关配置themeName,其实上一章节的思路是让你修改和完善default这个主题,如果你想大范围的修改完全不同的UI,建议你再起一个名字。我们可以吧这个改为你想起的视图名字,如:good,这样你的所有视图文件,资源文件将都在这个目录下:/src/main/resources/views/themes/good//src/main/resources/static/themes/good/。另外还有两个目录,公共include的头部和尾部:/themes/good/include/header.html/themes/good/include/footer.html

3、下面如何操作就不用就不赘述了,和上一章节例子相同。

前后分离

如果你想只用JeeSite作为服务端,仅提供接口,提供客户端调用。后面我会着重一篇文章介绍前后分离的应用,如何让JeeSite成为服务端API,提供移动端或PC端(Vue或Angular)调用。

© 著作权归作者所有

共有 人打赏支持
ThinkGem

ThinkGem

粉丝 883
博文 136
码字总数 21994
作品 1
济南
架构师
加载中

评论(3)

k
kellysupeng
4.0终于发布了
zkool
zkool
赞:cow:
shawumu
shawumu
赞��
jeesite 快速开发平台 初体验

http://www.jeesite.com/ GitHub:https://github.com/thinkgem/jeesite 开源中国:http://git.oschina.net/thinkgem/jeesite 更多文档 https://github.com/thinkgem/jeesite/tree/master/do......

晨猫
05/21
0
0
JeeSite环境搭建及运行和打包(master20161117)

涉及的软件: 1、phpStudy(主要用MySql) 2、maven3(用于依赖包,下面我将上传已经下载好所有依赖包的版本,保证运行正常) 具体操作: 0、前言 由于GitHub上的Release版本没有及时更新,所...

easonjim
2016/11/18
0
0
JeeSite4.0,一直报这个问题,求解释

DEBUG [com.jeesite.common.io.PropertiesUtils] - Loading jeesite config: [classpath:/config/jeesite-core.yml, classpath:config/jeesite.yml, classpath:config/application.yml, clas......

陈豫
05/08
0
0
JeeSite 4.0.3 发布,企业级快速开发平台

新增 新增:core项目增加单元测试支持类 ApplicationTest.java 新增:代码生成config.xml支持自定义,放同目录下config-custom.xml文件即可覆盖 新增:shiro.allowRequestMethods 参数,可指...

ThinkGem
05/30
0
0
[急]缓存报错,内测也溢出问题

使用jeesite开发的,然后报出内存溢出还有这个缓存 ,看不太懂了 求大佬指教一下

微晨灬晨
06/28
0
0
jeesite shiro+redis实现cache和session共享

jeesite这个开源框架本身集成的有shiro+redis来实现cache和session共享,但是需要修改一下文件配置即可 首先找到spring-context-shiro.xml文件 找到bean id为sessionDAO,将其修改为如下 <!...

wangxujun59
06/21
0
0
jeesite部署时,竟然浪费了1个小时!

在家里部署jeesite,跑起来以后打开浏览器去访问可是怎么都访问不了。工程也没报错。各种尝试之后发现在家将TOMCAT 的端口改成80了 ,一直访问的是8080 所以才访问不了的。之前也想过可能是t...

无敌小学僧
2017/10/29
0
0
JeeSite 4.0 说说前端的那些事

引言 一个不得不说的话题,经过近几年的发展,Web前端开发已经不是一个新有的岗位了,前端技术发展非常迅速,技术更新换代也很快,对于前端工程师来说是一个很大的挑战“挣扎期”。 从统计来...

ThinkGem
2017/11/05
0
41
整理出一些使用比较广或者个人觉得比较好的java开源项目和资料供参考

1.整理出一些使用比较广或者个人觉得比较好的java开源项目和资料供参考。 2. 如果你觉得好但是我没有列出的开源项目请告诉我,方便我添加到列表里。 3. 如果你发现信息描述有误请联系我,我会及...

写代码的奥特曼
2017/10/23
0
0
【OSChina-MoPaaS应用开发大赛】JeeSite(JES)

应用的名称:JES 应用URL地址:http://jeesite.sturgeon.mopaas.com/index.html 应用说明及使用场景: 基于JavaEE的CMS系统,可根据企业或个人需要,在不改变服务端的前提下,搭建个性化的C...

徐林
2014/01/07
0
19

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring基础

Spring是什么? Spring是一个开源框架,最早由Rod Johnson创建,它解决的是业务逻辑层和其他各层的松耦合问题。 经过十几年的发展,Spring正在扩展其他的领域,如:移动开发、社交API集成、N...

这很耳东先生
3分钟前
0
0
面试系列-40个Java多线程问题总结

前言 这篇文章主要是对多线程的问题进行总结的,因此罗列了40个多线程的问题。 这些多线程的问题,有些来源于各大网站、有些来源于自己的思考。可能有些问题网上有、可能有些问题对应的答案也...

Ryan-瑞恩
17分钟前
0
0
微信分享的细节

分享的缩略图要求: 一、图片大小小于32k 二、图片的尺寸为 宽度 :128px 高度:128px 分享title 和 description 出现金额等 以上情况存在会导致触发分享按钮 但是页面没有反应...

Js_Mei
22分钟前
0
0
【2018.07.23学习笔记】【linux高级知识 Shell脚本编程练习】

1、编写shell脚本,计算1-100的和; #!/bin/bashsum=0for i in `seq 1 100`do sum=$[$sum+$i]doneecho $sum 2、编写shell脚本,要求输入一个数字,然后计算出从1到输入数字的和,要求...

lgsxp
25分钟前
0
0
xss攻防浅谈

导读 XSS (Cross-Site Script) 攻击又叫跨站脚本攻击, 本质是一种注入攻击. 其原理, 简单的说就是利用各种手段把恶意代码添加到网页中, 并让受害者执行这段脚本. XSS能做用户使用浏览器能做的...

吴伟祥
25分钟前
0
0
js回调的一次应用

function hideBtn(option) { if (option == 1) { $("#addBtn").hide(); $("#addSonBtn").hide(); }}$("body").on("click", "#selectBtn", function () {......

晨猫
31分钟前
0
0
C++_读写ini配置文件

1.WritePrivateProfileString:

一个小妞
32分钟前
0
0
通往阿里,BAT的50+经典Java面试题及答案解析(上)

Java是一个支持并发、基于类和面向对象的计算机编程语言。下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改。 代码复用。 增强代码的可靠性和灵活性。 增加代码的可理解性...

Java大蜗牛
32分钟前
1
0
数据库两大神器【索引和锁】

前言 只有光头才能变强 索引和锁在数据库中可以说是非常重要的知识点了,在面试中也会经常会被问到的。 本文力求简单讲清每个知识点,希望大家看完能有所收获 声明:如果没有说明具体的数据库...

Java3y
35分钟前
0
0
Application Express安装

Application Express安装文档 数据库选择和安装 数据库选择 Oracle建议直接12.2.0.1.0及以上的版本,12.1存在20618595bug(具体可参见官方文档) Oracle 12c 中安装oracle application expr...

youfen
48分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部