node 实现网易人间数据交互

前端HTML主页面

 <div id="article">
            <div id="articlexian"></div>
            <span>&nbsp;&nbsp;{{data.title}}</span> //引入后端数据
            <a id="moRe" href="">MORE</a>
            <hr>
            <ul>
                {{each data.article}}
                <li>
                    <div><span>&nbsp;&nbsp;&nbsp;{{$value.date}}</span> <p>{{$value.date1}}</p></div> //引入后端数据
                    <a href="./zi.html?id={{$value.id}}"> //跳转到子页面
                        {{$value.articletitle}}<br></a>
                        {{$value.articletitle1}}  //引入后端数据

                    <input type="button" value=" 案例展示 " >
                </li>

                <hr>
                {{/each}}
            </ul>
        </div>

前端子页面

<div class="item">
    <div id="article1">
        <span>{{datatotal.title1}}</span>
        <hr>
        <ul>
            {{each datatotal.article}}
            <li>
               <span>{{$value.data}}</span>
                <img src="{{$value.img}}" alt="">

                <span>{{$value.data1}}</span>
                <img src="{{$value.img1}}" alt="">

                <span>{{$value.data2}}</span>
                <img src="{{$value.img2}}" alt="">

                <span>{{$value.data3}}</span>
                <img src="{{$value.img3}}" alt="">

                <span>{{$value.data4}}</span>
                <img src="{{$value.img4}}" alt="">

                <span>{{$value.data5}}</span>
                <img src="{{$value.img5}}" alt="">

                <a href="./index.html/?id={{$value.id}}"></a>
            </li>
            {{/each}}
        </ul>
    </div>

后端传输到主页面

const data = {
    title: "大标题",
    article: [
        {
            id: 1,
            'articletitle': "内容1",
            'articletitle1': "内容2",
            date: '内容3',
            date1: '内容4'
        },
        {
            id: 2,
              'articletitle': "内容1",
            'articletitle1': "内容2",
            date: '内容3',
            date1: '内容4'
        },
]
},

后端传输到子页面

const dataone = {
    title1: "页面1标题",
    article: [
        {
            data: " 内容1"
        },
        {
            img: "照片地址"
        },
const datatwo = {
    title1: "页面2标题",
    article: [
        {
            data: "内容1"
        },
        {
            img:"照片地址"
        },
//if判断 根据id 判断子页面传输哪些数据
app.get('/zi.html', (req, res) => {
    let datatotal = null
    if (req.query.id == 1) {
        datatotal = dataone
    }
    if (req.query.id == 2) {
        datatotal = datatwo
    }

    console.log(req.query.id)
    res.render('zi.html', {datatotal})
})

 

 

posted @ 2021-12-21 11:19  泡椒pg  阅读(30)  评论(0)    收藏  举报