前端HTML主页面
<div id="article">
<div id="articlexian"></div>
<span> {{data.title}}</span> //引入后端数据
<a id="moRe" href="">MORE</a>
<hr>
<ul>
{{each data.article}}
<li>
<div><span> {{$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})
})