HTML和node.js前后端數據交互

HTML與node的前后端交互

---

 

我們在做網頁的前期，肯定會有前后端的交互，下面就HTML與node.js的前后端交互來給大家介紹一下具體該怎么寫呢？

首先在前端HTML里寫each循環，在前端點擊id到后台，H5頁面里的a鏈接到每個后端每個id，判斷要傳輸那些數據，在后端傳輸到前端。

需要注意的是：一個each必須要在一個盒子里，不能跨盒子，否則id會分配混亂，出現多個id

<div id="newNews">
    {{each data.article}}
    <span>
        <a href="./son.html?id={{$value.id}}" target="_blank">
        <p>{{$value.articletitle}}</p>
        </a>
        <b>{{$value.date}}</b>
    </span>
    {{/each}}
</div>

const data = {
    article: [
        {
            id: 1,
            'articletitle': "官宣，智汀正式更名！",
            date: '2021/11/01',
        },
        {
            id: 2,
            'articletitle': "智汀國際|與“方舟”同行，用科技創造未來典范",
            date: '2021/10/27',
        },
        {
            id: 3,
            'articletitle': " 智汀國際|助力華潤置地打造貴陽新封面",
            date: '2022/6/1',
        },
        {
            id: 4,
            'articletitle': "智汀國際|房地產品牌館標准化服務之“世茂”篇 II",
            date: '2021-10-19',
        }
    ]
}

這樣就會生成4個span標簽，但前端只寫一個，如果前端寫四個span的話，他會生成16個span，每個id都會生成四遍

這樣他就會給span標簽自動分配id，點擊不同的a標簽時，后台就會根據id的不同來給他分配不同的子頁面。

const dataOne = {
    article: [
        {title1: '官宣，智汀正式更名！'},
    ]
}
const dataTwo = {
    article: [
        {
            title1: '智汀國際與“方舟”同行，用科技創造未來典范'
        },
   ]
}
const dataFour = {
    article: [
        {
            title1: '智汀國際|房地產品牌館標准化服務之“世茂”篇 II'
        },
   ]
}

這樣我們就建了一個子頁面，但是卻能根據用戶點擊的不同，而分配不同的頁面供其瀏覽。