如何使用 ExpressJS / NodeJS 使用 JSON 作为 HTML / CSS 文件的模板？答案

【问题标题】：How do I use ExpressJS / NodeJS to use JSON as a template for HTML / CSS files?如何使用 ExpressJS / NodeJS 使用 JSON 作为 HTML / CSS 文件的模板？
【发布时间】：2020-08-15 14:13:23
【问题描述】：

我基本上想使用 ExpressJS / NodeJS 来使用 JSON 作为文件来构建网站。这将使用 JSON、HTML 和 CSS。我想了解如何通过 ExpressJS 将 JSON 文件自动化为 HTML

我的 HTML 代码

    body {
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
    }
    
    footer {
        /* place on the bottom */
        /* position: sticky; */
        bottom: 0;
        left: 0;
        width: 100%;
    
        background: #ec8549;
        display: grid;
        place-items: center;
        padding: 50px;
    }
    
    footer .footerItems {
        font-size: 20px;
        bottom: 0;
    }
    
    .section {
        padding: 0.5%;
        border: 2.5px solid #00ff6a;
        display: flex;
        margin-bottom: 5%;
        margin: 3%;
    }
    
    .bulletPointMore {
        list-style-position: inside;
    }
    
    .connectingText {
        vertical-align: top;
        display: inline-block;
        padding-right: 2.5%;
    }

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="section">
            <h2 class="titles">Investments Decisions</h2>
            <ul>
                <li>Investment: Putting money into something in order to make a profit. Can be undertaken by government, business and individuals.</li>
                <li>Superannuation: An employer putting money into a superannuation fund so an employee has money in retirement.</li>
            </ul>
        </div>
        <div class="section">
            <h2 class="titles">What to consider when making investment decisions</h2>
            <ul>
                <li>Risk is the degree of uncertainty about expected returns (and the possibility of loss).</li>
                <li>Risk is the chance an investment won’t give you the outcomes you want.</li>
                <li>Some individuals can tolerate more risk than others (usually based on their income and wealth).</li>
                <li>Rate of return is the overall earning (after taxes) that you might expect from investments. (income, interest, dividends, capital gains/losses)</li>
                <li>Liquidity - how easily an investment can be turned into cash.</li>
                <div class="bulletPointMore">
                
                    <li>    More liquid (more easily converted into cash) eg.</li>
                    <li>    Less liquid (less easily converted into cash) eg.</li>
                </div>
                <li>Diversification - reducing risk by spreading money among various types of investments. Having a portfolio of investments eg, shares and property.</li>
            </ul>
        </div>
        <div class="section">
            <div class="connectingText">
                <h2 class="titles">Who can invest?</h2>
                <ul>
                    <li>Individuals</li>
                    <li>Businesses/Institutions</li>
                    <li>Governetment</li>
                </ul>
            </div>
            <div class="connectingText">
            <h2 class="titles">Why do they invest?</h2>
                <ul>
                    <li>In order to achieve a financial goal…</li>
                    <li>To increase efficiency and profitability</li>
                    <li>Invest to ensure that a country increases its equality of life, economic prosperity or is competitive.</li>
                </ul>
            </div>
        </div>
        <div class="section">
            <h2 class="titles">Assessment Task</h2>
            <ul>
                <li>First decision to make before answering questions is to determine how you will divide the $500,000 into the three investment options of:</li>
                <li>Bank term deposit</li>
                <div class="bulletPointMore">
                    <li>Shares</li>
                    <li>Property</li>
                </div>
                <li>Begin researching properties first as it will be the most expensive option. Eg. if buying a $600,000 property. You will need to spend $300,000 out of the $500,000. Then get a bank loan for the other $300,000.</li>
            </ul>
        </div>
        <footer>
            <div class="footerItems">
                <p>52 &copy;</p>
            </div>
        </footer>
    </body>
    </html>

我在 JSON 文件中的意思。如果我想添加更多注释，这将为我自动执行该过程。

[
    {
        "id": 0,
        "Title": "Title",
        "BulletPoint1": "Text",
        "BulletPoint2": "Text"
    },
    {
        "id": 1,
        "Title": "Title",
        "BulletPoint1": "Text",
        "BulletPoint2": {
            "BulletPoint1": "Text",
            "BulletPoint2": "Text"
        }
    }
]

【问题讨论】：

标签： html css node.js json express

【解决方案1】：

我建议使用像 ejs engine 或 jadi 这样的 js 模板。小心这些引擎中存在的问题。

如果您可以学习和使用任何 js 库或框架来构建 UI 界面，那对您来说会更舒服。使用 Expressjs 制作 API，使用 react.js 之类的库或 Angular 之类的框架制作前端应用程序。

【讨论】：