Jeesite 4.0 replaces the default view style and customizes the theme

Replace the default view style

The needs of each project are different , The style requirements are also different , For example, I would like to modify the next landing page 、 Frame page 、 Error page waiting , That's in JeeSite4.0 How to override the default view in ？

1、 Let's take a look at SpringMVC View configuration ：

Log in and copy

       

        // Beetl Topic view parser （order The smaller, the higher the priority ）
        
BeetlViewResolver beetlThemes = new BeetlViewResolver();
        
beetlThemes.setPrefix("/themes/" + Global.getProperty("web.view.themeName") + "/");
        
beetlThemes.setSuffix(".html");
        
beetlThemes.setOrder(10000);
        
registry.viewResolver(beetlThemes);
        
// Beetl The default view parser （order The smaller, the higher the priority ）
        
BeetlViewResolver beetlDefault = new BeetlViewResolver();
        
beetlDefault.setPrefix("/");
        
beetlDefault.setSuffix(".html");
        
beetlDefault.setOrder(20000);
        
registry.viewResolver(beetlDefault);
        
//  Default view definition , Render according to suffix （.json、.xml）
        
JsonView jsonView = new JsonView();
        
jsonView.setPrettyPrint(false);
        
XmlView xmlView = new XmlView();
        
xmlView.setPrettyPrint(false);
        
registry.enableContentNegotiation(jsonView, xmlView);
       
       

        
1.
        
2.
        
3.
        
4.
        
5.
        
6.
        
7.
        
8.
        
9.
        
10.
        
11.
        
12.
        
13.
        
14.
        
15.
        
16.
        
17.
        
18.
       

2、 We are looking at ​​jeesite.yml​​​ Related configurations of the interior view ​​themeName​​​ The default is ​​default​​.

Log in and copy

       

        # Web  relevant 
        
web:
        

        
  # MVC  View related 
        
  view:
        

        
    #  System topic name , Topic views have the highest priority , If there is no view file under the theme, access the default view 
        
    #  Introduce page header ：'/themes/'+themeName+'/include/header.html'
        
    #  Introduce the end of the page ：'/themes/'+themeName+'/include/footer.html'
        
    themeName: default
       
       

        
1.
        
2.
        
3.
        
4.
        
5.
        
6.
        
7.
        
8.
        
9.
        
10.
       

3、 Experienced friends may understand at a glance , It was originally carried out according to the principle of "who loads first, who uses..." , That is to say, the higher the priority of the view is found, the higher the priority of the view will be used , Later views will be ignored . Order as follows ：​​*/src/main/resources/views/themes/default/**/*.html​​​ --> ​​*/src/main/resources/views/**/*.html​​​ --> ​​JSON/XML​​, First go to the view file under the theme directory , Use... Not found JeeSite Default , If you can't find , Then return to JSON or XML data .

4、 Let's take an example （ Modify landing page ）

• • 
    
• Copy ​​/jeesite-module-core/src/main/resources/views/modules/sys/sysLogin.html​​ File to ​​/web/src/main/resources/views/themes/default/modules/sys/sysLogin.html​​ Under the table of contents .
  
• And then modify , Just copied ​​sysLogin.html​​ View file contents , Change to a style you like , So it's done .
  
  • 
    

5、 If you want to load your own... In a public place css or js,JeeSite Two public documents are provided for you ,​​/src/main/webapp/static/common/common.css​​​ and ​​/src/main/webapp/static/common/common.js​​ file , You can modify it .

Custom theme , Quickly switch views

1、JeeSite 4.0 Version has provided a quick skin change function , The skin change here is not just a change css Change the color , It is , Put all the views in the system , Include landing page 、 Frame page 、 List of pp. 、 Content page , Even replace it grid Components .

2、 In the last chapter, we talked about ​​jeesite.yml​​​ Related configurations of the interior view ​​themeName​​​, In fact, the idea of the last chapter is to let you modify and improve ​​default​​​ This theme , If you want to modify a wide range of completely different UI, I suggest you choose another name . We can change this to the name of the view you remember , Such as ：​​good​​​, So all your view files , The resource files will all be in this directory ：​​/src/main/resources/views/themes/good/​​​、​​/src/main/resources/static/themes/good/​​​. There are two other directories , public include The head and tail of ：​​/themes/good/include/header.html​​​、​​/themes/good/include/footer.html​​.

3、 There is no need to repeat how to operate , Same as the example in the previous chapter .

Back and forth

If you want to use only JeeSite As a server , Interface only , Provide client call . Later, I will focus on an article to introduce the application of front back separation , How to make JeeSite Become a server API, Provide mobile terminal or PC End （Vue or Angular） call .