JeeSite 4.x

Spring Boot 最好的快速开发平台

修改内置页面、新增自定义主题、修改登录页面

每个项目的需求都不同,风格要求也不同,例如我想修改下登录页面或主框架页面等,那在 JeeSite 4.x 中如何覆盖默认视图视图呢?

修改内置页面

默认的情况下 JeeSite 平台,会有一个 default 默认主题,若想对默认主题进行修改,可简单的根据主题目录规则重写视图页面。 下面用 “修改登录页面” 为例,步骤如下:

v4.2.2 版本:

  • 找到需要修改的视图,拷贝到 任何模块 项目,视图对应目录下修改即可,如:
  • 复制 /jeesite-module-core/src/main/resources/views/modules/sys/sysLogin.html 文件到
  • 到任意模块项目的 /src/main/resources/views/themes/default/modules/sys/sysLogin.html 路径
  • 然后修改,该视图文件内容即可。

v4.2.1 及之前版本:

  • 找到需要修改的视图,拷贝到 web 项目,相同目录下修改即可,如:
  • 复制 /jeesite-module-core/src/main/resources/views/themes/default/modules/sys/sysLogin.html 文件到
  • /jeesite-web/src/main/resources/views/themes/default/modules/sys/sysLogin.html 路径
  • 然后修改,该视图文件内容即可。

v4.2.1 之前版本的方法,适应于单体项目,解压 war 运行 或者 部署到 tomcat 的,不适用于通过 java -jar 方式运行的项目。 更多方法请看下一节。

自定义主题、覆写视图文件

这里的换肤不是单单的换掉 css 改变下配色,而是,把系统中的所有的视图,包括登录页、框架页、列表页、内容页,甚至可以换掉 dataGrid 组件。

1、主题名称配置找到 application.yml(v4.0.x:jeesite.yml)里的 themeName 配置,默认为 default

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

2、MVC的视图加载机制,是依照谁先加载谁受用原则进行的,后面的视图将会被忽略。优先顺序如下:

  • */src/main/resources/views/themes/{web.view.themeName}/**/*.html   –>
  • */src/main/resources/views/**/*.html   –>
  • JSON/XML

视图先去找主题目录下的视图文件,如果找不到,则使用 JeeSite 功能默认视图文件,
如果还找不到,则返回 JSON/XML 数据。

3、举个例子(修改登录页面

  • 修改 yml 主题名称 web.view.themeNamecustom (custom 根据常见你可随意命名)
  • 复制 /jeesite-module-core/src/main/resources/views/themes/default 文件夹里的所有文件
  • 到任意模块项目的 /src/main/resources/views/themes/custom 文件夹下。
  • 复制 /jeesite-module-core/src/main/resources/views/modules/sys/sysLogin.html 文件到
  • 到任意模块项目的 /src/main/resources/views/themes/custom/modules/sys/sysLogin.html 路径
  • 然后修改,刚刚复制的 sysLogin.html 视图文件内容即可。

4、若还想修改其它内置功能,下面依照用户管理列表页面举例:

  • 复制 /jeesite-module-core/src/main/resources/views/modules/sys/user/empUserList.html 文件到
  • 到任意模块项目的 /src/main/resources/views/themes/custom/modules/sys/user/empUserList.html 路径。
  • 然后修改,该视图文件内容即可。

5、如果你想在公共的地方加载自己的 css 或 js,JeeSite 为你提供了两个公共文件,如下:

  • /src/main/webapp/static/common/common.css/src/main/webapp/static/common/common.js 文件
  • 你可以修改它,这 2 文件分别在 header.htmlfooter.html 里引用,你也可以添加新的样式文件。

再一种替换登录和主框架页方法

利用用户类型的配置,可以自定义对应用户类型的 登录页 和 主框架页。

默认的用户管理用户类型为 Employee 即员工,你可以找到配置如下:

user:
  # 用户类型配置信息(employee员工,member会员,btype往来单位,persion个人,expert专家,...),JSON 格式如下:
  # {"用户类型":{"beanName":"Service或Dao的Bean名称",
  #              "loginView":"登录页面视图",
  #              "indexView":"主框架页面视图,支持 redirect: 前缀"}}
  userTypeMap: >
    {
      "employee":{"beanName":"employeeService","loginView":"","indexView":"modules/sys/sysIndex"},
      "member":{"beanName":"memberService","loginView":"","indexView":"modules/sys/sysIndexMember"},
      "btype":{"beanName":"btypeInfoService","loginView":"","indexView":"modules/sys/sysIndexBtype"},
      "expert":{"beanName":"expertService","loginView":"","indexView":"modules/sys/sysIndexExpert"}
    }

如果 loginView 或 indexView 未设置,则使用默认的登录页和主框架页视图。

如果你指定了其它视图路径,则使用该视图。

关注 JeeSite 公众号,了解最新动态