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

以你之姓@ 2021-09-20 03:00 155阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

# 替换默认视图风格 #

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

转载于:https://my.oschina.net/thinkgem/blog/1626539

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20210726/a32c90e9302d4d5e9ee7c5d1d5531b5b.png