html - 将 JSON 对象转换为 HTML 模板

Question

我正在使用 Angular 6，我的模板如下。

1. 页眉、左面板、正文部分、页脚
2. 页眉，左面板，正文部分，右面板，页脚
3. 页眉、正文部分、页脚

因为，我有这么多模板，所以我想让它由 JSON 驱动，而不仅仅是硬编码 html 部分。

JSON 文件看起来像，

{
   "horizontal" : [
     {
      width : 20%,
      height: 100%
     },
     {
      width : 80%,
      height: 100%,
      {
       "vertical" : [
         {
           width : 80%,
           height: 60%
         },
         {
           width : 80%,
           height: 40%
         }
       ]
      }
     }
   ],
 }

在这里，页面被分成左面板（20% 宽度）和正文（80%），然后正文被垂直分为 60% 顶部和 20% 底部。

有没有办法把这个 JSON 变成 HTML？

标签： htmlangularcss

Answer 1

虽然这个问题太宽泛了，但我也是/现在是后端人员，在登陆之前没有经过很多想法，所以我决定发布答案并分享我的经验。

我这样做的目的是展示如何简单，只需很少的代码，就可以创建可重用且易于维护的东西。

---

与其将样式从 JSON 转换为 HTML，不如使用 CSS 的含义，这里有一些示例如何使用小型样式指南管理许多模板，并获得所有最佳功能之一，即性能。

使用一个 CSS，使用 Flexbox，以及不同模板的给定逻辑，它可能看起来像这样。

示例 1（带有 CSS 注释）

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;           /* make children flex items */
  flex-direction: column;  /* default flow is row */
}

header, footer {           /* flex column item will by default fill parent's width */
                           /* height is controlled by content */
}

.wrapper {                 
  flex: 1;                 /* fill remaining height (flex column item) */
  display: flex;
}
 
aside {                    /* flex row item will by default fill parent's height */
  flex-basis: 20%;         /* set width (flex column item) */
}

main {
  flex: 1;                 /* fill remaining width (flex row item) */
}

section {
  flex-basis: 60%;         /* set height (flex column item) */
}

section + section {        /* target the 2nd section */
  flex-basis: 40%;
}


/* for demo purpose */
header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <div class="wrapper">
    <aside>Aside</aside>
    <main>
      <section>Section</section>
      <section>Section</section>
    </main>
  </div>
  <footer>Footer</footer>
</div>

样品 2

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;
  flex-direction: column;
}

header, footer {
}

.wrapper {                 
  flex: 1;
  display: flex;
}
 
aside {
  flex-basis: 20%;
}

main {
  flex: 1;
}

section {
  flex-basis: 60%;
}

section + section {
  flex-basis: 40%;
}


header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <div class="wrapper">
    <aside>Aside</aside>
    <main>
      <section>Section</section>
      <section>Section</section>
    </main>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</div>

样品 3

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;
  flex-direction: column;
}

header, footer {
}

.wrapper {                 
  flex: 1;
  display: flex;
}
 
aside {
  flex-basis: 20%;
}

main {
  flex: 1;
}

section {
  flex-basis: 60%;
}

section + section {
  flex-basis: 40%;
}


header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <main>
    <section>Section</section>
    <section>Section</section>
  </main>
  <footer>Footer</footer>
</div>

---

或者对于给定的模板，使用不同的 CSS（这里只显示 1 和 3，因为 2 将与上面相同）

样品 1

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;
  flex-direction: column;
}

header, footer {
}

.wrapper {                 
  flex: 1;
  display: flex;
}
 
aside {
  flex-basis: 20%;
}

main + aside {             /* target the 2nd/right aside */
  display: none;
}

main {
  flex: 1;
}

section {
  flex-basis: 60%;
}

section + section {
  flex-basis: 40%;
}


/* for demo purpose */
header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <div class="wrapper">
    <aside>Aside</aside>
    <main>
      <section>Section</section>
      <section>Section</section>
    </main>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</div>

样品 3

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;
  flex-direction: column;
}

header, footer {
}

.wrapper {                 
  flex: 1;
  display: flex;
}
 
aside {
  display: none;
}

main {
  flex: 1;
}

section {
  flex-basis: 60%;
}

section + section {
  flex-basis: 40%;
}


/* for demo purpose */
header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <div class="wrapper">
    <aside>Aside</aside>
    <main>
      <section>Section</section>
      <section>Section</section>
    </main>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</div>