springBoot集成thmyleaf前端模板

淩亂°似流年 2022-12-13 12:44 95阅读 0赞

### springBoot集成thmyleaf前端模板 ###

首先pom

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

yml配置文件

spring
    	thymeleaf:
    	    cache: false # 关闭页面缓存
    	    encoding: UTF-8 # 模板编码
    	    prefix: classpath:/backEndTemplates/  # 页面映射路径
    	    suffix: .html # 试图后的后缀
    	    mode: HTML5 # 模板模式

调用

/** * 短信增值业务模板 */
    @Controller
    @Api(value = "短信增值业务模板", tags = { "短信增值业务模板"})
    @RequestMapping(value = "/templates")
    public class BusinessTemplatesController { 
    
        /** * 模板列表跳转 * @param ModelAndView * @return */
       @RequestMapping(value = "/toTemplatesList")
      public String toTemplatesList(Map<String,Object> map){ 
           return "templatesList"; //这就是我页面的名字，不加.html
       }
    }

\--------------------------------------------------------------后台首页实现点击左侧菜单右侧动态变化----------------------------------  
大佬链接：https://blog.csdn.net/Lining\_s/article/details/86658774?utm\_medium=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel\_param&depth\_1-utm\_source=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel\_param

代码：

主要看右侧内容区域  
内容区域标签id 为main,在执行请求后使用 $("\#main").html(data); 给id 为main的内容赋值

<!DOCTYPE html>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8"/>
        <title>宝贝计划运营平台</title>
        <link rel="stylesheet" href="/styles/style.css" type="text/css"/>
        <script src="scripts/libs/modernizr/modernizr.js" type="text/javascript"></script>
        <script src="scripts/config.js" type="text/javascript"></script>
    </head>
    <body>
    
    <section id="secondary_bar">
        <div class="user">
            <p>Pwstrick (<a href="#">3 Messages</a>)</p>
            
        </div>
        <div class="breadcrumbs_container">
            <article class="breadcrumbs"><a href="index.html">后台首页</a>
                <div class="breadcrumb_divider"></div>
                <a class="current">首页信息</a></article>
        </div>
    </section>
    <aside id="sidebar" class="column">
        <form class="quick_search">
            <input type="text" value="Quick Search" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
        </form>
        <hr/>
        <h3>模板管理</h3>
        <ul class="toggle">
            <li><font class="ficomoon icon-profile"></font><a href="javascript:void(0)"
                                                              onclick="template_List()">模板列表</a></li>
        </ul>
        <h3>门诊管理</h3>
        <ul class="toggle">
            <li><font class="ficomoon icon-bbs"></font><a href="#">门诊开通</a></li>
            <li><font class="ficomoon icon-circle"></font><a href="#">门诊列表</a></li>
        </ul>
        <h3>订购管理</h3>
        <ul class="toggle">
            <li><font class="ficomoon icon-users"></font><a href="#">订购查询</a></li>
        </ul>
        
    </aside>
    
    
    
    <section id="main" class="column main_shadow">
        <h4 class="alert_info">Welcome to the free MediaLoot admin panel template, this could be an informative
            message.</h4>
    
    </section>
    <script src="/scripts/libs/require/require.js" type="text/javascript" data-main="scripts/app/index/main"></script>
    <script type="text/javascript">
        function template_List() { 
            var data = { "viewName": "templatesList"};
            var href = "templates/toTemplatesList";
            alert(href);
            alert(data);
            //ajax 请求
            $.ajax({ 
                url: href,
                data: data,
                type: "post",
                success: function (data) { 
                    $("#main").html(data);  //请求的界面数据在右侧显示
                }
            });
      
        }
    
    </script>
    </body>
    </html>

调用：

/** * 短信增值业务模板 */
    @Controller
    @Api(value = "短信增值业务模板", tags = { "短信增值业务模板"})
    @RequestMapping(value = "/templates")
    public class BusinessTemplatesController { 
    
        /** * 模板列表跳转 * @param ModelAndView * @return */
        @RequestMapping(value = "/toTemplatesList")
        public ModelAndView toTemplatesList(ModelAndView mv, @RequestParam(value = "viewName",required = true)String viewName){ 
            mv.setViewName(viewName);
            return mv;
        }
    }