Question

I am using Angular 6 and my templates are as below.

Header, Left panel, Body part, footer
Header,Left panel, Body part, right panel, footer
Header, body part, footer

Since, I have so many templates, I wanted to make it JSON driven instead of just hardcoding html part.

The JSON file will look like,

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

Here, the page gets divided into left panel(20% width) and body(80%) and then body gets divided into vertically like 60% top and 20% bottom.

Is there any way to make this JSON into HTML.

Thanks

Answer 1

虽然这个问题太笼统，但我还是一个后端人员，在着陆之前没有经过很多想法，所以我决定发表一个答案并分享我的经验。

我的目的是展示如何可以使用简单的代码以及很少的代码来创建可重用且易于维护的东西。

使用CSS代替将样式从JSON转换为HTML的方法，这里有一些示例，如何通过一个小的样式指南来管理许多模板，并获得所有最佳功能之一，即性能

使用一个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>

Converting JSON object to HTML template

1 个答案: