spring boot 怎么 html 嵌套 html？

最新推荐文章于 2023-03-12 19:02:26 发布

杨宗卫的爸爸

最新推荐文章于 2023-03-12 19:02:26 发布

阅读量2k

点赞数

文章标签： spring boot

本文链接：https://blog.csdn.net/yangzm/article/details/94740896

版权

这几天我在看admin方面的框架，发现很多框架里边的html 都是写在一起的，里边的侧边栏和页面都在一起？

怎么来处理这个问题？

thymeleaf 里边的replace 来处理，但发现不是很好用，thymeleaf里边的语法好复杂。
我看了vue 的语法发现也很麻烦(https://github.com/PanJiaChen/vue-element-admin) 这个排名第一，有时间可以好好学习一下。但边的样式我看了下也不好改动，代码量也不少，侧边栏是写在一个单独的文件夹里边的，改动起来不简单啊。

官网的动态组件是可以实现这个功能，但也不简单。

3. react 的实现：https://reacttraining.com/react-router/web/example/sidebar 比vue简单方便。

还有这个很有价值：

https://github.com/booleanhunter/ReactJS-AdminLTE/blob/master/routes.js

我现在喜欢这个方法，简洁、方便真的不错。

4. https://github.com/dsheiko/html-import html-import 登场了。

如果想编译就用npm吧，我直接用里边的dist 里边的html-import.es5.js 就可以了，而且ie 浏览器也可以支持，但是要求服务器运行后才可以。

写二个文件：a. index.html import-foo.html （来测试一下好不好用）

index.html 内容如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
  <head>
    <title>HTML Import Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="html-import.es5.js"></script>

  </head>
  <body>
    <div class="container">
      <h4>Import a single HTML file</h4>
      <link rel="html-import" href="import-foo.html" >
    </div>

  </body>
</html>

import-foo.html 内容如下:

<div class="alert alert-success" role="alert">Import FOO</div>

<div class="panel panel-default">
  <div class="panel-body">
    <h4>8888888</h4>
  </div>
</div>

b 创建一个文件夹放在 spring booot resource/static 下边

├── static

│ └── pages

│ ├── html-import.es5.js

│ ├── import-foo.html

│ └── index.html

c 在spring boot 的controller 里边写入这个：

    @GetMapping("/")
    public String greeting2(HttpServletRequest request,ModelMap map) {
        return "redirect:/pages/index.html";
    }

d 运行吧: localhost:8080/

成功了！！！

小结： firefox 是可以所见所得的，其它的一定要把服务器运行后才可以正常见结果，同在发现firefox对标准支持的很好，也不用打什么开关之类的，chrome 是要打开个开关的，用这个方法就可以不使用什么太复杂的技术来搭建框架了。

杨宗卫的爸爸

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
spring boot 怎么 html 嵌套 html？

这几天我在看admin方面的框架，发现很多框架里边的html 都是写在一起的，里边的侧边栏和页面都在一起？怎么来处理这个问题？thymeleaf 里边的replace 来处理，但发现不是很好用，thymeleaf里边的语法好复杂。我看了vue 的语法发现也很麻烦(https://github.com/PanJiaChen/vue-element-admin) 这个...
复制链接

扫一扫