JeeSite 4.x

Spring Boot 最好的快速开发平台

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

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

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

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

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 文件夹里的所有文件
  • /jeesite-web/src/main/resources/views/themes/custom 文件夹下。
  • 然后修改,刚刚复制的 sysLogin.htmlsysIndex.html 视图文件内容。
  • 这样就大功告成啦。

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

  • 复制 /jeesite-module-core/src/main/resources/views/modules/sys/user/empUserList.html 文件到
  • /jeesite-web/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 里引用,你也可以添加新的样式文件。

另一种方法替换默认视图

上一篇让你新建一个主题可能你会觉着打动干戈了,修改登录视图,不需要新建一个主题。

这种方法适应于单体项目,解压 war 运行 或者 部署到 tomcat 的,不适用于通过 java -jar 方式运行的项目。

找到需要修改的视图,拷贝到 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 路径
  • 然后修改,该视图文件内容即可。

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

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

默认的用户管理用户类型为 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 未设置,则使用默认的登录页和主框架页视图。

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


阿里云【爆款特惠】精选爆款产品低至0.95折

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