实验要求：我们在上机实验7在后端读取了名为show.html的文件，并用underscore包中的template方法将数据注入到show.html文件中并显示。我们在上机实验6中，学习了使用bootstrap进行响应式开发。实验8是将实验7中的show.html改写成响应式开发，将实验6与实验7的内容相结合。
show文件
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>歌单</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css"></head><body><divclass="container"><divclass="row"><divclass="col-md-3 col-sm-6"><divclass="card"style="width: 18rem;"><imgsrc="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14032331944%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650783318&t=ab212492b5761936d2b9f4e61bc4c5d1"class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of
the card's
content.</p></div><ulclass="list-group list-group-flush"><liclass="list-group-item">
<%=Id%>
</li><liclass="list-group-item">
<%=title%>
</li><liclass="list-group-item">
<%=singer%>
</li></ul><divclass="card-body"><ahref="#"class="card-link">Card link</a><ahref="#"class="card-link">Another link</a></div></div></div><divclass="col-md-3 col-sm-6"><divclass="card"style="width: 18rem;"><imgsrc="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14032331944%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650783318&t=ab212492b5761936d2b9f4e61bc4c5d1"class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of
the card's
content.</p></div><ulclass="list-group list-group-flush"><liclass="list-group-item">
<%=Id%>
</li><liclass="list-group-item">
<%=title%>
</li><liclass="list-group-item">
<%=singer%>
</li></ul><divclass="card-body"><ahref="#"class="card-link">Card link</a><ahref="#"class="card-link">Another link</a></div></div></div><divclass="col-md-3 col-sm-6"><divclass="card"style="width: 18rem;"><imgsrc="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14032331944%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650783318&t=ab212492b5761936d2b9f4e61bc4c5d1"class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of
the card's
content.</p></div><ulclass="list-group list-group-flush"><liclass="list-group-item">
<%=Id%>
</li><liclass="list-group-item">
<%=title%>
</li><liclass="list-group-item">
<%=singer%>
</li></ul><divclass="card-body"><ahref="#"class="card-link">Card link</a><ahref="#"class="card-link">Another link</a></div></div></div><divclass="col-md-3 col-sm-6"><divclass="card"style="width: 18rem;"><imgsrc="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14032331944%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650783318&t=ab212492b5761936d2b9f4e61bc4c5d1"class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of
the card's
content.</p></div><ulclass="list-group list-group-flush"><liclass="list-group-item">
<%=Id%>
</li><liclass="list-group-item">
<%=title%>
</li><liclass="list-group-item">
<%=singer%>
</li></ul><divclass="card-body"><ahref="#"class="card-link">Card link</a><ahref="#"class="card-link">Another link</a></div></div></div></div></div></body></html>
server文件
var http =require('http');const fs =require('fs');var _ =require("underscore");var server = http.createServer();
server.on('request',function(req, res){var music ={
Id:1002,
title:'梦里水乡',
singer:'老八秘制小汉堡',
type:'奥利给'}const url = req.url;if(url ==='/show'){
fs.readFile(__dirname + url +'.html','utf-8',function(err, data){if(err){
res.end(err.message);}else{var compiled = _.template(data);//解析执行函数var htmlstr =compiled(music);//调用函数，注入数据
res.end(htmlstr);//显示页面}})}else{
res.end('404 not found!!!!!!');}});
server.listen(3000,"127.0.0.1",function(){
console.log("server is listening 127.0.0.1:3000");});
本文转载自: https://blog.csdn.net/m0_46672781/article/details/123736062
版权归原作者 勇敢*牛牛 所有， 如有侵权，请联系我们删除。
版权归原作者 勇敢*牛牛 所有， 如有侵权，请联系我们删除。