node——由新闻列表跳转到新闻详情页

当我们在浏览新闻列表页面的时候，想要看感兴趣的新闻内容，需要到详情页面去查看内容。

在之前写好了新闻列表页面，现在需要做列表页面到详情页面的跳转，需要考虑一下问题

1.点击新闻列表某一项跳转到详情页面

2.跳转的页面时候我们想要的页面，每一条新闻需要有一个标记来识别

3.详情页面的页面内容显示

为了解决上面的问题，我们需要给跳转路径加一个id

在新闻列表页面的代码

<p class="index">
<% for(var i=0;i<list.length;i++){%>

<h1><a href="item?id=<%= list[i].id%>">标题：<%= list[i].name%></a></h1>
<p>链接：<%= list[i].url%></p>
<p>内容：<%= list[i].text%></p>
 <br/>
 <% }%>
</p>

代码中橙色字体就是一个简单的跳转实现，通过接受传过来的id来标记每一条新闻，这个id在每次更新list_news数组时加上，代码如下：

else if(req.url.startsWith('/add')&&req.method==='post'){
fs.readFile(path.join(__dirname,'data','data1.json'),'utf8',function(err,data){
        //因为第一次访问网站，data1.json文件本身就不存在，所以会有异常
        //这种错误，我们不认为是网站出错了，所以不需要抛出异常
        if(err&&err.code!=='ENOENT'){
            throw err;
        }
        //如果data没有读取到，则data为空，转换为数组
        var list_news=JSON.parse(data||'[]');

        
        var array=[];
        req.on('data',function(chunk){
            //此处的chunk参数，就是浏览器本次提交过来的一部分数据
            //chunk的数据类型是buffer
            array.push(chunk);
    
        });

        //监听request对象的end事件
        //当end事件被触发时，数据提交完成
        req.on('end',function(){
            var postBody=Buffer.concat(array);
            postBody=postBody.toString('utf8');
            
            postBody=querystring.parse(postBody);
        
            //把新闻添加到list之前，为新闻增加一个id
            postBody.id=list_news.length;

            //将用户的push提交到新闻push到List_news中
            list_news.push(postBody);
            fs.writeFile(path.join(__dirname,'data','data1.json'),JSON.stringify(list_news),function(err){
        if(err){
            throw err;
        }
        console.log('ok');
    });

            res.statusCode=302;//跳转
    res.statusMessage='Found';
    res.setHeader('Location','/');
            res.end('over');
        });
        
    });
}

这样就可以在每次录入新的新闻的时候，得到一个id，但是如果有删除等操作，这里会出现问题，在这里我们先不管这个

我们解决了跳转和新闻标记问题，就要解决详情页面显示内容的问题，代码如下

1.获取当前新闻的id
2.循环list_new中的数据，找到和id相同的数据
3.调用res.render()函数进行模板引擎渲染

}else if(urlObj.pathname==='/item'&&req.method==='get'){

    //1.获取当前新闻的id
    //urlObj.querty.id
    //2.读取data1.json文件的数据
    fs.readFile(path.join(__dirname,'data','data1.json'),'utf8',function(err,data){
        //因为第一次访问网站，data1.json文件本身就不存在，所以会有异常
        //这种错误，我们不认为是网站出错了，所以不需要抛出异常
        if(err&&err.code!=='ENOENT'){
            
            throw err;
        }
        var model=null;
        //如果data没有读取到，则data为空，转换为数组
        var list_news=JSON.parse(data||'[]');
        //循环list_new中的数据，找到和id相同的数据
        for(var i=0;i<list_news.length;i++)
        {
            //因为list_news[i].id在数组中是数值，urlObj.query.id是字符，所以可以将list_news[i].id转化为字符，虽然可以使用"=="，但尽量少用
            if(list_news[i].id.toString()===urlObj.query.id)
            {
                //如果找到了就记录下来
                model=list_news[i];
                break;

            }
        }
        if(model)
        {
    //3.调用res.render()函数进行模板引擎渲染
            res.render(path.join(__dirname,'views','details.html'),{item:model});//这里要传一个叫list的对象
        }
        else
        {
            res.end('no found')
        }
        
    });
    

}

node——由新闻列表跳转到新闻详情页

猜你喜欢