06-原生js实现新闻列表页面

1. 搭建服务器

• 为了页面能够正常显示中文，需要设置头部
• 头部的查看：控制台 — Network — 文件 — Headers
• req:从浏览器到客户端【请求】
• res:从客户端到浏览器【响应】

const server = http.createServer((req, res) => {
   
    res.setHeader("content-type", "text/html;charset=utf-8");
})
server.listen(3000);

2. 主页显示数据的处理

if (urlObj.pathname === "/" || urlObj.pathname === "/index") {
   
    // 文件读取；
    // let indexData =  fs.readFileSync("./views/index.html")
    // res.end(indexData);
    // 流方式；
    // 组装html；
    let str = "";
    data.forEach(v => {
   
        str += `<li class="news">
        <a href="${
     v.imgUrl}">
            <img src="${
     v.imgUrl}" alt="">
        </a>
        <div>
            <h3>
                <a href="javascript:;">${
     v.title}</a>
            </h3>
            <div class="info">
                <span class="tips"><span>${
     v.