springBoot集成thmyleaf前端模板

最新推荐文章于 2024-06-18 07:03:35 发布

非洲难民M

最新推荐文章于 2024-06-18 07:03:35 发布

阅读量481

点赞数

分类专栏： java 基础程序笔记文章标签： java templates

本文链接：https://blog.csdn.net/weixin_42563880/article/details/109012783

版权

java 同时被 3 个专栏收录

44 篇文章 0 订阅

订阅专栏

程序笔记

41 篇文章 0 订阅

订阅专栏

基础

15 篇文章 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>
        <!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
    </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><!-- end of secondary bar -->
<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>
    <!-- <h3>设置</h3>
     <ul class="toggle">
         <li><font class="ficomoon icon-admin"></font><a href="#">管理员设置</a>
             <menu class="children dn">
                 <dl>
                     <dd><a href="#">添加管理员</a></dd>
                 </dl>
             </menu>
         </li>
     </ul>-->
</aside><!-- end of sidebar -->


<!--内容区域-->
<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;
    }
}

非洲难民M

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
springBoot集成thmyleaf前端模板

springBoot集成thmyleaf前端模板首先pom<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>yml配置文件spring thymeleaf: cache: false # 关闭页面缓存
复制链接

扫一扫

专栏目录