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'
        },
   ]
}

这样我们就建了一个子页面，但是却能根据用户点击的不同，而分配不同的页面供其浏览。