文档章节

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

ThinkGem
 ThinkGem
发布于 02/28 20:59
字数 806
阅读 4339
收藏 1

替换默认视图风格

每个项目的需求都不同,风格要求也不同,例如我想修改下登录页、框架页面、错误页面等待,那在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

粉丝 1013
博文 137
码字总数 22174
作品 1
济南
架构师
私信 提问
加载中

评论(3)

k
kellysupeng
4.0终于发布了
zkool
zkool
赞:cow:
shawumu
shawumu
赞��
ThinkGem/JeeSite 4.0

引言 JeeSite 是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Spring MVC、Apache Shiro、MyBatis、Beetl、Bootstrap、AdminLTE),在线代码生成功能,包括核心模块如:...

ThinkGem
02/25
0
0
jeesite配置指南(官方文档有坑,我把坑填了!)

版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/72871340 昨天,远在苏州的朋友找我一起做个私活,主要用到jeesite。 说实话,开发了这么多年的...

qing_gee
2017/06/05
0
0
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
ThinkGem/JeeSite 4.0 JFlow工作流引擎-表单引擎

项目介绍 jeesite4-jflow jeesite4-JFlow 是jeesite集成JFlow的版本. 您即可以使用jeesite的敏捷性开发,也可以使用JFlow的流程引擎,表单引擎的功能. 我们已经把jeesite与jflow的组织结构集...

ThinkGem
08/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Gradle 提速:每天为你省下一杯喝咖啡的时间

摘要: ### 前言 作为一名 Android 开发同学,当你的工程和代码达到一定规模的时候,相信你一定遇到过编译速度过慢的问题。比如: ![](https://user-gold-cdn.xitu.io/2018/11/6/166e7021c0...

阿里云官方博客
22分钟前
1
0
在 PHPStorm 中如何对远程服务使用 xdebug 进行断点调试

1. 安装 xdebug 1.1. 下载、安装 ➜ ~ wget https://xdebug.org/files/xdebug-2.4.1.tgz➜ ~ tar zxf xdebug-2.4.1.tgz➜ ~ cd xdebug-2.4.1➜ ~ phpize➜ ~ ./configure --with-ph......

whoru
24分钟前
2
0
看完这篇文章还不懂Python装饰器?

1、必备 2.需求来了 初创公司有N个业务部门,1个基础平台部门,基础平台负责提供底层的功能,如:数据库操作、redis调用、监控API等功能。业务部门使用基础功能时,只需调用基础平台提供的功...

糖宝lsh
29分钟前
4
0
Bytom合约预编译

比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 在开发合约的过程中你们有没有遇到一些问题呢?比如编译合约的过程中不能...

比原链Bytom
31分钟前
3
0
supervisor安装配置

supervisor安装配置 安装 wget -c https://files.pythonhosted.org/packages/44/60/698e54b4a4a9b956b2d709b4b7b676119c833d811d53ee2500f1b5e96dc3/supervisor-3.3.4.tar.gztar -zxvf su......

jackmanwu
56分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部