前端抽取公共页面

最新推荐文章于 2022-07-19 16:52:35 发布

牧码文

最新推荐文章于 2022-07-19 16:52:35 发布

阅读量613

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_46429290/article/details/118527395

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

抽取公共页面

处理table页面下的跳转，新建一个tableController类，负责table的所有页面的响应设置

@Controller
public class TableController {


    @GetMapping("/basic_table")
    public String basic_table(){

        return "table/basic_table";
    }

    @GetMapping("/dynamic_table")
    public String dynamic_table(Model model){

        return "table/dynamic_table";
    }

    @GetMapping("responsive_table")
    public String responsive_table(){
        return "table/responsive_table";
    }

    @GetMapping("editable_table")
    public String editable_table(){
        return "table/editable_table";
    }
}

抽取公共页面是属于前端的，在前端的设计中，有很多公共使用的部分，就可以把这些很多页面都是用的部分抽取出来，简化开发

比如将公共使用的部分全部选取出来放在common.html中

在Thymeleaf语法的写法

  <body>
  
    <div th:fragment="copy">
      &copy; 2011 The Good Thymes Virtual Grocery
    </div>
  
  </body>

也可以使用id

  <body>
  
    <div id="copy-session">
      &copy; 2011 The Good Thymes Virtual Grocery
    </div>
  
  </body>

在引用的时候也是存在三种语法

<body>

  ...

  <div th:insert="footer :: copy"></div>

  <div th:replace="footer :: copy"></div>

  <div th:include="footer :: copy"></div>
  
</body>

三种引用方法的区别

<body>

  ...

  <div>
    <footer>
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </div>

  <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
  </footer>

  <div>
    &copy; 2011 The Good Thymes Virtual Grocery
  </div>
  
</body>

注意：footer :: copy 中的footer是文件名，而不是标签名

牧码文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端抽取公共页面

抽取公共页面处理table页面下的跳转，新建一个tableController类，负责table的所有页面的响应设置@Controllerpublic class TableController { @GetMapping("/basic_table") public String basic_table(){ return "table/basic_table"; } @GetMapping("/dynamic_table") publ
复制链接

扫一扫