node前后端交互功能（子页面的实现）

父页面内容

<div id="products">
    <div id="article">
        <h3>{{data.title}}</h3>
​
        <ul>
            {{each data.article}}
            <li>
                <a href="./subpage.html/?id={{$value.id}}" target="_blank">
                    {{$value.articletitle}}
​
                    <span>{{$value.date}}&nbsp;&nbsp;</span>
                    <span>{{$value.firm}}&nbsp;&nbsp;&nbsp;</span>
                </a>
            </li>
            {{/each}}
        </ul>
    </div>
​
</div>

子页面内容

<div id="products">
    <div id="article">
        <div>
            <h2 style="font-size: 25px;color: #333333; font-family: 微软雅黑">{{dataTotal.title}}</h2>
            <p style="color: #666666;font-size: 14px;font-family: 微软雅黑">{{dataTotal.date}}</p>
            <hr style="height:1px;border:none;border-top:1px solid #e5e5e5;margin: 19px 0 36px 0"/>
            {{each dataTotal.article}}
            <p>{{$value.data1}}</p>
            <p>{{$value.data2}}</p>
            <p>{{$value.data3}}</p>
            <p>{{$value.data4}}</p>
            <p>{{$value.data5}}</p>
            <p>{{$value.data6}}</p>
            <p>{{$value.data7}}</p>
            <p>{{$value.data8}}</p>
            <p>{{$value.data9}}</p>
            <p>{{$value.data10}}</p>
            <img src="{{$value.img1}}" alt="">
            <img src="{{$value.img2}}" alt="">
            <img src="{{$value.img3}}" alt="">
            <img src="{{$value.img4}}" alt="">
            <img src="{{$value.img5}}" alt="">
            {{/each}}
        </div>
    </div>
</div>
​

后端发布内容

const express = require('express')
​
const app = express()
​
​
//引入express-art-template 用来解析html文件
app.engine('html', require('express-art-template'))
​
//开放静态资源public 和 node_modules
app.use('/public', express.static('public'))
app.use('/views', express.static('views'))
app.use('/node_modules', express.static('node_modules'))
app.use('/js', express.static('js'))
​
const data = {
    title: " | 新闻列表",
    article: [
        {id: 1,
            'articletitle': "祝贺！第十九届北京市工业和信息化职业技能竞赛之 增材制造（3D打印）设备操作员决赛圆满成功",
            firm:'[公司新闻]',
            date: '2021-10-13'
        },
        {id: 2,
            'articletitle': "央视CCTV：深圳创想三维年出货100万台3D打印机",
            firm:'[公司新闻]',
            date: '2021-03-08'
        },
        {id: 3,
            'articletitle': "FDM、LCD、SLA3D打印机的优势和劣势",
            firm:'[公司新闻]',
            date: '2021-02-23'
        },
        {id: 4,
            'articletitle': "创想三维北京分公司助力中国印刷博物馆3D打印应用展，多款机器和样品被展出",
            firm:'[公司新闻]',
            date: '2021-02-02'
        },
        {id: 5,
            'articletitle': "3D打印机厂家-创想三维发布重磅年终奖",
            firm:'[公司新闻]',
            date: '2021-02-01'
        },
        {id: 6,
            'articletitle': "千团行动|凝心聚力，创想三维联合高校共建千个“创想3D打印社团”",
            firm:'[公司新闻]',
            date: '2021-01-28'
        },
        {id: 7,
            'articletitle': "过年礼|过年送这款3D打印笔给孩子，比红包更合适",
            firm:'[公司新闻]',
            date: '2021-01-28'
        },
        {id: 8,
            'articletitle': "FDM3D打印机怎么挑选？价格贵吗？",
            firm:'[公司新闻]',
            date: '2021-01-28'
        },
        {id: 9,
            'articletitle': "3D打印模型后期上色处理方法",
            firm:'[公司新闻]',
            date: '2021-01-08'
        },
        {id: 10,
            'articletitle': "全国第一届职业技能大赛开幕，创想三维鼎力支持",
            firm:'[公司新闻]',
            date: '2020-12-13'
        },
        {id: 11,
            'articletitle': "北京创想三维助力河北工院开展2020年河北省中职院校3D打印师资培训",
            firm:'[公司新闻]',
            date: '2020-12-10'
        },
        {id: 12,
            'articletitle': "创想三维总部领导来北京分公司指导工作",
            firm:'[公司新闻]',
            date: '2020-11-12'
        },
        {id: 13,
            'articletitle': "重庆教育装备展人气爆棚，创想三维多款产品备受瞩目",
            firm:'[公司新闻]',
            date: '2020-10-26'
        },
        {id: 14,
            'articletitle': "2020年“创想杯”总决赛拉开序幕,200+选手齐聚杭州展开激烈角逐",
            firm:'[公司新闻]',
            date: '2020-10-24'
        },
        {id: 15,
            'articletitle': "3D打印机的应用领域",
            firm:'[公司新闻]',
            date: '2020-07-01'
        }
    ]
}
​
const dataOne= {
    title: "祝贺！第十九届北京市工业和信息化职业技能竞赛之 增材制造（3D打印）设备操作员决赛圆满成功\n",
    date: "发表时间：2021-10-13 15:01\n",
    article: [
        {data1:"10月10日，第十九届北京市工业和信息化职业技能竞赛之增材制造（3D打印）设备操作员决赛在首钢工学院（北京市职业技能公共实训基地）举办。"},
        {img1:"https://24877273.s21i.faiusr.com/2/ABUIABACGAAg7ZOaiwYo2ovfxAMwoAs4uAg!500x500.jpg"},
        {data2:" 据悉，竞赛以“展新时代工匠风采 育高精尖技能英才”为主题，分为初赛、复赛和决赛三个阶段，共332名报名选手报名参加。经过层层选拔，最终来自北京十维科技有限责任公司、中国移动通信集团北京有限公司、北京京翰林模具制造有限公司、北京经济管理职业学院、北京现代汽车有限公司、北京龙凤呈祥医院管理有限公、北京流畅科技有限公司、首钢工学院、北京市应用高级技工学校等单位32名选手晋级决赛。" },
        {data3:"竞赛组委会将对决赛中取得第一名的选手，优先推荐“首都劳动奖章”评选；其中不满40周岁的选手优先推荐“北京市青年五四奖章”评选。排名前30%的选手，授予“北京市工业和信息化高级技术能手”称号。对决赛中总成绩第一名的选手，授予“北京市工业和信息化最佳技术能手”称号。"},
        {img2:"https://24877273.s21i.faiusr.com/4/ABUIABAEGAAg_IiaiwYo-7LK2AUwngQ47AI.png"},
        {data4:"      竞赛根据3D打印工艺和应用，分为工业级光固化3D打印、陶瓷3D打印、桌面FDM&光固化3D打印三个赛道，选手将通过7个小时，完成综合能力测评、三维数据采集、逆向设计、产品创新设计、3D打印和后处理六个任务模块的比拼，充分考核选手综合运用各种软硬件平台完成工作任务的能力。"},
        {img3:"https://24877273.s21i.faiusr.com/3/ABUIABADGAAg_IiaiwYo9urorQQw2AQ4lQM.gif"},
        {data5:"竞赛引入COMET国际职业能力8项指标，包括直观性、功能性、使用价值导向性、经济性、工作过程导向性、社会接受度、环保性、创造性。以检验选手发挥应用基础理论判断、分析、解决专业技术和实际问题的综合能力。"},
        {data6:""},
        {data7:"竞赛将大力弘扬劳动光荣、技能宝贵、创造伟大的时代风尚，营造人人皆可成才、人人尽展其才的良好环境，为增材制造领域高素质劳动者和技术技能人才提供成长通道。\n" +
                "\n" },
    ]
}
const dataTwo = {
    title: "央视CCTV：深圳创想三维年出货100万台3D打印机\n",
    date: "发表时间：2021-03-08 10:25\n",
    article: [
        {img4:"https://24877273.s21i.faiusr.com/4/ABUIABAEGAAgpKTJgAYo2IOtygIwzQQ4qAM.png"},
        {data1: "       创想三维CREALITY2020年出货量暴增，年出货量达到100万台，销往192各国家和地区。创想三维始终以3D打印产业布道者为企业使命，坚持以布道者的精神传递，让千家万户享受科技带来的便捷，为产业赋能。\n" +
                "\n"},
    ]
}
const dataThree = {
    title: "FDM、LCD、SLA3D打印机的优势和劣势\n",
    date: "发表时间：2021-02-02 17:46\n",
    article: [
        {img5:"https://24877273.s21i.faiusr.com/2/ABUIABACGAAg0qbegAYo8t75kAEwuAg40gI!600x600.jpg"},
        {data1:"  今天就让小编来讲讲如今3D打印机的三种主流技术的优势和劣势，这三种技术分别是FDM(熔融堆积成型技术)，SLA(激光扫描立体成型技术)和LCD(选择性区域透光固化技术)。"},
        {data2:" FDM(熔融堆积成型技术)" },
        {data3:" 优势"},
        {data4:"  1.FDM桌面3D打印机是办公环境的理想选择，这类设备便于操作与维护保养，而且打印过程无需其他器械的协助。" },
        {data5:"  2.耗材方法单一化，都以线的方法存在，这一些耗材价格比较划算，耗材方便使用，而且能够长期存储。" },
        {data6:"  3.多材料种类适用，FDM打印工艺所应用的耗材方法尽管单一化，但材质是多样式的，主流应用的比如水溶性支撑材料，ABS,PA,PC，TPU等等都能根据FDM设备打印产品。" },
        {data7: "4.打印成型尺寸大。\n" +
                "\n"},
    ]
}
​
​
​
app.get('/', (req, res) => {
    res.render('index.html')
})
app.get('/index.html', (req, res) => {
    res.render('index.html')
})
app.get('/About.html', (req, res) => {
    res.render('About.html')
})
app.get('/Application.html', (req, res) => {
    res.render('Application.html')
})
app.get('/Contact.html', (req, res) => {
    res.render('Contact.html')
})
app.get('/Education.html', (req, res) => {
    res.render('Education.html')
})
app.get('/gongYe.html', (req, res) => {
    res.render('gongYe.html')
})
app.get('/zhengJi.html', (req, res) => {
    res.render('zhengJi.html')
})
app.get('/zuZhuang.html', (req, res) => {
    res.render('zuZhuang.html')
})
app.get('/News.html', (req, res) => {
    res.render('News.html',{data})
})
​
app.get('/subpage.html', (req, res) => {
    console.log(req.query.id)
    let dataTotal=null
    if (req.query.id == 1) {
        dataTotal=dataOne
    }
    if (req.query.id == 2) {
        dataTotal = dataTwo
    }
    if (req.query.id == 3) {
        dataTotal = dataThree
    }
​
    res.render('subpage.html', {dataTotal})
​
})
​
app.listen(3001, () => console.log('app is running......'))