zoukankan      html  css  js  c++  java
  • 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 随手记录
    node 调试器
    GIT
    原型
    ES6 (11):Class
    ES6 (10):Generator
    集合框架02
    集合框架01
    实现各种尺寸的图片裁剪成圆形头像
    鼠标移上显示 ( 自定义内容 ) 弹出框
  • 原文地址:https://www.cnblogs.com/ellen-mylife/p/10964093.html
Copyright © 2011-2022 走看看