修改内置视图、修改登录页、新增自定义主题风格

每个项目的需求都不同，风格要求也不同，例如我想修改下登录页面或主框架页面等，那在 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.themeName 为 custom （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.html 和 footer.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 未设置，则使用默认的登录页和主框架页视图。

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